在上篇文章中介绍了Flutter中的Image组件，今天继续学习【Flutter】基础组件中的Appbar组件。
【Flutter】Dart中的var、final 和 const基本使用
【Flutter】Dart数据类型之num
【Flutter】Dart数据类型之String
【Flutter】Dart的数据类型list&Map(数组和字典)
【Flutter】Dart的方法与箭头函数
【Flutter】Dart的方法中的可选参数、方法作为参数传递
【Flutter】Dart中的匿名函数、闭包
【Flutter】Dart中的类和对象
【Flutter】Dart中的构造函数
【Flutter】Dart的工厂构造方法&单例对象&初始化列表
【Flutter】Dart的类方法和对象 *** 作符
【Flutter】Dart中的继承
【Flutter】Dart中的抽象类和接口
【Flutter】Dart中的Mixins混入你知道是什么吗？
[基础组件合集]【Flutter】基础组件【01】Text
【Flutter】基础组件【02】Container
【Flutter】基础组件【03】Scaffold
【Flutter】基础组件【04】Row/Column
【Flutter】基础组件【05】Icon
【Flutter】基础组件【06】Image
2. Appbar类似于我们iOS里面的导航栏，可以设置title，左右action，
2.1 Appbar属性 leading：左侧的action功能title：标题文字。actions ：右侧的action功能，也可以使用 PopupMenuButton 来显示为三个点，点击后d出二级菜单，实现功能聚合。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代码举例一个
Material Design应用程序栏，由工具栏和其他可能的widget（如TabBar和FlexibleSpaceBar）组成。
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"),
),
);
}
}
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
}),
actions: [
IconButton(
icon: Icon(Icons.add),
onPressed: () {
}),
PopupMenuButton(
padding: EdgeInsets.all(0),
itemBuilder: (context) => [
PopupMenuItem(
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(
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"))
],
)),
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"))
],
)),
);
}
}
CSDN掘金简书关注我，更多内容持续输出
🌹 喜欢就点个赞吧👍🌹
🌹 觉得有收获的，可以来一波 收藏+关注，以免你下次找不到我😁🌹
🌹欢迎大家留言交流，批评指正，
转发请注明出处，谢谢支持！🌹
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）