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

Posted 2023-02-23

【中文标题】根据父窗口小部件的宽度和高度放置一个自动调整大小的窗口小部件

【英文标题】：Place an Auto-sized widgets based on the parent widget's Width and height

【发布时间】：2020-08-28 01:01:55

【问题描述】：

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

---

用例：将两个按钮放在同一个 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),
                ],
              ),
            ),
          ),

【参考方案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

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

【讨论】：

非常感谢，您的回答非常有帮助，而且做得很好，这就是结果 (snipboard.io/tH2ojs.jpg) 我刚刚在每个容器周围添加了一个填充物，它正在摇摆！跨度>