AppBar中自定義頂部導航

在上一篇里總結AppBar的一些簡單用法，但是AppBar除了有前面那些樣式屬性外，還能實現類似底部的Tab切換。

首先下載並運行前面的項目：

然后在此基礎上實現Tab切換。

常見屬性

TabBar有一下常見的屬性：

• tabs ：顯示的標簽內容，一般使用 Tab 對象,也可以是其他的 Widget 
• controller ：TabController 對象 
• isScrollable ：是否可滾動 
• indicatorColor ：指示器顏色 
• indicatorWeight ：指示器高度 
• indicatorPadding ：底部指示器的 Padding 
• indicator ：指示器 decoration，例如邊框等 
• indicatorSize ：指示器大小計算方式，TabBarIndicatorSize.label 跟文字等寬,TabBarIndicatorSize.tab 跟每個 tab 等寬 
• labelColor ：選中 label 顏色 
• labelStyle ：選中 label 的 Style 
• labelPadding ：每個 label 的 padding 值 
• unselectedLabelColor ：未選中 label 顏色 
• unselectedLabelStyle ：未選中 label 的 Style 

基本實現

為了實現頂部的Tabs切換，首先需要在Scaffold的外層定義一個DefaultTabController組件，然后組件里面定義tab的個數，最后將TabBar定義在AppBar里面的bottom屬性中。根據這些，我們來修改前面的

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"), 
          // backgroundColor: Colors.red, 
          centerTitle:true,
          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');
              },
            )
          ],
          bottom: TabBar(
            tabs: <Widget>[
              Tab(text: "熱門"),
              Tab(text: "推薦")
            ],
          ),
        ),
        body: Text('1111'),
      ),
    );
  }
}

為了簡化代碼，刪掉前面關於AppBar的屬性設置：

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,
          bottom: TabBar(
            tabs: <Widget>[
              Tab(text: "熱門"),
              Tab(text: "推薦")
            ],
          ),
        ),
        body: Text('1111'),
      ),
    );
  }
}

現在，只有跳轉的按鈕，卻沒有對應的頁面組件，所以，還需要在body里面添加tabs切換的頁面。

 

目前，是在一個新的頁面添加了頂部Tabs切換，那么，如果需要在底部TabBar頁面基礎上添加Tabs切換，又該如何操作呢？

TabBar中添加頂部Tab切換

 按照前面說的，在Scaffold的外層定義一個DefaultTabController組件，先這樣修改Category.dart頁面：

import 'package:flutter/material.dart';

class CategoryPage extends StatefulWidget {
  CategoryPage({Key key}) : super(key: key);
  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        appBar: AppBar(
          bottom:TabBar(
            tabs: <Widget>[
              Tab(text: "熱銷"),
              Tab(text: "推薦"),
              Tab(text: "推薦"),
              Tab(text: "推薦")
            ],
          ) ,
        ),
        body:TabBarView(
          children: <Widget>[
            ListView(
                children: <Widget>[
                  ListTile(title:Text("第一個tab")),
                ],
              ),
            ListView(
                children: <Widget>[
                  ListTile(title:Text("第二個tab")),
                ],
              ),
              ListView(
                children: <Widget>[
                  ListTile(title:Text("第三個tab")),
                ],
              ),
            ListView(
                children: <Widget>[
                  ListTile(title:Text("第四個tab")),
                ],
              )
          ],
        )
      ),
    );
  }
}

 因為Category.dart是掛載到Tabs.dart中的，而在Tabs.dart中，已經有一個Scaffold組件和AppBar組件了，所以，繼續添加頂部Tabs以后，就會有兩個Scaffold組件和AppBar組件。

 

 為了解決上面的問題，只需要將Tabs切換換個位置，移動到title所在的位置就可以了：

import 'package:flutter/material.dart';

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

  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.black26,
          title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            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: "推薦"),
                    Tab(text: "推薦"),
                    Tab(text: "推薦")
                  ],
                ) ,
              )
            ],
          ),
          
        ),
        body:TabBarView(
          children: <Widget>[
            ListView(
                children: <Widget>[
                  ListTile(title:Text("第一個tab")),
                ],
              ),
            ListView(
                children: <Widget>[
                  ListTile(title:Text("第二個tab")),
                ],
              ),
              ListView(
                children: <Widget>[
                  ListTile(title:Text("第三個tab")),
                ],
              ),
            ListView(
                children: <Widget>[
                  ListTile(title:Text("第四個tab")),
                ],
              )
          ],
        )
      ),
    );
  }
}

 

 代碼下載： 點這里（提取碼：vcb5）