Flutter--自定義頂部導航欄、(TabBar)TabLayout

appbar屬性

屬性	釋義
leading	導航按鈕顯示的圖標
title	標題
actions	相當於menu
bottom	通常用來放置tabBar
backgroundColor	導航背景顏色
iconTheme	圖表樣式
textTheme	文字樣式
centerTitle	標題是否居中顯示

自定義AppBar使用

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

TabBar（TabLayout）

屬性

屬性	釋義
tabs	顯示標籤內容
controller	TabController對象
isScrollable	是否可滾動,即是否在一個屏幕放下所有Tab
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: 4, // tab個數
      child: Scaffold(
        // Tab組件必須放到Scaffold中
        appBar: AppBar(
            title: Text("TabBarDemo"),
            bottom: TabBar(
              tabs: <Widget>[
                Tab(
                  text: "熱點",
                ),
                Tab(
                  text: "新聞",
                ),
                Tab(
                  text: "推薦",
                ),
                Tab(
                  text: "同城",
                )
              ],
            )),
        body: TabBarView(
          // 類似ViewPage
          children: <Widget>[
            ListView(
              children: <Widget>[
                ListTile(title: Text("這是第1個 tab")),
                ListTile(title: Text("這是第1個 tab")),
                ListTile(title: Text("這是第1個 tab"))
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(title: Text("這是第2個 tab")),
                ListTile(title: Text("這是第2個 tab")),
                ListTile(title: Text("這是第2個 tab"))
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(title: Text("這是第3個 tab")),
                ListTile(title: Text("這是第3個 tab")),
                ListTile(title: Text("這是第3個 tab"))
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(title: Text("這是第4個 tab")),
                ListTile(title: Text("這是第4個 tab")),
                ListTile(title: Text("這是第4個 tab"))
              ],
            ),
          ],
        ),
      ),
    );
  }
}

存在Bottomnavigation的頁面創建TabLayout

import 'package:flutter/material.dart';

class SystemPage extends StatefulWidget {
  SystemPage({Key key}) : super(key: key);
  _SystemPageState createState() => _SystemPageState();
}

class _SystemPageState extends State<SystemPage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold( // 外部佈局已經存在Scaffold,此時內部還可以再嵌套一個Scaffold
        appBar: AppBar( // 此時我們在同一個頁面創建了兩個appbar，所以直接在title中創建tab即可
            title: TabBar(
          tabs: <Widget>[
            Tab(
              text: "熱點",
            ),
            Tab(
              text: "新聞",
            ),
            Tab(
              text: "推薦",
            ),
            Tab(
              text: "同城",
            )
          ],
        )),
        body: TabBarView(
          // 類似ViewPage
          children: <Widget>[
            ListView(
              children: <Widget>[
                ListTile(title: Text("這是第1個 tab")),
                ListTile(title: Text("這是第1個 tab")),
                ListTile(title: Text("這是第1個 tab"))
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(title: Text("這是第2個 tab")),
                ListTile(title: Text("這是第2個 tab")),
                ListTile(title: Text("這是第2個 tab"))
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(title: Text("這是第3個 tab")),
                ListTile(title: Text("這是第3個 tab")),
                ListTile(title: Text("這是第3個 tab"))
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(title: Text("這是第4個 tab")),
                ListTile(title: Text("這是第4個 tab")),
                ListTile(title: Text("這是第4個 tab"))
              ],
            ),
          ],
        ),
      ),
    );
  }
}

通過TabController實現TabLayout

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;


   // 生命週期函數，銷燬時取消訂閱，類似Rx
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  // 生命週期函數， 加載即觸發
  @override
  void initState() {
    super.initState();
    _tabController = new TabController(
        vsync: this,
        length: 3);
    // 接受監聽
    _tabController.addListener((){
      print(_tabController.index);
    });
  }


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('頂部 tab 切換'),
        bottom: new TabBar(
          controller: _tabController, // 使用TabbarController必須加，相當於設置監聽
          tabs: <Widget>[
            Tab(
              text: "熱點",
            ),
            Tab(
              text: "新聞",
            ),
            Tab(
              text: "推薦",
            ),
          ],
        ),
      ),
      body: new TabBarView(
        controller: _tabController,
        children: <Widget>[
          new Center(child: new Text('熱點')),
          new Center(child: new Text('新聞')),
          new Center(child: new Text('推薦')),
        ],
      ),
    );
  }
}

• 以上示例均在前篇路由配置基礎上進行配置