【Flutter】基础组件【07】Appbar
2021-11-28 本文已影响0人
俊而不逊
1. 写在前面
在上篇文章中介绍了Flutter中的Image组件，今天继续学习【Flutter】基础组件中的Appbar组件。
flutter.jpeg
- 【基础语法合集】
【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"),
),
);
}
}
- 运行效果
image.png
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效果
image.png
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"))
],
)),
);
}
}
- 运行效果
image.png
3. 写在后面
关注我，更多内容持续输出
🌹 喜欢就点个赞吧👍🌹
🌹 觉得有收获的，可以来一波 收藏+关注，以免你下次找不到我😁🌹
🌹欢迎大家留言交流，批评指正，
转发请注明出处，谢谢支持！🌹
