Flutter - 使用空容器填充？

徐建国

发布于 2021-08-03 15:12:25

7160

发布于 2021-08-03 15:12:25

文章被收录于专栏：个人路线个人路线

Flutter - 使用空容器填充？

我有一列从屏幕顶部延伸到底部，该列内有两行，每行有三个按钮。

调整这两行之间的垂直间距的最佳/正确方法是什么？

目前我正在使用带有空子容器的 Expanded 在列的子项之间添加间隙，因此页面顶部和第一行之间有 10% 的“间隙”，两行之间还有 10% 的“间隙”

这感觉不太对，我似乎仅限于 XX% 的填充量，我想尝试避免特定的像素量，因此无论屏幕大小如何，布局都保持一致

  Column(
    children: <Widget>[
      Expanded(flex: 1, child:Container()),
      Expanded(flex: 3, child:
          Row(children: <Widget>[
            Expanded(child: _navButton(Icons.person, "User", ()=>print("User"))),
            Expanded(child: _navButton(Icons.insert_drive_file, "Formulation", ()=>print("Formulation"),)),
            Expanded(child: _navButton(Icons.lightbulb_outline, "Devices", ()=>print("Devices"),)),
          ],)),
      Expanded(flex: 1, child:Container()),
      Expanded(flex: 3, child:
        Row(children: <Widget>[
          Expanded(flex: 3, child: _navButton(Icons.settings, "Settings", ()=>print("Settings"), iconColour: Colors.blueGrey)),
          Expanded(flex: 3, child: _navButton(Icons.camera_alt, "Photos", ()=>print("Photos"),)),
          Expanded(flex: 3, child: _navButton(Icons.cancel, "Exit", ()=>print("Exit"), iconColour: Colors.redAccent)),
        ],
      )),
    ],
  )

最佳答案

您可以使用 Expanded 代替 Spacer 。它与带有空 Expanded 的 Container 相同。

Row(
  children: <Widget>[
    Text('Begin'),
    Spacer(), // Defaults to a flex of one.
    Text('Middle'),
    // Gives twice the space between Middle and End than Begin and Middle.
    Spacer(flex: 2),
    Text('End'),
  ],
)

您还可以使用 SizedBox 在 DIP 中进行间距:

Row(
  children: <Widget>[
    Text('Begin'),
    const SizedBox(width: 42),
    Text('Middle'),
  ],
)

另一个是 Flexible ，它类似于 Expanded 但适用于最小/最大大小:

Row(
  children: <Widget>[
    Text('Begin'),
    Flexible(
      child: ConstrainedBox(constraints: const BoxConstraints(maxWidth: 100.0)),
    ),
    Text('Middle'),
  ],
)

关于Flutter - 使用空容器填充？，我在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54648516/

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-07-30，如有侵权请联系 cloudcommunity@tencent.com 删除

容器