1. 基础布局小部件：
- Container： 用于包装和布局其他小部件，并提供对宽度、高度、边距、填充等的控制。
Container(
width: 200,
height: 200,
color: Colors.blue,
child: Text('Hello, Flutter!', style: TextStyle(color: Colors.white)),
)
- Row 和 Column： 用于水平（Row）和垂直（Column）排列子小部件。
Row(
children: [
Icon(Icons.star),
Icon(Icons.star),
Icon(Icons.star),
],
)
- ListView： 用于构建可滚动的列表。
ListView(
children: [
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
ListTile(title: Text('Item 3')),
],
)
2. Flex 布局：
- Expanded： 用于将子小部件扩展以填充可用空间。
Row(
children: [
Expanded(child: Container(color: Colors.red)),
Expanded(child: Container(color: Colors.green)),
],
)
- Flexible： 用于定义灵活的空间，允许子小部件根据可用空间进行伸缩。
Row(
children: [
Flexible(
flex: 2,
child: Container(color: Colors.blue),
),
Flexible(
flex: 1,
child: Container(color: Colors.green),
),
],
)
3. Stack 布局：
- Stack 和 Positioned： 允许子小部件堆叠在一起，可以自由定位。
Stack(
children: [
Container(color: Colors.blue),
Positioned(
top: 10,
left: 10,
child: Text('Hello, Stack!', style: TextStyle(color: Colors.white)),
),
],
)
4. Align 和 Center：
- Align： 允许子小部件在父部件中对齐。
Align(
alignment: Alignment.bottomRight,
child: Text('Hello, Align!'),
)
- Center： 将子小部件居中显示。
Center(
child: Text('Hello, Center!'),
)
5. 其他布局小部件：
- Padding： 用于为子小部件添加填充。
Padding(
padding: EdgeInsets.all(16.0),
child: Text('Hello, Padding!'),
)
- SizedBox： 用于指定固定尺寸的盒子。
SizedBox(
width: 100,
height: 100,
child: Container(color: Colors.blue),
)
这些布局方法和小部件可以组合和嵌套，以创建适应各种屏幕尺寸和设备的灵活用户界面。选择合适的布局方法取决于你的具体需求和设计目标。根据实际场景，你可能需要结合使用多种布局方法来构建复杂的布局结构。
转载请注明出处：http://www.zyzy.cn/article/detail/9591/Flutter