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