【Flutter】基础组件【07】Appbar

本文详细介绍了Flutter中的AppBar组件,包括其基本属性如title、actions、bottom等,以及如何设置leading和actions的代码示例。通过示例展示了如何创建包含返回按钮、右侧面板按钮和TabBar的AppBar,帮助读者理解如何在Flutter应用中构建导航栏。
摘要由CSDN通过智能技术生成

1. 写在前面

上篇文章中介绍了Flutter中的Image组件,今天继续学习【Flutter】基础组件中的Appbar组件。

Flutter

  • 基础语法合集

【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"),
      ),

    );
  }


}
  • 运行效果

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

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

🌹 喜欢就点个赞吧👍🌹

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

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卡卡西Sensei

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值