Flutter 之 OverflowBar （九十八）

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>[],
  })

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