如何在 Flutter 中为卡片添加渐变？答案

【问题标题】：How to add a gradient to a card in Flutter?如何在 Flutter 中为卡片添加渐变？
【发布时间】：2021-11-28 18:07:28
【问题描述】：

我正在努力实现这个设计：

我还想使用 Flutter 提供的 Card 小部件。它带有一些我想使用的不错的主题支持 (CardTheme)。

所以不知道如何将LinearGradient 给Card。以下是我尝试将Card 与Container 结合起来做的事情：

Card(
    child: Container(
      margin: EdgeInsets.all(5),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            cardBorderColor,
            Theme.of(context).colorScheme.surface,
          ],
          stops: [0, 0.8],
        ),
      ),
      child: ...

如您所见，放置 Container 时会考虑卡片的边框半径。

【问题讨论】：

您面临的具体问题是什么？是容器的硬边吗？
@MoazEl-sawaf，我的问题是我不想在一堆地方指定borderRadius。我只想使用Card 小部件，设置它的渐变并让它计算出自己的边框半径（CardTheme）

标签： flutter gradient card

【解决方案1】：

使用DecoratedBox 而不是Container

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：stackoverflow.com/help/how-to-answer。祝你好运?
是的，你能提供一个代码示例吗？这似乎对我不起作用（我没有得到圆形边框）

【解决方案2】：

您可以在那里使用borderRadius: BorderRadius.circular(x),，并使用ClipRRect 包装所有内容以获得Card 颜色。您可能有充分的理由拥有Card，但我不知道，但您检查Material 小部件，它会很容易存档，比如不处理Card 的额外边框/覆盖颜色。

结果

小部件


class DX extends StatelessWidget {
  const DX({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepPurple,
      body: Center(
        child: ClipRRect(
          borderRadius: BorderRadius.circular(35), //* you can  increase it
          child: Card(
            color: Colors
                .transparent, //* or set the bg Color and remove [ClipRRect]
            child: Container(
              width: 400,
              height: 100,
              // margin: EdgeInsets.all(5),

              decoration: BoxDecoration(
               border: Border.all(width: 0, color: Colors.transparent),
                borderRadius: BorderRadius.circular(22),
                gradient: LinearGradient(
                  colors: [
                    Colors.red,
                    // cardBorderColor,
                    Theme.of(context).colorScheme.surface,
                  ],
                  stops: [0, 0.8],
                ),
              ),
              child: Center(child: Text("asdasd")),
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：

感谢您的回答！这可行，但我可以很容易地在Card 内的Container 的装饰上指定borderRadius。我的目标不是使用borderRadius，因为我希望它由CardTheme 设置。
如何从容器中删除边框并仅使用clipRRect
是的，Card 上的 clipBehavior 属性成功了。我猜它类似于独立的ClipRRect。

【解决方案3】：

将Card 的clipBehavior 属性设置为Clip.antiAlias 即可达到预期结果：

Card(
    clipBehavior: Clip.antiAlias, // <-- this did the trick
    margin: EdgeInsets.all(5),
    child: Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            cardBorderColor,
            Theme.of(context).colorScheme.surface,
          ],
          stops: [0, 0.8],
        ),
      ),
      child: ...

【讨论】：