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
  })

• 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<ScaffoldMessengerState>()!
                .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"),
        ),
      ],
    );
  }
}