Flutter筆記（1）AppBar

AppBar

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 左上角的控件，通常放一個icon
        leading: IconButton(
          icon: Icon(
            Icons.apps,
            color: Colors.white,
          ),
          // 點擊事件
          onPressed: () {
            print('點擊了');
          },
        ),
        // 標題
        title: Text(
          'LOL戰績查詢',
        ),
        // 一系列的組件
        actions: <Widget>[
          IconButton(
            icon: Icon(
              Icons.search,
              color: Colors.white,
            ),
            // 點擊事件
            onPressed: () {
              print('點擊了');
            },
          ),
        ],
        // 此小組件堆疊在工具欄和標籤欄後面。它的高度與應用欄的總體高度相同
        flexibleSpace: Container(
          color: Colors.red,
        ),
        bottom: PreferredSize(
          child: Container(
            height: 50,
            width: double.infinity,
            color: Colors.grey,
            child: Text('bottom'),
          ),
          preferredSize: Size(30, 50),
        ),
        // 最下方陰影部分輻射範圍
        elevation: 4.0,
        // 背景顏色
        backgroundColor: Colors.teal,
        // 應用欄材質的亮度
        brightness: Brightness.dark,
        // 設置圖標樣式
        iconTheme: IconThemeData(
            //設置圖標樣式
            color: Colors.white,
            opacity: 1,
            size: 20.0),
        // 標題欄字體樣式
        textTheme: TextTheme(title: TextStyle(fontSize: 20.0)),
        // title是否顯示在中間
        centerTitle: true,
        // 配合leading使用，取決於automaticallyImplyLeading == true && leading ==null
        automaticallyImplyLeading: true,
        // 應用欄的工具欄部分透明度
        toolbarOpacity: 1,
        // 應用欄底部的不透明程度
        bottomOpacity: 1,
        // 此應用欄是否顯示在屏幕頂部。
        // 若是爲true，則appbar的工具欄元素和底部窗口小部件將在系統狀態欄的高度上填充。 flexibleSpace的佈局不受主要屬性的影響。
        primary: true,
        // 橫軸上標題內容 周圍的間距。即便沒有前導內容或操做，也會應用此間距。若是但願 title佔用全部可用空間，請將此值設置爲0.0
        titleSpacing: 0.0,
      ),
      body: HomeContent(),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('',
              style: TextStyle(
                  fontSize: 40.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.green)),
        ],
      ),
    );
  }
}