Flutter AppBar 简述

AppBar

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

在这里插入图片描述

一个AppBar 的基本组成

在这里插入图片描述

１只有标题无其他按钮

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

２显示标题和返回按钮

在这里插入图片描述

  /*** 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),);}

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

代码块封装

  /*** 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: () {}),]);

在这里插入图片描述

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

在这里插入图片描述

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/10129.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！