根据父部件的宽度和高度自动调整小部件的大小并放置

Question

目标：基于父控件的约束条件实现自适应大小的小部件

---

使用场景：将两个按钮放置在同一个Row上，以适应多种屏幕尺寸（响应式）

问题：我有两个按钮（每个都包装在一个column小部件中），这些按钮位于一个Row小部件内。

总体而言，（父->子）：Row > [Column-Column]

如下图所示。

---

尝试的解决方案：我尝试将小部件放置在一个Expanded小部件内，该小部件放置在Flex小部件内

填充> Flex> Expanded> Row> [Widgets]

代码如下：

Padding( //Main Padding
            padding: EdgeInsets.only(top: 14, bottom: 14),
            child: Flex(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              mainAxisSize: MainAxisSize.max,
              direction: Axis.horizontal,
              children: <Widget>[
                Expanded(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      ChipButton(text: 'Main Size', withIcon: false),
                      ChipButton(text: 'Others', withIcon: false),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 14, bottom: 14),
            child: Expanded(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  ChipButton(text: 'trademark', withIcon: false),
                ],
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 14, bottom: 14),
            child: Expanded(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  ChipButton(text: 'Price', withIcon: false),
                  ChipButton(text: 'Color', withIcon: false),
                ],
              ),
            ),
          ),

- Waleed Alrashed

Answer 1

尝试将下面的代码修改为你的应用程序：

Padding(
        padding: EdgeInsets.only(top: 14, bottom: 14),
        child: Column(children: <Widget>[
          Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Expanded(
                    child:
                        Container(color: Colors.amberAccent, child: Text("A"))),
                Expanded(
                    child:
                        Container(color: Colors.blueAccent, child: Text("B"))),
              ]),
          Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Expanded(
                  child: Container(color: Colors.grey, child: Text("C")),
                ),
              ]),
          Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Expanded(
                    child:
                        Container(color: Colors.redAccent, child: Text("D"))),
                Expanded(
                    child: Container(
                        color: Colors.orangeAccent, child: Text("E"))),
              ]),
        ]),
      ),

它会产生类似这样的结果：

你还可以在这里查看我所使用的DartPad代码，以便检查它是否适用于不同的宽度:D

P.S. 我真的很喜欢你提问的方式。

- Sidak

---

非常感谢，您的答案非常有帮助，而且效果很好。这是结果（https://snipboard.io/tH2ojs.jpg），我只是在每个容器周围添加了填充，现在看起来非常棒！ - Waleed Alrashed