装饰颤动中的容器渐变宽度

Question

我有一个 Container，它有一个

gradient

BoxDecoration。我想要实现的是减少

width

的

gradient

，就像

border

一样，这样它就可以是一条小细线。下面是我的Container代码

Container(
              width: 220,
              height: 120,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                      colors: [
                    Colors.purple.shade900,
                    Colors.purple.shade100,
                  ])),
              child: Container(
                width: 200,
                height: 100,
                color: Colors.white,
                alignment: Alignment.center,
                child: const Text('Linear Gradient'),
              ),
            )

Answer 1

尝试下面的代码希望对您有帮助，我认为您增加了第二个容器的宽度和高度。参考我的相同答案这里

Container(
    width: 220,
    height: 120,
    alignment: Alignment.center,
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
        colors: [
          Colors.purple.shade900,
          Colors.purple.shade100,
        ],
      ),
    ),
    child: Container(
      width: 215,
      height: 115,
      color: Colors.white,
      alignment: Alignment.center,
      child: const Text('Linear Gradient'),
    ),
  ),

结果屏幕 ->

Answer 2

你的渐变是你的外部容器。 如果您想减少渐变的宽度，请减少容器的宽度。

Container(
              width: 4,
              height: 120,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                      colors: [
                    Colors.purple.shade900,
                    Colors.purple.shade100,
                  ])),
              child: Container(
                width: 200,
                height: 100,
                color: Colors.white,
                alignment: Alignment.center,
                child: const Text('Linear Gradient'),
              ),
            )

如果您想将渐变容器包装在更大的容器中，请用更大的容器包装它