OverflowBar會將其子項排成一行，當其子項“溢出”可用的水平空間峻厚，OverflowBar會將其子項排成一列。
1. OverflowBar
OverflowBar({
Key? key,
this.spacing = 0.0,
this.alignment,
this.overflowSpacing = 0.0,
this.overflowAlignment = OverflowBarAlignment.start,
this.overflowDirection = VerticalDirection.down,
this.textDirection,
this.clipBehavior = Clip.none,
List<Widget> children = const <Widget>[],
})
| OverflowBar 屬性 | 介紹 |
|---|---|
| spacing | 未溢出時 水平方向 間距 |
| alignment | 未溢出時 水平方向 對齊方式 |
| overflowSpacing | 溢出時 垂直方向 間距 默認0 |
| overflowAlignment | 溢出時 垂直方向 對齊方式 默認OverflowBarAlignment.start |
| overflowDirection | 溢出時 垂直方向子組件的布局順序(是從上往下還是從右下往上) 默認 VerticalDirection.down, |
| textDirection | 未溢出時 水平方向子組件的布局順序(是從左往右還是從右往左) |
| clipBehavior | 超出時 裁剪方式 默認Clip.none |
| children | 子組件 |
2. 實例
class MSOverflowBarRoute extends StatelessWidget {
const MSOverflowBarRoute({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("MSOverflowBarRoute")),
body: Column(
children: [
OverflowBar(
alignment: MainAxisAlignment.end, // 未溢出時 水平方向 對齊方式
spacing: 20.0, // 未溢出時 水平方向 間距
textDirection: TextDirection.ltr, // 未溢出時 水平方向子組件的布局順序(是從左往右還是從右往左)
overflowSpacing: 20.0, // 溢出時 垂直方向 間距
overflowAlignment: OverflowBarAlignment.center, // 溢出時 垂直方向 對齊方式
overflowDirection:
VerticalDirection.down, // 溢出時 垂直方向子組件的布局順序(是從上往下還是從右下往上)
clipBehavior: Clip.hardEdge, // 超出時 裁剪方式
// 子組件
children: [
ElevatedButton(onPressed: () {}, child: Text("1XXXXXXXXXXX1")),
ElevatedButton(onPressed: () {}, child: Text("1YYYYYYYYYYY1")),
],
),
OverflowBar(
alignment: MainAxisAlignment.spaceAround, // 未溢出時 水平方向 對齊方式
spacing: 20.0, // 未溢出時 水平方向 間距
textDirection: TextDirection.rtl, // 未溢出時 水平方向子組件的布局順序(是從左往右還是從右往左)
overflowSpacing: 20.0, // 溢出時 垂直方向 間距
overflowAlignment: OverflowBarAlignment.center, // 溢出時 垂直方向 對齊方式
overflowDirection:
VerticalDirection.down, // 溢出時 垂直方向子組件的布局順序(是從上往下還是從右下往上)
clipBehavior: Clip.hardEdge, // 超出時 裁剪方式
// 子組件
children: [
ElevatedButton(onPressed: () {}, child: Text("2XXXXXXXXXXX2")),
ElevatedButton(onPressed: () {}, child: Text("2YYYYYYYYYYY2")),
],
),
OverflowBar(
alignment: MainAxisAlignment.end, // 未溢出時 水平方向 對齊方式
spacing: 20.0, // 未溢出時 水平方向 間距
textDirection: TextDirection.ltr, // 未溢出時 水平方向子組件的布局順序(是從左往右還是從右往左)
overflowSpacing: 10.0, // 溢出時 垂直方向 間距
overflowAlignment: OverflowBarAlignment.center, // 溢出時 垂直方向 對齊方式
overflowDirection:
VerticalDirection.down, // 溢出時 垂直方向子組件的布局順序(是從上往下還是從右下往上)
clipBehavior: Clip.none, // 超出時 裁剪方式
// 子組件
children: [
ElevatedButton(onPressed: () {}, child: Text("3XXXXXXXXXXX3")),
ElevatedButton(onPressed: () {}, child: Text("3YYYYYYYYYYY3")),
ElevatedButton(onPressed: () {}, child: Text("3ZZZZZZZZZZZ3")),
],
),
OverflowBar(
alignment: MainAxisAlignment.end, // 未溢出時 水平方向 對齊方式
spacing: 20.0, // 未溢出時 水平方向 間距
textDirection: TextDirection.ltr, // 未溢出時 水平方向子組件的布局順序(是從左往右還是從右往左)
overflowSpacing: 10.0, // 溢出時 垂直方向 間距
overflowAlignment: OverflowBarAlignment.end, // 溢出時 垂直方向 對齊方式
overflowDirection:
VerticalDirection.up, // 溢出時 垂直方向子組件的布局順序(是從上往下還是從右下往上)
clipBehavior: Clip.none, // 超出時 裁剪方式
// 子組件
children: [
ElevatedButton(onPressed: () {}, child: Text("4XXXXXXXXXXX4")),
ElevatedButton(onPressed: () {}, child: Text("4YYYYYYYYYYY4")),
ElevatedButton(onPressed: () {}, child: Text("4ZZZZZZZZZZZ4")),
],
),
],
),
);
}
}
image.png
