Flutter基础组件07Appbar

Posted 卡卡西Sensei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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(如TabBarFlexibleSpaceBar)组成。

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 -- 基础组件AppBar 的使用

Flutter(11):基础组件之AppBar

Flutter之抽屉组件drawer,设置drawer宽度——Flutter基础系列

Flutter基础组件08BottomNavigationBar

Flutter基础组件08BottomNavigationBar

Flutter——AppBar组件(顶部导航组件)