SizedBox
SizedBox是Flutter中的一个小部件(widget),用于创建具有指定尺寸的空白框。它通常用于调整和控制布局中的间距、大小和位置。
SizedBox具有以下常用属性:
width:指定SizedBox的宽度。
height:指定SizedBox的高度。
child:指定SizedBox中包含的子部件。
使用SizedBox,您可以通过设置宽度和高度来调整部件的大小。如果您只想调整一个维度(宽度或高度),可以将另一个维度设置为null或忽略它。
以下是一个示例,演示如何使用SizedBox调整部件的大小:
Copy code Container( color: Colors.blue, child: SizedBox( width: 200, height: 100, child: Text( 'Hello, SizedBox!', style: TextStyle(color: Colors.white, fontSize: 24), ), ), )
在上面的示例中,我们创建了一个蓝色的Container,并在其中使用SizedBox设置宽度为200和高度为100。SizedBox的子部件是一个文本部件,显示为白色,字体大小为24。
通过调整SizedBox的宽度和高度属性,您可以根据需要调整部件的大小,并将其用于布局和间距的控制。
Divider
Flutter 中也有 Divider 组件,用于构建分隔线。它的主要属性有:
height: 分隔线的高度,默认 1px。
thickness: 分隔线的粗细,默认 1px。
color: 分隔线的颜色,默认当前主题的 dividerColor。
indent: 分隔线左边的缩进,默认 0。
endIndent: 分隔线右边的缩进,默认 0。
使用 Divider 的基本方式有:
1.水平分割线
dart
Divider(
height: 30,
color: Colors.red,
)
2.垂直分割线
dart
Divider(
thickness: 30,
color: Colors.red,
indent: 20,
endIndent: 20,
)
3.在列表项之间添加分割线
dart
ListTile(title: Text(‘Item 1’)),
Divider(),
ListTile(title: Text(‘Item 2’)),
4.嵌套在 Container 中,并添加 padding
Container( color: Colors.grey, child: Padding( padding: EdgeInsets.all(10.0), child: Divider( color: Colors.red, ), ) )
Flutter 的 Divider 组件用法很简单,属性也比较少,但是可以满足大多数分隔线场景的需求