Flutter 之 MaterialBanner （九十七）

MaterialBanner 是一个常见的Material风格Banner

1. MaterialBanner

  const MaterialBanner({
    Key? key,
    required this.content,
    this.contentTextStyle,
    required this.actions,
    this.elevation,
    this.leading,
    this.backgroundColor,
    this.padding,
    this.leadingPadding,
    this.forceActionsBelow = false,
    this.overflowAlignment = OverflowBarAlignment.end,
    this.animation,
    this.onVisible
  })

MaterialBanner 属性	介绍
content	Banner 中间Content Widget
contentTextStyle	Banner 中间Content 样式 TextStyle
actions	List 显示在Banner底部或右边的一组Widget
elevation	阴影大小
leading	左侧Widget
backgroundColor	背景色
padding	内边距
leadingPadding	左侧Widget 内边距
forceActionsBelow	actions 是否在content下方显示 默认false
overflowAlignment	OverflowBar的对齐方式
animation	目前暂未用到
onVisible	Banner 显示回调

• overflowAlignment OverflowBar的对齐方式, 仅在actions不能一行显示时有效。默认 OverflowBarAlignment.end，OverflowBar 的children 可以一行显示时，类似于row，不能一行显示时，类似column

• forceActionsBelow 默认为false，如果为true，则actions将在content下方显示，如果为false，当只有一个action时，则在content右侧显示，如果action的个数大于1，则在content下方显示

2. 实例

class MSMaterialBannerRoute extends StatelessWidget {
  const MSMaterialBannerRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("MSMaterialBannerRoute")),
      body: SingleChildScrollView(
        child: Center(
          child: Builder(builder: (context) {
            return Column(
              children: [
                ElevatedButton(
                  onPressed: () {
                    ScaffoldMessenger.of(context)
                        .showMaterialBanner(_baseMaterialBanner1(context));
                  },
                  child: Text("MaterialBanner 1"),
                ),
                ElevatedButton(
                  onPressed: () {
                    ScaffoldMessenger.of(context)
                        .showMaterialBanner(_baseMaterialBanner2(context));
                  },
                  child: Text("MaterialBanner 2"),
                ),
              ],
            );
          }),
        ),
      ),
    );
  }

  MaterialBanner _baseMaterialBanner1(BuildContext context) {
    return MaterialBanner(
      content: Text(
          "MaterialBanner 是一个常见的Material风格Banner"), // Banner 中间Content Widget
      contentTextStyle: TextStyle(
          color: Colors.black54, fontSize: 16), // Banner 中间Content 样式 TextStyle
      elevation: 10, // 阴影大小
      leading: Icon(Icons.pets), // 左侧Widget
      padding: EdgeInsets.all(8), // 内边距
      leadingPadding: EdgeInsets.only(right: 10), // 左侧Widget 内边距
      backgroundColor: Colors.cyan[200], // 背景色
      // forceActionsBelow 默认为false，
      // 如果为true，则actions将在content下方显示，
      // 如果为false，当只有一个action时，则在content右侧显示，如果action的个数大于1，则在content下方显示
      forceActionsBelow: true,
      // OverflowBar的对齐方式，仅在actions不能一行显示时有效。默认 OverflowBarAlignment.end
      // OverflowBar 的children 可以一行显示时，类似于row，不能一行显示时，类似column
      overflowAlignment: OverflowBarAlignment.end,
      //animation: null, // 目前暂未用到
      // Banner 显示回调
      onVisible: () {
        print("onVisible");
      },
      actions: [
        TextButton(
          onPressed: () {
            context
                .findAncestorStateOfType()!
                .clearMaterialBanners();
          },
          child: Text("取消"),
        ),
        TextButton(
          onPressed: () {
            ScaffoldMessenger.of(context).clearMaterialBanners();
          },
          child: Text("确定"),
        ),
      ],
    );
  }

  MaterialBanner _baseMaterialBanner2(BuildContext context) {
    return MaterialBanner(
      content: Text(
          "Flutter是Google开源的构建用户界面（UI）工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。 [5]  Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。Flutter已推出稳定的2.0版本。"),
      backgroundColor: Colors.pink[200],
      contentTextStyle: TextStyle(color: Colors.teal, fontSize: 14),
      leading: Icon(Icons.pets),
      leadingPadding: EdgeInsets.only(right: 8),
      padding: EdgeInsets.all(8),
      overflowAlignment: OverflowBarAlignment.center,
      elevation: 10,
      actions: [
        TextButton(
          onPressed: () {
            ScaffoldMessenger.of(context).clearMaterialBanners();
          },
          child: Text("Cancel"),
        ),
        ElevatedButton(
          onPressed: () {
            ScaffoldMessenger.of(context).clearMaterialBanners();
          },
          child: Text("Action1"),
        ),
        ElevatedButton(
          onPressed: () {
            ScaffoldMessenger.of(context).clearMaterialBanners();
          },
          child: Text("Action2"),
        ),
        ElevatedButton(
          onPressed: () {
            ScaffoldMessenger.of(context).clearMaterialBanners();
          },
          child: Text("Action3"),
        ),
        ElevatedButton(
          onPressed: () {
            ScaffoldMessenger.of(context).clearMaterialBanners();
          },
          child: Text("Action3"),
        ),
      ],
    );
  }
}

image.png