flutter-＞appBar配置和顶部导航栏

 注意: 
       appBar:PreferredSize(child: ,preferredSize: Size.fromHeight(50),)//设置appBar高度
       bottom内的controller 和 body内的controller必须配置
       bottom内的tabs数量 和 body内的TabBarView:children 数量必须一致
       


       @override //生命周期函数:当组件初始化的时候执行
       void initState() {
            super.initState();
            _tabController = TabController(length: 4, vsync: this);
        }

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
        title: 'contaniner',
        home: HomePage(),
        debugShowCheckedModeBanner: false);
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

//with 混入mixins
class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
 
  TabController? _tabController;

  @override //生命周期函数:当组件初始化的时候执行
  void initState() {
    super.initState();
    setState(() {
      // 将参数赋予存储点击数的变量
      _tabController = TabController(length: 4, vsync: this);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Center(child: Text('flutter bar')),
        leading: IconButton(
          iconSize: 22,
          onPressed: () => print("我是图标按钮1"),
          icon: Icon(Icons.ac_unit), //设置图标
          color: Colors.red, //设置按钮颜色
          splashColor: Colors.yellow, //设置水波纹
          highlightColor: Colors.purple, //设置高亮的颜色
          tooltip: '我是提示信息', //提示信息
        ),
        actions: const [
          Icon(Icons.search, color: Colors.white),
          Icon(Icons.more_horiz, color: Colors.white),
        ],
        //配置顶部导航栏
        bottom: TabBar(
          // isScrollable: true,//是否可以滑动
          controller: _tabController, //配置controller
          indicatorWeight: 5,//配置指示器高度
          indicatorPadding: const EdgeInsets.all(5), //配置指示器底部padding
          indicatorColor: Colors.green,//配置底部指示器颜色 和indicator 冲突
          indicator: const BoxDecoration( 
            color: Colors.red //该颜色配置后indicatorColor不生效
          ),
          indicatorSize: TabBarIndicatorSize.tab, //TabBarIndicatorSize.tab:指示器和tab等宽,  TabBarIndicatorSize.label:指示器和文字等宽(默认)
          //如果配置已选中,未选中没有配置则样式通用
          labelColor: Colors.yellow,  //选中文字颜色 该颜色配置优先于labelStyle内的颜色配置
          labelStyle: const TextStyle(color: Colors.green,fontSize: 22), //配置选中tab样式
          labelPadding: EdgeInsets.all(10), //配置选中tabpadding值
          unselectedLabelColor: Colors.white, //配置未选中tab的颜色
          unselectedLabelStyle: const TextStyle(color: Colors.green,fontSize: 12), //配置未选中tab的样式
          tabs: const [
            Tab(child: Text("测试1")),
            Tab(child: Text("测试2")),
            Tab(child: Text("测试3")),
            Tab(child: Text("测试4")),
          ],
        ),
        backgroundColor: Colors.cyan[800],
        elevation: 0.0,
        centerTitle: true,
      ),
      //带索引的集合循环
      body: TabBarView(
        controller: _tabController,
        children: const [
          HomeWidgetOne(),
          HomeWidgetTwo(),
          HomeWidgetThree(),
          HomeWidgetFour(),
        ],
      ),
    );
  }
}

class HomeWidgetOne extends StatelessWidget {
  const HomeWidgetOne({super.key});

  @override
  Widget build(BuildContext context) {
    // return const Text('我是首页数据', style: TextStyle(color: Colors.red));
    return ListView(
        children: List.generate(
      20,
      (index) => ListTile(
        leading: Icon(Icons.access_alarm, size: 30),
        title: Text('第一页$index'),
        subtitle: Text('第一页子标题$index'),
        selected: index == 1,
        selectedColor: Colors.green,
        trailing: Icon(Icons.keyboard_arrow_right),
      ),
    ));
  }
}

class HomeWidgetTwo extends StatelessWidget {
  const HomeWidgetTwo({super.key});

  @override
  Widget build(BuildContext context) {
    // return const Text('我是首页数据', style: TextStyle(color: Colors.red));
    return ListView(
        children: List.generate(
      20,
      (index) => ListTile(
        leading: Icon(Icons.access_alarm, size: 30),
        title: Text('第二页$index'),
        subtitle: Text('第二页面子标题$index'),
        selected: index == 1,
        selectedColor: Colors.green,
        trailing: Icon(Icons.keyboard_arrow_right),
      ),
    ));
  }
}

class HomeWidgetThree extends StatelessWidget {
  const HomeWidgetThree({super.key});

  @override
  Widget build(BuildContext context) {
    // return const Text('我是首页数据', style: TextStyle(color: Colors.red));
    return ListView(
        children: List.generate(
      20,
      (index) => ListTile(
        leading: Icon(Icons.access_alarm, size: 30),
        title: Text('第三页测试$index'),
        subtitle: Text('第三页子标题$index'),
        selected: index == 1,
        selectedColor: Colors.green,
        trailing: Icon(Icons.keyboard_arrow_right),
      ),
    ));
  }
}

class HomeWidgetFour extends StatelessWidget {
  const HomeWidgetFour({super.key});

  @override
  Widget build(BuildContext context) {
    // return const Text('我是首页数据', style: TextStyle(color: Colors.red));
    return ListView(
        children: List.generate(
      20,
      (index) => ListTile(
        leading: Icon(Icons.access_alarm, size: 30),
        title: Text('第四页测试$index'),
        subtitle: Text('第四页子标题$index'),
        selected: index == 1,
        selectedColor: Colors.green,
        trailing: Icon(Icons.keyboard_arrow_right),
      ),
    ));
  }
}