Flutter AppBar 自定義頂部導航按鈕 圖標、顏色 以及 TabBar 定義頂部 Tab 切換

Flutter AppBar 自定義頂部按鈕圖 標、顏色

屬性	描述
leading	在標題前面顯示的一個控件，在首頁通常顯示應用 的 logo;在其他界面通常顯示為返回按鈕
title	標題，通常顯示為當前界面的標題文字，可以放組 件
actions	通常使用 IconButton 來表示，可以放按鈕組
bottom	通常放 tabBar，標題下面顯示一個 Tab 導航欄
backgroundColor	導航背景顏色
iconTheme	圖標樣式
textTheme	文字樣式
centerTitle	標題是否居中顯示

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return 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');
            },
          )
        ],

      ),
      body: Text('內容'),
    );
  }
}

---

Flutter AppBar 中自定義 TabBar 實 現頂部 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

 

 

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,
           
            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")
                  )
                ],
              ),
               ListView(
                children: <Widget>[
                  ListTile(
                    title:Text("第二個tab")
                  ),
                  ListTile(
                    title:Text("第二個tab")
                  ),
                  ListTile(
                    title:Text("第二個tab")
                  )
                ],
              )
            ],
          ),
        ),
    );
  }
}

---

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(
                    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")
                  ),
                  ListTile(
                    title:Text("第一個tab")
                  ),
                  ListTile(
                    title:Text("第一個tab")
                  )
                ],
              ),
            ListView(
                children: <Widget>[
                  ListTile(
                    title:Text("第二個tab")
                  ),
                  ListTile(
                    title:Text("第二個tab")
                  ),
                  ListTile(
                    title:Text("第二個tab")
                  )
                ],
              ),
              ListView(
                children: <Widget>[
                  ListTile(
                    title:Text("第3個tab")
                  ),
                  ListTile(
                    title:Text("第3個tab")
                  ),
                  ListTile(
                    title:Text("第一個tab")
                  )
                ],
              ),
            ListView(
                children: <Widget>[
                  ListTile(
                    title:Text("第4個tab")
                  ),
                  ListTile(
                    title:Text("第二個tab")
                  ),
                  ListTile(
                    title:Text("第二個tab")
                  )
                ],
              )
          ],
        )
      ),
    );
  }
}

Flutter AppBar 中自定義 TabBar 實 現 Tabs 的另一種方法--TabController

 

import 'package:flutter/material.dart';

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

  _TabBarControllerPageState createState() => _TabBarControllerPageState();
}

class _TabBarControllerPageState extends State<TabBarControllerPage> with SingleTickerProviderStateMixin {

  TabController _tabController;

  @override
  void dispose() {   //生命周期函數
    // TODO: implement dispose
    super.dispose();
    _tabController.dispose();
  }

  @override
  void initState() {   //生命周期函數
    // TODO: implement 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>[
          Center(child: Text("熱銷")),
          Center(child: Text("推薦"))
          
        ],
      ),
    );
  }
}