Flutter（11）：基础组件之AppBar

Posted 2023-04-17

参考技术A 类似于安卓里面的ToolBar，可以设置title，左右action，右边可以实现action聚合，底部可以防止tabBar，大概结构如下：

这个默认情况下都是返回键，如果设置了策划栏就是变为打开侧滑栏，当然也可以自定义一个按钮

这个可以放普通的widget也可应使用 PopupMenuButton 来显示为三个点做功能聚合，比如我们按一个关注按钮跟一个更多按钮，更多里面是邮件、搜索功能

这个一般是用来实现tanBar的，关于tabBar的详细使用会在后面的文章单独在介绍

下一节基础组件之FlutterLogo、Placeholder

Flutter基础组件07Appbar

1. 写在前面

在上篇文章中介绍了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，

一个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. 写在后面

关注我，更多内容持续输出

• CSDN
• 掘金
• 简书

🌹 喜欢就点个赞吧👍🌹

🌹 觉得有收获的，可以来一波 收藏+关注，以免你下次找不到我😁🌹

🌹欢迎大家留言交流，批评指正，转发请注明出处，谢谢支持！🌹