Flutter:应用按钮组件-AppBar

xiaohai 2021-08-12 15:24:43 2315人围观 标签: Flutter 
简介应用按钮组件有AppBar和SliverAppBar,它们都是继承StatefulWidget,两者的区别时,AppBar时固定在应用的最顶部,而SliverAppBar可以随内容滚动的。

应用按钮组件有AppBar和SliverAppBar,它们都是继承StatefulWidget,两者的区别时,AppBar时固定在应用的最顶部,而SliverAppBar可以随内容滚动的。

它们常用的属性有:

  1. title:Widget类型,当前界面的标题文字
  2. centerTitle:bool类型,标题是否居中显示
  3. leading:Widget类型,在标题前面显示的组件,通常应用首页显示Logo,其他页面显示返回按钮
  4. actions:List类型:一个Widget列表,显示菜单,对于常用的菜单,我们一般使用IconButton,不常用的菜单就使用PopupMenuButton来显示三个点,点击后显示下级菜单
  5. bottom:AppBar下显示一个Tab导航栏,通常为[TabBar]。应用程序栏底部只能使用实现[PreferredSizeWidget]的小部件。
  6. elevation:double类型,AppBar下边部分的阴影面积
  7. textTheme:TextTheme类型,AppBar上的文字样式
  8. iconTheme:IconThemeData类型,AppBar上的图标颜色和样式
  9. brightness:Brightness类型,AppBar的亮度,有白色和黑色两种主题
  10. backgroundColor:Color类型,背景颜色
  11. flexibleSpace:Widget类型,一个显示在AppBar下方的组件,高度跟AppBar一样,可以实现一些特殊的效果,该属性通常在SliverAppBar中使用
AppBar的基本属性Demo
import 'package:flutter/material.dart';

class MaterialAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('风格组件AppBar'), //标题
        elevation: 0.0,
        centerTitle: true, //标题居中
        //设置左侧leading
        leading: IconButton(
          icon: Icon(Icons.chevron_left),
          onPressed: () {
            Navigator.pushNamed(context, "material_widget");
          },
        ),
        //设置actions
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () {},
          ),
        ],
        //设置背景颜色
        backgroundColor: Colors.yellow[500],
        //设置iconTheme
        iconTheme: IconThemeData(color: Colors.red),
        //设置TextTheme
        textTheme: TextTheme(
          headline6: TextStyle(
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}

图片alt