Flutter的AppBar的多种使用方式

AppBar 的使用方式和参数解析

AppBar的使用结构

AppBar，相当于安卓里面的toolbar，只是flutter里面封装很细，各种组合下来，使用方式也不一样
第一种方式卡片栏切换：

DefaultTabController里面initialIndex 默认选中位置，length多个页面，AppBar中参数增加bottom：TabBar组件，TabBarView这几个

import 'package:demoflutter/utils/utlis.dart';
import 'package:flutter/material.dart';

class MinePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //DefaultTabController组件
    return DefaultTabController(
      //初始化选择页面
        initialIndex: 0,
        //多个页面
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            //是否Title居中
            centerTitle: true,
            //左边icon图标集合
            leading: IconButton(
                icon: Icon(Icons.arrow_back_ios),
                onPressed: () {
                  Utils.showToast(context, '返回键');
                }),
            //右边icon图标集合
            actions: [
              IconButton(
                  icon: Icon(Icons.map),
                  onPressed: () {
                    Utils.showToast(context, '啦啦1');
                  }),
              IconButton(
                  icon: Icon(Icons.stars),
                  onPressed: () {
                    Utils.showToast(context, '啦啦2');
                  })
            ],
            //title 标题
            title: Text('dsdasfas'),
            //底部tabbar
            bottom: TabBar(tabs: [
              Tab(text: 'PageA'),
              Tab(text: 'PageB'),
              Tab(text: 'PageC'),
            ]),
          ),
          //切换tab的view
          body: TabBarView(children: [
            TabBarB(),
            TabBarB(),
            TabBarB(),
          ]),
        ));
  }
}

class TabBarB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Text('sadfasdfds');
  }
}

第二方式：
效果图：

没有标题栏，点击tab进行切换页面
代码：

import 'package:demoflutter/utils/utlis.dart';
import 'package:flutter/material.dart';

class MinePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //DefaultTabController组件
    return DefaultTabController(
      //初始化选择页面
        initialIndex: 0,
        //多个页面
        length: 3,
        child: Scaffold(
          appBar: AppBar(
          
            //底部tabbar
            title: TabBar(tabs: [
              Tab(text: 'PageA'),
              Tab(text: 'PageB'),
              Tab(text: 'PageC'),
            ]),
          ),
          //切换tab的view
          body: TabBarView(children: [
            TabBarB(),
            TabBarB(),
            TabBarB(),
          ]),
        ));
  }
}

class TabBarB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Text('sadfasdfds');
  }
}

第三种方式：
效果图：

import 'package:demoflutter/utils/utlis.dart';
import 'package:flutter/material.dart';

class MinePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //DefaultTabController组件
    return DefaultTabController(
        //初始化选择页面
        initialIndex: 0,
        //多个页面
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            //底部tabbar
            title: Text(
              '发现',
              style: TextStyle(fontSize: 14, color: Colors.white),
            ),
            centerTitle: true,
            //背景颜色
            backgroundColor: Colors.orange,

            bottom: TabBar(
                //底部指示器颜色
                indicatorColor: Colors.red,
                //底部指示器高度
                indicatorWeight: 3.0,
                //选中颜色
                labelColor: Colors.red,
                //未选中颜色
                unselectedLabelColor: Colors.black,
                //选中样式
                labelStyle: TextStyle(fontSize: 16),
                //未选中样式
                unselectedLabelStyle: TextStyle(fontSize: 14),
                tabs: [
                  Tab(text: 'PageA'),
                  Tab(text: 'PageB'),
                  Tab(text: 'PageC'),
                ]),
          ),
          //切换tab的view
          body: TabBarView(children: [
            TabBarB(),
            TabBarB(),
            TabBarB(),
          ]),
        ));
  }
}

class TabBarB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Text('sadfasdfds');
  }
}

其实看起来第三种使用方式，我发现AppBar，不咋好用，第三种的使用方式应该是使用最全的，无法改变tabs背景颜色

参考：https://blog.csdn.net/ruoshui_t/article/details/92787714