Flutter控件--AppBar

flutter控件練習demo地址：github

一 。AppBar、

1.1 簡介

AppBar 「應用欄」

• 應用欄由工具欄組成，或者是工具欄和其餘 widget 組合造成，例如 TabBar和FlexibleSpaceBar;
• 應用欄一般用於 Scaffold.appBar 屬性，該屬性將應用欄放置在屏幕頂部的固定高度小部件中;
• 對於可滾動的應用欄，請參閱SliverAppBar，它將AppBar嵌入 sliver 中以便在CustomScrollView中使用; """

1.2 基本用法

AppBar 主要屬性：

• leading：
  若是省略了 leading ，但 AppBar 在帶有 Drawer 的 Scaffold 中，則會插入一個 button 以打開 Drawer。若是沒有Drawer ， 默認的是個返回箭頭，能夠經過設置來關閉automaticallyImplyLeading 爲false ，
• automaticallyImplyLeading = true：
  若是有 leading 這個不會管用 ； 若是沒有leading ，當有側邊欄的時候， false：不會顯示默認的圖片，true 會顯示 默認圖片，並響應打開側邊欄的事件
• title: 標題
• actions,右邊的icon， 通常的是icon 或者是文字
• flexibleSpace, 在title上面的一個東西，通常無用
• bottom, 通常就是tabbar ， 也能夠是別的
• elevation, Z軸高度，也就是陰影 默認是1 默認就是有高度 陰影的
• backgroundColor,導航欄的顏色 默認是 ThemeData 的顏色
• brightness,狀態欄的深度 有白色和黑色兩種主題
• iconTheme,
• centerTitle, title是否居中
• titleSpacing flexibleSpace 和 title 的距離 默認是重合的
• NavigationToolbar.kMiddleSpacing,
• toolbarOpacity = 1.0 導航欄的透明度
• bottomOpacity = 1.0 bottom的透明度

1.3 圖片

1.4 demo

import 'package:flutter/material.dart';

class AppBarDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return AppBarForTabBarDemo();
  }
}

class AppBarForTabBarDemo extends State with SingleTickerProviderStateMixin {
  final List<Tab> _tabs = <Tab>[
    new Tab(text: '關注'),
    new Tab(text: '推按'),
    new Tab(text: '視頻'),
    new Tab(text: '遊戲'),
    new Tab(text: '音樂'),
    new Tab(text: '體育'),
    new Tab(text: '生活'),
    new Tab(text: '圖片'),
  ];
  var _tabController;

  @override
  void initState() {
    _tabController = TabController(vsync: this, length: _tabs.length);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      drawer: _drawer(context),
      body: new TabBarView(
        controller: _tabController,
        children: _tabs.map((Tab tab) {
          return new Center(child: new Text(tab.text));
        }).toList(),
      ),
      appBar: AppBar(
        leading: Icon(Icons.home),
        // 若是沒有設置這項， 二級頁面 會默認是返回箭頭  ， 有側邊欄的頁面默認有圖標（用來打開側邊欄）
        automaticallyImplyLeading: true,
        // 若是有 leading  這個不會管用 ； 若是沒有leading ，當有側邊欄的時候， false：不會顯示默認的圖片，true 會顯示 默認圖片，並響應打開側邊欄的事件
        title: Text("標題"),
        centerTitle: true,
        // 標題是否在居中
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.save),
              tooltip: 'Add Alarm',
              onPressed: () {
                // 不寫onPressed 默認，這個圖片不能點擊 且會有不可點擊的樣式（和 寫了這個有不一樣的樣式）
                // 若是有 onPressed 可是值是null 也會是不可點擊的樣式
              }),
          IconButton(
              icon: Icon(Icons.add_alarm),
              tooltip: 'Add Alarm',
              onPressed: () {
                // do nothing
              })
        ],
        bottom: TabBar(
          isScrollable: true,
          labelColor: Colors.redAccent,   // 選中的Widget顏色
          indicatorColor:Colors.redAccent, // 選中的指示器顏色
          labelStyle: new TextStyle(fontSize: 15.0),// 必須設置，設置 color 沒用的，由於 labelColor 已經設置了
          unselectedLabelColor: Colors.white,
          unselectedLabelStyle: new TextStyle(
              fontSize: 15.0), // 設置 color 沒用的，由於unselectedLabelColor已經設置了
          controller: _tabController,
          // tabbar 必須設置 controller 不然報錯
          indicatorSize: TabBarIndicatorSize.label,
          // 有 tab 和 label 兩種
          tabs: _tabs,
        ),
//          elevation: 0.1, // 導航欄Z軸的高度，默認是1  默認就是有高度 陰影的
//          backgroundColor: Colors.red,// 導航欄的顏色  默認是 ThemeData 的顏色
//         flexibleSpace: FlexibleSpaceBar(title: Text("你號"),),//這個堆疊在工具欄上面  通常 appbar不用  主要用在 SliverAppBar上
//          brightness: Brightness.light, //狀態欄的深度 有白色和黑色兩種主題
//          titleSpacing: 10,//flexibleSpace 和 title 的距離  默認是重合的
//          toolbarOpacity: 0.5,// 導航欄透明度 默認是1 ，不包括flexibleSpace
//          bottomOpacity: 0.5,
      ),
    );
  }
}

Drawer _drawer(BuildContext context) {
  return Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.lightBlueAccent,
          ),
          child: Center(
            child: SizedBox(
              width: 60.0,
              height: 60.0,
              child: CircleAvatar(
                child: Text('頭像'),
              ),
            ),
          ),
        ),
        ListTile(
          title: Text('Item 1'),
          leading: new CircleAvatar(
            child: new Icon(Icons.school),
          ),
          onTap: () {
            Navigator.pop(context);
          },
        ),
        ListTile(
          title: Text('Item 2'),
          leading: new CircleAvatar(
            child: new Text('B2'),
          ),
          onTap: () {
            Navigator.pop(context);
          },
        ),
        ListTile(
          title: Text('Item 3'),
          leading: new CircleAvatar(
            child: new Icon(Icons.list),
          ),
          onTap: () {
            Navigator.pop(context);
          },
        ),
      ],
    ),
  );
}

複製代碼