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

Posted 2023-03-28

【中文标题】如何在 Flutter 中为卡片添加渐变？

【英文标题】：How to add a gradient to a card in 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）

【参考方案1】：

使用DecoratedBox 而不是Container

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：***.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: ...