根据父窗口小部件的宽度和高度放置一个自动调整大小的窗口小部件

Question

目标：根据父小部件的约束实现自动调整大小的小部件

---

用例：将两个按钮放在同一个 Row 上，但可以适应多种屏幕尺寸（响应式）

问题：我有两个按钮（每个都包裹在 column 小部件中），它们都包裹在 Row 小部件中。

总结：（父->子）：行> [列-列]

如下图所示。

---

尝试过的解决方案：我尝试将小部件放置在扩展小部件内，该小部件放置在 Flex 小部件内

Padding > 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),
                ],
              ),
            ),
          ),

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"))),
              ]),
        ]),
      ),

它会产生这样的东西：

你还可以查看我在here 上工作的 DartPad 代码，以防你想检查它是否适用于不同的宽度：D

附：我真的很喜欢你提出问题的方式。