Flutter AppBar 简述
  TEZNKK3IfmPf 2023年11月12日 50 0

AppBar 显示在app的顶部,或者说 顶端栏,对应着 Android 的 Toolbar。如下图:

Flutter AppBar 简述

一个AppBar 的基本组成

Flutter AppBar 简述


1 只有标题 无其他按钮

  Widget buildDefaultBar(String title) {
   return appBar =  AppBar(
      //标题居中显示
      centerTitle: true,
      //返回按钮占位
      leading: Container(),
      //标题显示
      title: Text(title),
    );
  }

2 显示标题和返回按钮

Flutter AppBar 简述

  /**
   * title appBar 显示的标题文字
   * backIcon  appBar 显示的返回键图标
   */
  Widget buildBackBar(String title,{backIcon=Icons.arrow_back_ios}) {
    return appBar =AppBar(
      centerTitle: true,
      //在标题前面显示的一个控件,在首页通常显示应用的 logo;在其他界面通常显示为返回按钮
      leading: IconButton(
          icon: Icon(backIcon),
          onPressed: () {
            Navigator.pop(context);
          }),
      //Toolbar 中主要内容,通常显示为当前界面的标题文字
      title: Text(title),
    );
  }

3 显示标题和返回按钮和右侧的分享按钮

代码块封装

  /**
   * title appBar 显示的标题文字
   * backIcon  appBar 显示的返回键图标
   * actions  appBar 最右侧的图标集合
   */
  Widget buildBackAndOtherBar(String title,{backIcon=Icons.arrow_back_ios,List<Widget> actions}) {
    return appBar =AppBar(
      centerTitle: true,
      //在标题前面显示的一个控件,在首页通常显示应用的 logo;在其他界面通常显示为返回按钮
      leading: IconButton(
          icon: Icon(backIcon),
          onPressed: () {
            Navigator.pop(context);
          }),
      //Toolbar 中主要内容,通常显示为当前界面的标题文字
      title: Text(title),
      //标题右侧显示的按钮组
      actions:actions,
    );
  }

显示标题和返回按钮和右侧的分享按钮

 buildBackAndOtherBar("测试3", actions: <Widget>[
                IconButton(icon: Icon(Icons.share), onPressed: () {}),
              ]);

Flutter AppBar 简述

#### 显示标题和返回按钮和右侧的分享按钮+弹出框

Flutter AppBar 简述
Flutter AppBar 简述

buildBackAndOtherBar("测试2", actions: <Widget>[
                IconButton(icon: Icon(Icons.share), onPressed: () {}),
                PopupMenuButton(
                  itemBuilder: (BuildContext context) =>
                      <PopupMenuItem<String>>[
                    PopupMenuItem<String>(
                      child: Text("热度"),
                      value: "hot",
                    ),
                    PopupMenuItem<String>(
                      child: Text("最新"),
                      value: "new",
                    ),
                  ],
                  onSelected: (String action) {
                    switch (action) {
                      case "hot":
                        print("hot");
                        break;
                      case "new":
                        print("new");
                        break;
                    }
                  },
                  onCanceled: () {
                    print("onCanceled");
                  },
                )
              ]);
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月12日 0

暂无评论

TEZNKK3IfmPf