Flutter 自定义顶部导航栏（方法二）

文件结构：

routes.dart

import 'package:flutter/material.dart';
import '../pages/tabs.dart';
import '../pages/AppBarDemo.dart';
import '../pages/TabBarController.dart';

final routes = {
  '/': (context) => Tabs(),
  '/appBarDemo':(context)=>AppBarDemoPage(),
  '/tabBarController':(context)=>TabBarControllerPage(),
};

var onGenerateRoute=(RouteSettings settings){
  //统一处理
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
        builder: (context) =>
            pageContentBuilder(context, arguments: settings.arguments),
      );
      return route;
    } else {
      final Route route = MaterialPageRoute(
        builder: (context) => pageContentBuilder(context),
      );
      return route;
    }
  }
};

home.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('跳转到AppBar'),
              onPressed: (){
                Navigator.pushNamed(context, '/appBarDemo');
              },
            ),
            SizedBox(width: 20),
            RaisedButton(
              child: Text('TabController定义顶部tab切换'),
              onPressed: (){
                Navigator.pushNamed(context, '/tabBarController');
              },
            ),
          ],
        ),
      );
  }
}

tabBarController.dart

import 'package:flutter/material.dart';

class TabBarControllerPage extends StatefulWidget {
  TabBarControllerPage({Key key}) : super(key: key);

  @override
  _TabBarControllerPageState createState() => _TabBarControllerPageState();
}

class _TabBarControllerPageState extends State<TabBarControllerPage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void dispose() { //销毁是触发
    super.dispose();
    _tabController.dispose();
  }

  @override
  void initState() { //初始化
    super.initState();
    _tabController = new TabController(
      vsync: this,
      length: 2,
    );
    _tabController.addListener(() {
      print(_tabController.index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TabBarControllerPage'),
        bottom: TabBar(
          controller: this._tabController,
          tabs: <Widget>[
            Tab(text: '热销'),
            Tab(text: '推荐'),
          ],
        ),
      ),
      body: TabBarView(
        controller: this._tabController,
        children: <Widget>[
          Text('热销内容'),
          Text('推荐内容'),
        ],
      ),
    );
  }
}

效果展示：

Flutter 自定义顶部导航栏（方法二）

浏览过的版块