浏览 54
扫码
布局是 Flutter 中非常重要的一个概念,它决定了 UI 中各个组件的位置和大小。在 Flutter 中,布局 Widget 是通过 Widget 树来实现的,通过嵌套不同的布局 Widget,可以实现各种复杂的 UI 布局。
以下是一些常用的布局 Widget:
- Column:垂直排列子 Widget
Column(
children: <Widget>[
Text('Widget 1'),
Text('Widget 2'),
Text('Widget 3'),
],
)
- Row:水平排列子 Widget
Row(
children: <Widget>[
Text('Widget 1'),
Text('Widget 2'),
Text('Widget 3'),
],
)
- Stack:层叠排列子 Widget
Stack(
children: <Widget>[
Positioned(
top: 10.0,
left: 10.0,
child: Text('Widget 1'),
),
Positioned(
top: 50.0,
left: 50.0,
child: Text('Widget 2'),
),
],
)
- Container:容器 Widget,可以设置宽高、边距、背景色等
Container(
width: 100.0,
height: 100.0,
margin: EdgeInsets.all(10.0),
padding: EdgeInsets.all(10.0),
color: Colors.blue,
child: Text('Container Widget'),
)
- SingleChildScrollView:滚动视图,当子 Widget 超出屏幕范围时可以滚动查看
SingleChildScrollView(
child: Column(
children: <Widget>[
// 大量的子 Widget
],
),
)
以上是几种常用的布局 Widget,通过组合这些 Widget,可以实现丰富多样的 UI 布局效果。希望对你有帮助!