Flutter AppBar基本用法、TabBar基本用法、自定义TabBar

一、AppBar的基本配置

基本用法

隐藏左侧按钮

          appBar: AppBar(
            // automaticallyImplyLeading: false, // 隐藏左侧按钮
            leading: IconButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              icon: Icon(Icons.arrow_back_ios),
            ),
            title: Text('title'),
            centerTitle: true,
            actions: [
              IconButton(
                  onPressed: () {
                    print("这是一个Menu");
                  },
                  icon: Icon(Icons.menu)),
            ],
            backgroundColor: Colors.amber,
          ),

leading和actions 的图标需要是个按钮图标（IconButton）不然您的事件不好处理。
二、TabBar的基本用法
DefaultTabController 必须配置在 MaterialApp的里面Scaffold的外面，并且length 的长度必须与 TabBar的子集和TabBarView的子集保持一致。

DefaultTabController( // 必须配置
        length: 2, // ①  **②③的长度必须与①相同否则报错**
        child: Scaffold(
          appBar: AppBar(
            automaticallyImplyLeading: false,
            title: TabBar(
              tabs: [ // ②
                Tab(
                  text: "one",
                ),
                Tab(
                  text: 'two',
                )
              ],
            ),
          ),
          body: TabBarView(children: [ // ③
            Center(
              child: Text('OnePage'),
            ),
            Center(
              child: Text('TwoPage'),
            ),
          ]),
        ))

tabbar在title中

          // TabBar可以配置在bottom中
...
          appBar: AppBar(
            automaticallyImplyLeading: false,
            title: Text("头部"),
            centerTitle: true,
            bottom: TabBar(
              tabs: [
                Tab(
                  text: "one",
                ),
                Tab(
                  text: 'two',
                )
              ],
            ),
          ),
....

tabbar在bottom中

如果是多个Tab那么需要在TabBar添加属性
isScrollable: true,

三、自定义TabBarController

自定义TabBarController与TabBar的基本用法一样。只是增加的controller：这个参数。 如下图为注意点。

自定义TabBarController注意点

class _BaseTabControllerState extends State
    with SingleTickerProviderStateMixin { // ① 注意点
  late TabController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TabController(vsync: this, length: 2); // ②初始化
  }

  @override
  void dispose() {
    _controller.dispose(); // ③销毁
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: TabBar(
          controller: _controller,// ④加入TabBar
          tabs: [
            Tab(
              text: "one_controller",
            ),
            Tab(
              text: 'two_controller',
            )
          ],
        ),
      ),
      body: TabBarView(
        controller: _controller, // ⑤加入TabBarView
       children: [
        Container(
          margin: EdgeInsets.fromLTRB(5, 20, 0, 0),
          child: Text("OnePage_controller"),
        ),
        Container(
          child: Text('TwoPage_controller'),
        ),
      ]),
    );
  }
}

android studio快速生成TabBarController模板

1.在一个空页面输入sta回车

2.然后导入

import 'package:flutter/material.dart';

3.将

替换成

Demo地址