通过Flutter Spacer 灵活配置 Row/Column

使用FlutterSpacer调整Row/Column布局间距详解

最新推荐文章于 2025-06-28 18:46:58 发布

原创最新推荐文章于 2025-06-28 18:46:58 发布 · 352 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter Spacer #Flutter 开发

flutter 专栏收录该内容

220 篇文章

订阅专栏

本文详细介绍了Flutter中的FlutterSpacer组件，它能帮助开发者灵活地控制Row或Column中各元素间的间距。通过设置不同的flex值，可以实现不同比例的间距调整，例如在示例中，'Middle'和'End'之间的间距是'Begin'和'Middle'之间的两倍。这对于创建响应式和美观的用户界面至关重要。

通过Flutter Spacer 灵活配置 Row/Column

实际上内部封装了Expand组件，可能自动调整组件位置。

这个可以手动地调整每行或第列各个控制之间的距离

Row(
  children: const <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'),
  ],
)