圖解

AppBar圖解.png

AppBar常用屬性

AppBar({
    Key key,
    this.leading,
    this.automaticallyImplyLeading = true,
    this.title,
    this.actions,
    this.flexibleSpace,
    this.bottom,
    this.elevation,
    this.shape,
    this.backgroundColor,
    this.brightness,
    this.iconTheme,
    this.actionsIconTheme,
    this.textTheme,
    this.primary = true,
    this.centerTitle,
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    this.toolbarOpacity = 1.0,
    this.bottomOpacity = 1.0,
  })

• leading 左側(cè)顯示的圖標(biāo) 通常首頁(yè)顯示的為應(yīng)用logo 在其他頁(yè)面為返回按鈕
• automaticallyImplyLeading 配合leading使用
• title 標(biāo)題文本
• actions 右側(cè)item
• flexibleSpace 顯示在 AppBar 下方的控件爷耀，高度和 AppBar 高度一樣闸氮，可以實(shí)現(xiàn)一些特殊的效果嗜历，該屬性通常在 SliverAppBar 中使用
• bottom 一個(gè) AppBarBottomWidget 對(duì)象滑潘，通常是 TabBar腥光。用來(lái)在 Toolbar 標(biāo)題下面顯示一個(gè) Tab 導(dǎo)航欄
• elevation 控件的 z 坐標(biāo)順序枫弟，默認(rèn)值 4，對(duì)于可滾動(dòng)的 SliverAppBar洽腺，當(dāng) SliverAppBar 和內(nèi)容同級(jí)的時(shí)候脚粟，該值為 0， 當(dāng)內(nèi)容滾動(dòng) SliverAppBar 變?yōu)?Toolbar 的時(shí)候蘸朋，修改 elevation 的值核无。
• shape
• backgroundColor AppBar背景色
• brightness AppBar亮度 有黑白兩種主題
• iconTheme AppBar上圖標(biāo)的樣式
• actionsIconTheme AppBar上actions圖標(biāo)的樣式
• textTheme AppBar上文本樣式
• centerTitle 標(biāo)題是否居中
• titleSpacing 標(biāo)題與其他控件的空隙
• toolbarOpacity AppBar tool區(qū)域透明度
• bottomOpacity bottom區(qū)域透明度

代碼示例

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

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

class BasicAppBarSample extends StatefulWidget {
  @override
  _BasicAppBarSample createState() => _BasicAppBarSample();
}

class _BasicAppBarSample extends State<BasicAppBarSample> {
  Choice _selectedChoice = choices[0];

  void _select(Choice choice) {
    setState(() {
      _selectedChoice = choice;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          leading: Icon(Icons.home),
          automaticallyImplyLeading: true,
          title: Text('AppBar'),
          centerTitle: true,
          brightness: Brightness.dark,
          titleSpacing: NavigationToolbar.kMiddleSpacing,
          toolbarOpacity: 1.0,
            bottomOpacity: 1.0,
            primary: true,
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              tooltip: "搜索",
              onPressed: () {
                print("搜索");
              },
            ),
            /**
                PopupMenuButton<String>(
                itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                PopupMenuItem<String>(child: Text('發(fā)起群聊'),value: 'chat',),
                PopupMenuItem<String>(child: Text('添加朋友'),value: 'add',),
                PopupMenuItem<String>(child: Text('掃一掃'),value: 'scan',),
                PopupMenuItem<String>(child: Text('收付款'),value: 'pay',),
                ],
                onSelected: (String action){
                switch(action){
                case "chat":
                print("發(fā)起群聊");
                break;
                case "add":
                print("添加朋友");
                break;
                case "scan":
                print("掃一掃");
                break;
                case "pay":
                print("收付款");
                break;
                }
                },
                ),
             */
            PopupMenuButton<Choice>(
              onSelected: _select,
              itemBuilder: (BuildContext context) {
                return choices.map<PopupMenuItem<Choice>>((Choice choice) {
                  return PopupMenuItem<Choice>(
                    value: choice,
                    child: PopupMenuItemCard(
                      choice: Choice(title: choice.title, icon: choice.icon),
                    ),
                  );
                }).toList();
              },
            ),
          ],
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: ChoiceCard(choice: _selectedChoice),
        ),
      ),
    );
  }
}

class Choice {
  const Choice({this.title, this.icon});

  final String title;
  final IconData icon;
}

const List<Choice> choices = <Choice>[
  Choice(title: '發(fā)起群聊', icon: Icons.chat),
  Choice(title: '添加朋友', icon: Icons.add_call),
  Choice(title: '掃一掃', icon: Icons.scanner),
  Choice(title: '收付款', icon: Icons.payment),
];

class PopupMenuItemCard extends StatelessWidget {
  const PopupMenuItemCard({Key key, this.choice}) : super(key: key);

  final Choice choice;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final TextStyle textStyle = Theme.of(context).textTheme.headline;

     return  Row(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Icon(choice.icon, size: 20.0, color: textStyle.color),
          Container(
            padding: const EdgeInsets.only(left: 15.0),
            child: Text(choice.title, style: TextStyle(fontSize: 18)),
          )

        ],
      );
  }
}

class ChoiceCard extends StatelessWidget {
  const ChoiceCard({Key key, this.choice}) : super(key: key);

  final Choice choice;

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.headline;
    return Card(
      color: Colors.white,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Icon(choice.icon, size: 128.0, color: textStyle.color,),
            Text(choice.title, style: textStyle),
          ],
        ),
      ),
    );
  }
}

demo效果

AppBar效果圖1.png

AppBar效果圖2.png