如何在颤动中并排放置两个渐变答案

【问题标题】：How to have two gradients side by side in flutter如何在颤动中并排放置两个渐变
【发布时间】：2022-01-25 07:31:49
【问题描述】：

我希望有两个并排的线性渐变，而不是将它们分别放在不同的 Container() 中

我的代码：

      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [
              // Instead of two different colors here I want to have the two other Linear gradients
              // with each having two other different colors that go from top to bottom
              Color(0xff5a0dbe),
              Color(0xff004773),
            ],
            stops: [0.5, 0.5],
            tileMode: TileMode.clamp,
          ),
        ),
        child: const Center(
            child: Text(
          "sds",
          style: TextStyle(color: Colors.white),
        )),
      ),

我得到的是

我想要的是

【问题讨论】：

为什么不使用第二个容器？
因为如果我这样做了，那么我将不得不使用 Stack 将其他元素放在它们的位置上，我不想这样做，这就是我寻找另一种选择的原因
它可以通过两个渐变容器来归档，我提供一个demo sn-p
你想避免使用stack吗？您也可以使用CustomPainter 或Clipper，这可能比这更复杂。或CustomMultiChildLayout
您也可以只使用单个Column 和此 UI 的背景，无需定位它们

标签： flutter dart flutter-layout gradient

【解决方案1】：

您可以使用Column 来放置您在评论中描述的小部件，无需担心定位小部件。将Stack 与两个Container 一起使用

 return Scaffold(
      body: LayoutBuilder(
        //for future purpose if needed
        builder: (context, constraints) {
          return Stack(
            alignment: Alignment.topCenter, // defult topLeft
            children: [
              Row(
                children: [
                  Expanded(
                    child: Container(
                      decoration: const BoxDecoration(
                        gradient: LinearGradient(
                          colors: [
                            Color(0xff5a0dbe),
                            Color(0xff004773),
                          ],
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                          // stops: [0.5, 0.5],
                          // tileMode: TileMode.clamp,
                        ),
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      decoration: const BoxDecoration(
                        gradient: LinearGradient(
                          colors: [
                            Color(0xff00436D),
                            Color(0xff031420),
                          ],
                          // stops: [0.5, 0.5],
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                          // tileMode: TileMode.clamp,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(
                // dont need it, 
                width: constraints.maxWidth,
                height: constraints.maxHeight,
                child: Column(
                  // do everything on column
                  children: [
                   
                  ],
                ),
              )
            ],
          );
        },
      ),
    );

【讨论】：

你可以找到更多关于布局here