前端入门Flutter--16 自定义AppBar 定义顶部Tab切换 底部Tab结合顶部Tab实现类似头条页面布局

　天有风云不测，树有叶生枯败。近日博客园更新调整，发布也只能私人查看。。。

　越是学到后期与上一章的关系越大，所以本次的内容是奖励在上一个章节的基础上开展的。为了满足ui与产品的需求，我们必须要学会自定义appbar、定义Tab顶部。

    项目目录：

   

　　main.drat

import 'package:flutter/material.dart';
import 'pages/Tabs.dart';
// import 'pages/Seacrh.dart';
// import 'pages/Form.dart';
import 'routes/Routes.dart';

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

class MyApp extends StatelessWidget{
  // final routes = {
  //   '/search':(context,{arguments})=>SearchPage(arguments:arguments),
  //   '/form':(context,{arguments})=>FormPage(arguments:arguments),
  // };

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // home:Tabs(),
    //   routes: {
    // '/form':(context)=>FormPage(),
    // '/search':(context)=>SearchPage(),
    //   },
      debugShowCheckedModeBanner: false,//去掉debug图标
      initialRoute:'/',//初始化的时候加载的路由
      onGenerateRoute: onGenerateRoute,
    );
  }
}

　　Routes.dart

　　

import 'package:flutter/material.dart';
import '../pages/Tabs.dart';
import '../pages/Form.dart';
import '../pages/Seacrh.dart';
import '../pages/Product.dart';
import '../pages/ProductInfo.dart';
import '../pages/AppBarDemo.dart';

//配置路由
final routes = {
  '/':(context)=>Tabs(),
  '/search':(context,{arguments})=>SearchPage(arguments:arguments),
  '/product':(context)=>ProductPage(),
  '/productInfo':(context,{arguments})=>ProductInfoPage(arguments:arguments),
  '/form':(context,{arguments})=>FormPage(arguments:arguments),
  '/appBar':(context)=>AppBarDemoPage(),
};

//固定写法
var onGenerateRoute = (RouteSettings settings){
  final String name = settings.name;
  print(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;
    }
  }else{
    return null;
  }
};

Tabs.dart

import 'package:flutter/material.dart';
// import 'package:flutter_app1/AspectRation%E3%80%81Card%E5%8D%A1%E7%89%87%E7%BB%84%E4%BB%B6.dart';
// import 'package:flutter_app1/BottomNavigationBar%E8%87%AA%E5%AE%9A%E4%B9%89%E5%BA%95%E9%83%A8%E5%AF%BC%E8%88%AA%E6%9D%A1%E4%BB%A5%E5%8F%8A%E5%AE%9E%E7%8E%B0%E9%A1%B5%E9%9D%A2%E5%88%87%E6%8D%A2%E4%BB%A5%E5%8F%8A%E6%A8%A1%E5%9D%97%E5%8C%96/pages/tabs/Category.dart';
// import 'package:flutter_app1/BottomNavigationBar%E8%87%AA%E5%AE%9A%E4%B9%89%E5%BA%95%E9%83%A8%E5%AF%BC%E8%88%AA%E6%9D%A1%E4%BB%A5%E5%8F%8A%E5%AE%9E%E7%8E%B0%E9%A1%B5%E9%9D%A2%E5%88%87%E6%8D%A2%E4%BB%A5%E5%8F%8A%E6%A8%A1%E5%9D%97%E5%8C%96/pages/tabs/Setting.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';

class Tabs extends StatefulWidget{
  final index;
  Tabs({Key key,this.index=0}) : super(key: key);
  _TabsState createState()=>_TabsState(this.index);
}
class _TabsState extends State<Tabs>{
  int _currentIndex;
  _TabsState(index){
    this._currentIndex = index;
  }
  List _pageList=[
    HomePage(),
    CategoryPage(),
    SettingPage()
  ];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Demo"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,
        onTap:(int index){
        //    print(index);
          setState(() {
            this._currentIndex = index;
          });
        },
        iconSize: 36.0,
        type: BottomNavigationBarType.fixed,
        fixedColor: Colors.red,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('首页')),
          BottomNavigationBarItem(icon: Icon(Icons.category),title: Text('分类')),
          BottomNavigationBarItem(icon: Icon(Icons.settings),title: Text('设置'))
        ],
      ),
      body: this._pageList[this._currentIndex],
    );
  }
}

Home.dart

import 'package:flutter/material.dart';
import '../Seacrh.dart';

class HomePage extends StatelessWidget{
  const HomePage({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
            child: Text('跳转到搜索页面'),
            onPressed:() {
            //  页面跳转
            //  1、普通路由跳转
            //   Navigator.of(context).push(
            //    MaterialPageRoute(
            //      builder: (context)=>SearchPage()
            //    )
            //   );
            //  2、命名路由跳转
              Navigator.pushNamed(context, '/search',arguments:{"id":13576765});
            },
          color: Theme.of(context).accentColor,
          textTheme: ButtonTextTheme.primary
        ),
        RaisedButton(
          child: Text('跳转到商品页面'),
    onPressed: (){
      Navigator.pushNamed(context, '/product');
    },
          color: Theme.of(context).accentColor,
          textTheme: ButtonTextTheme.primary,
        ),
        //
        RaisedButton(
          child: Text('跳转到appBar'),
          onPressed: (){
            Navigator.pushNamed(context, '/appBar');
          },
          color: Theme.of(context).accentColor,
          textTheme: ButtonTextTheme.primary,
        )
      ],
    );
  }
}

　Home.dart界面：　

　　AppBarDemo.dart

import 'package:flutter/material.dart';

class AppBarDemoPage extends StatelessWidget {
  const AppBarDemoPage({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
        length: 2,
        child: Scaffold(
            appBar: AppBar(
              title: Text("AppBarDemoPage"),
              centerTitle: true,
              actions: <Widget>[
                IconButton(icon: Icon(Icons.menu), onPressed: null)
              ],
              bottom: TabBar(tabs: <Widget>[Tab(text: "热门"), Tab(text: "推荐")]),
            ),
            body: TabBarView(children: <Widget>[
              ListView(children: <Widget>[
                ListTile(
                  title: Text("第一个Tab"),
                ),
                ListTile(
                  title: Text("第一个Tab"),
                ),
                ListTile(
                  title: Text("第一个Tab"),
                ),
                ListTile(
                  title: Text("第一个Tab"),
                ),
                ListTile(
                  title: Text("第一个Tab"),
                ),
                ListTile(title: Text("第一个Tab"))
              ]),
              ListView(children: <Widget>[
                ListTile(
                  title: Text("第2个Tab"),
                ),
                ListTile(
                  title: Text("第2个Tab"),
                ),
                ListTile(
                  title: Text("第2个Tab"),
                ),
                ListTile(
                  title: Text("第2个Tab"),
                ),
                ListTile(
                  title: Text("第2个Tab"),
                ),
                ListTile(title: Text("第2个Tab"))
              ]),
            ])));
  }
}

appbar界面：