Flutter 自定义顶部导航按钮和TabBar定义顶部 Tab 切换

1.Flutter AppBar 自定义顶部按钮图标、颜色

return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        leading: IconButton(
            icon: Icon(Icons.menu), tooltip: "Search", onPressed: () {
          print('menu Pressed');
        }
        ), title: Text('FlutterDemo'), actions: <Widget>[
        IconButton(
            icon: Icon(Icons.search), tooltip: "Search", onPressed: () {
          print('Search Pressed');
        }
        ), IconButton(
            icon: Icon(Icons.more_horiz), tooltip: "more_horiz", onPressed: () {
          print('more_horiz Pressed');
        }
        )
      ],), body: Text('这是 Appbar'),);

2.AppBar 中自定义 TabBar 实现顶部 Tab 切换，并把把 TabBar 放在导航最顶部

    return DefaultTabController(
        length: 2,  //列数
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.tealAccent,
            title: Row(
              children: [
                Expanded(
                  child: TabBar(
                    isScrollable: true,//多个菜单可以滑动
                    indicatorColor: Colors.red,
                    labelColor: Colors.cyan,//选中颜色
                    unselectedLabelColor: Colors.white,//未选中颜色
                    indicatorSize: TabBarIndicatorSize.label,
                    tabs: [
                      Tab(
                        text: '热销',
                      ),
                      Tab(
                        text: '推荐',
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
          body: TabBarView(
            children: [
              ListView(
                children: [
                  ListTile(
                    title: Text('第一个Tab'),
                  ),
                ],
              ),
              ListView(
                children: [
                  ListTile(
                    title: Text('第er个Tab'),
                  ),
                ],
              ),
            ],
          ),
        ));

3.AppBar 中自定义 TabBar 实现 Tabs 的另一种方法

定义TapBar和上面的方法差不多，唯一要注意的就是_tabController

import 'package:flutter/material.dart';

class TapBarContollerPage extends StatefulWidget {
  //AppBardemoPage({Key key}) : super(key: key);

  _TapBarContollerPageState createState() => _TapBarContollerPageState();
}

class _TapBarContollerPageState extends State<TapBarContollerPage>
    with SingleTickerProviderStateMixin {  //还要继承SingleTickerProviderStateMixin
  late TabController _tabController;

  @override
  void dispose() {   //生命周期函数（销毁）
    _tabController.dispose();
    super.dispose();
  }

  void initState() {   //生命周期函数
    super.initState();
    _tabController = new TabController(
        vsync: this,  //固定写法
        length: 3   //长度
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('顶部 tab 切换'),
        bottom: new TabBar(
          tabs: <Widget>[
            new Tab(
              icon: new Icon(Icons.directions_bike),
            ),
            new Tab(
              icon: new Icon(Icons.directions_boat),
            ),
            new Tab(
              icon: new Icon(Icons.directions_bus),
            ),
          ],
          controller: _tabController,  //注意
        ),
      ),
      body: new TabBarView(
        controller: _tabController,   //注意
        children: <Widget>[
          new Center(child: new Text('自行车')),
          new Center(child: new Text('船')),
          new Center(child: new Text('巴士')),
        ],
      ),
    );
  }
}

这篇好文章是转载于：学新通技术网