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

文件结构：

内容承接：https://blog.csdn.net/u013227399/article/details/103787189

main.dart

import 'package:flutter/material.dart';
import 'routes/Routes.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, //去掉debug标
      initialRoute: '/', //初始化路由
      onGenerateRoute: onGenerateRoute,
    );
  }
}

routes.dart

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

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

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;
    }
  }
};

appBarDemo.dart

import 'package:flutter/material.dart';

class AppBarDemoPage extends StatelessWidget {
  const AppBarDemoPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text('AppBarDemoPage'),
          centerTitle: true,
          backgroundColor: Colors.red,
          //左侧按钮图标
          leading: IconButton(
            icon: Icon(Icons.menu),
            onPressed: (){

            },
          ),
          //右侧按钮图标
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
                print('search');
              },
            ),
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () {
                print('settings');
              },
            ),
          ],
          bottom: TabBar(
            tabs: <Widget>[
              Tab(text: '热门'),
              Tab(text: '推荐'),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Text('热门内容'),
            Text('推荐内容'),
          ],
        ),
      ),
    );
  }
}

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');
              },
            )
          ],
        ),
      );
  }
}

category.dart

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

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

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

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 8,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.black26,
          title: Row(
            children: <Widget>[
              Expanded(
                child: TabBar(
                  isScrollable: true, //如果多个按钮可以滑动
                  indicatorColor: Colors.yellow, //指示器颜色
                  labelColor: Colors.yellow, //指示器文字颜色
                  unselectedLabelColor: Colors.white, //未选中的指示器文字颜色
                  indicatorSize: TabBarIndicatorSize.label, //指示器长度
                  tabs: <Widget>[
                    Tab(text: '热销0'),
                    Tab(text: '热销1'),
                    Tab(text: '热销2'),
                    Tab(text: '热销3'),
                    Tab(text: '热销4'),
                    Tab(text: '热销5'),
                    Tab(text: '热销6'),
                    Tab(text: '热销7'),
                  ],
                ),
              )
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Text('热销内容0'),
            Text('热销内容1'),
            Text('热销内容2'),
            Text('热销内容3'),
            Text('热销内容4'),
            Text('热销内容5'),
            Text('热销内容6'),
            Text('热销内容7'),
          ],
        ),
      ),
    );
  }
}

效果展示：