Flutter组件之AppBar

图解

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 左侧显示的图标通常首页显示的为应用logo 在其他页面为返回按钮
automaticallyImplyLeading 配合leading使用
title 标题文本
actions 右侧item
flexibleSpace 显示在 AppBar 下方的控件，高度和 AppBar 高度一样，可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用
bottom 一个 AppBarBottomWidget 对象，通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏
elevation 控件的 z 坐标顺序，默认值 4，对于可滚动的 SliverAppBar，当 SliverAppBar 和内容同级的时候，该值为 0，当内容滚动 SliverAppBar 变为 Toolbar 的时候，修改 elevation 的值。
shape
backgroundColor AppBar背景色
brightness AppBar亮度有黑白两种主题
iconTheme AppBar上图标的样式
actionsIconTheme AppBar上actions图标的样式
textTheme AppBar上文本样式
centerTitle 标题是否居中
titleSpacing 标题与其他控件的空隙
toolbarOpacity AppBar tool区域透明度
bottomOpacity bottom区域透明度

代码示例

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('发起群聊'),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("发起群聊");
                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: '发起群聊', 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