如何在卡片中添加渐变色？

Posted 2023-03-28

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

【英文标题】：How to add gradient color in card?

【发布时间】：2021-10-21 10:03:22

【问题描述】：

如何在卡片背景中添加渐变色？我应该用容器和盒子装饰来复制这张卡片还是有其他简单的方法？

【问题讨论】：

你能添加你的代码sn-p吗？它可以通过使用容器来完成

【参考方案1】：

这是我刚刚尝试的示例。适合我。

Container(
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    colors: [Colors.black, Colors.white],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight)),
          )

【讨论】：

如果这对您有帮助，请告诉我。

谢谢，这是我最好的选择，但您还必须添加圆形边框和 InkWell 小部件才能像卡片一样进行操作。如果没有其他解决方案，我会这样做..

【参考方案2】：

试试下面的代码希望它在下面的答案中对你有所帮助改变你需要的颜色。

         Card(
            child: Container(
              height: 50,
              width: 150,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Colors.yellow,
                    Colors.orangeAccent,
                    Colors.yellow.shade300,
                  ],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
              ),
              child: Container(), //declare your widget here
            ),
          ),

你的卡片看起来像->

如果你是渐变背景卡试试下面的代码

  Container(
        
          height: 50,
          width: 150,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Colors.yellow,
                Colors.orangeAccent,
                Colors.yellow.shade300,
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
        child:Card(
          color:Colors.white,
          child: Container(), //declare your widget here
        ),
      ),

你的屏幕喜欢 ->

【讨论】：

谢谢，但它不适合卡片的边框:(

谢谢，但它不适合卡片的边框:(

参考我的更新答案，一件事忘记了更新图像的黑色尝试更新代码希望对您有所帮助

谢谢，但仍然不适合卡片的边框半径。

你能告诉我你想要的图片或图片是什么吗？

【参考方案3】：

另一种方式，可能是我认为最好的方式：

  Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.centerRight,
                    end: Alignment.center,
                    colors: [Colors.deepOrangeAccent, Colors.orange],
                  ),
                ),
                width: 300,
                height: 300,
                child: Card(
                  color: Colors.transparent,
                ),
              ),

输出：

Click here to view