Flutter基础组件07Appbar
Posted 卡卡西Sensei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flutter基础组件07Appbar相关的知识，希望对你有一定的参考价值。
1. 写在前面
在上篇文章中介绍了Flutter中的Image组件，今天继续学习【Flutter】基础组件中的Appbar组件。
- 【基础语法合集】
【Flutter】Dart中的var、final 和 const基本使用
【Flutter】Dart的数据类型list&Map(数组和字典)
【Flutter】Dart的方法中的可选参数、方法作为参数传递
【Flutter】Dart的工厂构造方法&单例对象&初始化列表
【Flutter】Dart中的Mixins混入你知道是什么吗？
- [基础组件合集]
2. Appbar
类似于我们ios里面的导航栏，可以设置title，左右action，
一个
Material Design应用程序栏，由工具栏和其他可能的widget（如TabBar和FlexibleSpaceBar）组成。
2.1 Appbar属性
- leading：左侧的action功能
- title：标题文字。
- actions ：右侧的action功能，也可以使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单，实现功能聚合。
- bottom：通常是 TabBar，Tab 导航栏。
- elevation： 控件的 z 坐标
- flexibleSpace：可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用，类似于android中的CollapsingToolbarLayout，可以轻松实现页面头部展开、合并的效果，这个组件后期会讲到。
- backgroundColor： Appbar 的颜色，改值通常和下面的三个属性一起使用。
- brightness： Appbar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness。
- iconTheme ：Appbar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme。
- textTheme：Appbar 上的文字样式。
- centerTitle：标题是否居中显示，默认值根据不同的操作系统，显示方式不一样。
- titleSpacing： 标题与其他控件的空隙
- toolbarOpacity： AppBar tool区域透明度
- bottomOpacity： bottom区域透明度
2.2 Appbar代码举例
- Appbar代码举例
void main()
runApp(const MyApp());
class MyApp extends StatelessWidget
const MyApp(Key? key) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context)
return const MaterialApp(
home: MyHomePage(),
);
class MyHomePage extends StatefulWidget
const MyHomePage(Key? key) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
class _MyHomePageState extends State<MyHomePage>
@override
Widget build(BuildContext context)
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("我是AppBar"),
),
);
- 运行效果
2.3 leading代码举例
- leading相当于返回按钮
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: ()
Navigator.pop(context);
),
2.4 actions代码举例
- actions 就是导航栏的右边👉按钮
actions: [
IconButton(
icon: Icon(Icons.add),
onPressed: ()
),
PopupMenuButton<String>(
padding: EdgeInsets.all(0),
itemBuilder: (context) => [
PopupMenuItem<String>(
child: Row(
children: [
Icon(
Icons.person_add,
color: Colors.black,
),
Text(
'添加好友',
style:
TextStyle(fontSize: 18,),
)
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
value: 'person_add',
),
PopupMenuItem<String>(
child: Row(
children: [
Icon(Icons.camera_alt, color: Colors.black),
Text(
'拍照',
style:
TextStyle(fontSize: 18,),
)
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
value: 'camera',
),
],
onSelected: (value)
switch (value)
case 'person_add':
print("点击了添加好友");
break;
case 'camera':
print("点击了拍照");
break;
,
),
]
- actions效果
2.5 bottom代码举例
- bottom就是导航栏下面的 tab,例如滑动栏那种
bottom: TabBar(
controller: _tabController,//必须配置
tabs: [
Tab(text: "页面A",),
Tab(text: "页面B",),
Tab(text: "页面C",)
],
),
),
body: TabBarView(
//必须配置
controller: _tabController,
children: [
Center(child:Text("页面A")),
Center(child:Text("页面B")),
Center(child:Text("页面C"))
],
)),
- 完整代码如下：
void main()
runApp(TabControllerStu());
class TabControllerStu extends StatefulWidget
TabControllerStu(Key? key) : super(key: key);
_TabControllerStuState createState() => _TabControllerStuState();
class _TabControllerStuState extends State<TabControllerStu> with SingleTickerProviderStateMixin
late TabController _tabController;
//销毁时调用
@override
void dispose()
super.dispose();
_tabController.dispose();
//初始化调用
@override
void initState()
super.initState();
_tabController = new TabController(length: 3, vsync: this);
_tabController.addListener(()
//点击tab回调一次，滑动切换tab不会回调
if(_tabController.indexIsChanging)
print("ysl--$_tabController.index");
//点击tab时或滑动tab回调一次
if(_tabController.index.toDouble() == _tabController.animation!.value)
print("ysl$_tabController.index");
);
@override
Widget build(BuildContext context)
return MaterialApp(
home: Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: ()
Navigator.pop(context);
),
title: Text("微信"),
actions: [
IconButton(
icon: Icon(Icons.add),
onPressed: ()
),
PopupMenuButton<String>(
padding: EdgeInsets.all(0),
itemBuilder: (context) => [
PopupMenuItem<String>(
child: Row(
children: [
Icon(
Icons.person_add,
color: Colors.black,
),
Text(
'添加好友',
style:
TextStyle(fontSize: 18,),
)
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
value: 'person_add',
),
PopupMenuItem<String>(
child: Row(
children: [
Icon(Icons.camera_alt, color: Colors.black),
Text(
'拍照',
style:
TextStyle(fontSize: 18,),
)
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
value: 'camera',
),
],
onSelected: (value)
switch (value)
case 'person_add':
print("点击了添加好友");
break;
case 'camera':
print("点击了拍照");
break;
,
),
],
bottom: TabBar(
controller: _tabController,//必须配置
tabs: [
Tab(text: "页面A",),
Tab(text: "页面B",),
Tab(text: "页面C",)
],
),
),
body: TabBarView(
//必须配置
controller: _tabController,
children: [
Center(child:Text("页面A")),
Center(child:Text("页面B")),
Center(child:Text("页面C"))
],
)),
);
- 运行效果
3. 写在后面
关注我，更多内容持续输出
🌹 喜欢就点个赞吧👍🌹
🌹 觉得有收获的，可以来一波 收藏+关注，以免你下次找不到我😁🌹
🌹欢迎大家留言交流，批评指正，
转发请注明出处，谢谢支持！🌹
以上是关于Flutter基础组件07Appbar的主要内容，如果未能解决你的问题，请参考以下文章
Flutter之抽屉组件drawer,设置drawer宽度——Flutter基础系列
Flutter基础组件08BottomNavigationBar