Flutter（十五）：TabBar 顶部

1 内页实现 TabBar

import 'package:flutter/material.dart';

class FormPage extends StatefulWidget {
  final Map arguments;
  // FormPage({this.arguments});
  FormPage({Key key, this.arguments}) : super(key: key);
  // print(arguments);
  @override
  _FormPageState createState() => _FormPageState(arguments: this.arguments);
}

class _FormPageState extends State<FormPage> {
  final Map arguments;
  _FormPageState({this.arguments});

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        floatingActionButton: FloatingActionButton(
          child: Text('返回'),
          onPressed: () {
            // Navigator.pop(context);
            Navigator.of(context).pop();
          },
        ),
        appBar: AppBar(
          title: Text("Form 表单"),
          bottom: TabBar(
            tabs: <Widget>[
              Tab(text: '推荐'),
              Tab(text: '最新'),
            ],
          ),
          // title: Text("详情${(args as Map)['id']}"),
        ),
        body: TabBarView(
          children: <Widget>[
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text('diyigezuixin  推荐'),
                ),
                ListTile(
                  title: Text('diyigezuixin  推荐'),
                ),
              ],
            ),
            Container(
              child: Text('zuixidddd'),
            )
          ],
        ),
      ),
      //   body: Container(
      //     child: Column(
      //       children: <Widget>[
      //         Text("我是一个表单页面 ${arguments != null ? arguments['id'] : '0'}"),
      //         SizedBox(height: 30),
      //       ],
      //     ),
      //   ),
      // ),
    );
  }
}

效果

2 主页实现 TabBar

import 'package:flutter/material.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: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Row(
            // 由于外部还有一个 Scaffold，所以 TabBar 不能放在 bottom，会出现一个空白的 title
            children: <Widget>[
              Expanded(
                child: TabBar(
                  tabs: <Widget>[
                    Tab(text: '推荐'),
                    Tab(text: '最新'),
                  ],
                ),
              ),
            ],
          ),
          // bottom: TabBar(
          //   tabs: <Widget>[
          //     Tab(text: '推荐'),
          //     Tab(text: '最新'),
          //   ],
          // ),
        ),
        body: TabBarView(
          children: <Widget>[
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text('diyigezuixin  推荐'),
                ),
                ListTile(
                  title: Text('diyigezuixin  推荐'),
                ),
              ],
            ),
            Container(
              child: Text('zuixidddd'),
            )
          ],
        ),
      ),
    );
  }
}

效果

可以根据需求，把外部的 Scaffold 的 appBar 去掉，如下：

import 'package:flutter/material.dart';

import 'package:app03/pages/home/HomePage.dart';
import 'package:app03/pages/category/CategoryPage.dart';
import 'package:app03/pages/settings/SettingsPage.dart';

class TabsPage extends StatefulWidget {
  final int index;
  TabsPage({Key key, this.index = 0}) : super(key: key);
  @override
  _TabsPageState createState() => _TabsPageState(this.index);
}

class _TabsPageState extends State<TabsPage> {
  int currentIndex = 0;

  _TabsPageState(index) {
    this.currentIndex = index;
  }

  List listTabs = [
    HomePage(),
    CategoryPage(),
    SettingsPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   // title: Text('flutter 标题'),
      //   centerTitle: true,
      //   backgroundColor: Colors.pink,
      //   leading: IconButton(
      //     icon: Icon(Icons.menu),
      //     onPressed: () {
      //       print('menu');
      //     },
      //   ),
      //   actions: <Widget>[
      //     IconButton(
      //       icon: Icon(Icons.search),
      //       onPressed: () {
      //         print('search');
      //       },
      //     ),
      //     IconButton(
      //       icon: Icon(Icons.settings),
      //       onPressed: () {
      //         print('settings');
      //       },
      //     )
      //   ],
      // ),
      body: this.listTabs[this.currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this.currentIndex,
        iconSize: 30.0,
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          setState(() {
            this.currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('首页'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            title: Text('分类'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text('设置'),
          ),
        ],
      ),
    );
  }
}

效果

3 自定义Tabbar背景颜色和文字颜色

import 'package:flutter/material.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: 2,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.black26,
          title: Row(
            // 由于外部还有一个 Scaffold，所以 TabBar 不能放在 bottom，会出现一个空白的 title
            children: <Widget>[
              Expanded(
                child: TabBar(
                  // isScrollable: true, // 如果有多个 tab，实现滚动切换
                  indicatorColor: Colors.blue,
                  labelColor: Colors.blue,
                  unselectedLabelColor: Colors.white,
                  indicatorSize: TabBarIndicatorSize.label,
                  tabs: <Widget>[
                    Tab(text: '推荐'),
                    Tab(text: '最新'),
                  ],
                ),
              ),
            ],
          ),
          // bottom: TabBar(
          //   tabs: <Widget>[
          //     Tab(text: '推荐'),
          //     Tab(text: '最新'),
          //   ],
          // ),
        ),
        body: TabBarView(
          children: <Widget>[
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text('diyigezuixin  推荐'),
                ),
                ListTile(
                  title: Text('diyigezuixin  推荐'),
                ),
              ],
            ),
            Container(
              child: Text('zuixidddd'),
            )
          ],
        ),
      ),
    );
  }
}

效果