Flutter中的AppBar

  ⋅   :59  ⋅   :0  ⋅   Flutter

AppBar 和 SliverAppBar 都是继承至 StatefulWidget 类,都代表 Toobar,二则的区别在于 AppBar 位置的固定的应用最上面的;而 SliverAppBar 是可以跟随内容滚动的。他们的主要属性如下:

  • leading:在标题前面显示的一个控件,在首页通常显示应用的 logo;在其他界面通常显示为返回按钮
  • title: Toolbar 中主要内容,通常显示为当前界面的标题文字
  • actions:一个 Widget 列表,代表 Toolbar 中所显示的菜单,对于常用的菜单,通常使用 IconButton 来表示;对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点,点击后弹出二级菜单
  • bottom:一个 AppBarBottomWidget 对象,通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏
  • elevation:纸墨设计中控件的 z 坐标顺序,默认值为 4,对于可滚动的 SliverAppBar,当 SliverAppBar 和内容同级的时候,该值为 0, 当内容滚动 SliverAppBar 变为 Toolbar 的时候,修改 elevation 的值
  • flexibleSpace:一个显示在 AppBar 下方的控件,高度和 AppBar 高度一样,可以实现一些特殊的效果,该属性通常在 SliverAppBar 中使用
  • backgroundColor:APP bar 的颜色,默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用
  • brightness:App bar 的亮度,有白色和黑色两种主题,默认值为 ThemeData.primaryColorBrightness
  • iconTheme:App bar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme
  • textTheme: App bar 上的文字样式。默认值为 ThemeData.primaryTextTheme
  • centerTitle:true or false 标题是否居中显示,默认值根据不同的操作系统,显示方式不一样

下面一是一个简单的AppBar的练习demo:

import 'package:flutter/material.dart';

void main() => runApp(new MyAppBar());
//创建一个名为MyAppBar的类,无状态,用于页面的基本布局
class MyAppBar extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            title: 'My appBar',  //APP的名称
            theme: new ThemeData(
                primarySwatch: Colors.red  //定义 APP 的主题颜色
            ),
            home: new MyAppBarHome()  //APP的默认页
        );
    }
}
// 创建MyAppBarHome类, 这是 APP 的默认页,有状态的,因为我们做一些交互操作,必须有状态
class MyAppBarHome extends StatefulWidget{
    @override
    MyAppBarHomeState createState() => new MyAppBarHomeState();
}
// MyAppBarHome的状态类
class MyAppBarHomeState extends State<MyAppBarHome>{
    // Scaffold key 定义一个脚手架的key,相当于html中元素的id吧
    GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
    // @function 打开Drawer组件,下面要用到
    void _openDrawer(){
        _scaffoldKey.currentState.openEndDrawer(); // open the drawer
    }
    @override
    Widget build(BuildContext context) {
        return new Scaffold(
            key: _scaffoldKey,  //为脚手架设置key
            appBar: new AppBar(
                leading: new Icon(Icons.home),  //为appBar定义一个图标
                title: new Text('Flutter appBar widget'),  //appBar的标题
                centerTitle: true,  //appBar标题居中
                actions: <Widget>[   //向aciont中放了一个简单的图标按钮IconButton,它的方法(onPressed)为打开Drawer
                    new IconButton(
                        icon: new Icon(
                            Icons.menu,
                            color: Colors.white,
                        ),
                        onPressed: _openDrawer
                    )
                ],
            ),
            //一共有两种Drawer,一种是drawer,从app的左侧滑出,一种是endDrawer,从右侧滑出,我这里用的是从右侧出滑出的
            //drawer: new Drawer,
            endDrawer: new Drawer(
                child: new ListView(
                    children: <Widget>[
                        new ListTile(
                            title: new Text("欢迎"),
                        ),
                        new Divider(),
                        new ListTile(
                            title: new Text("设置"),
                            trailing: new Icon(Icons.settings),
                            onTap: () {}),
                    ],
                ),
            ),
            body: new Center(
                child: new Text(
                    '赵客缦胡缨,吴钩霜雪明',
                    style: new TextStyle(
                        fontSize: 24.0,
                        color: Colors.red
                    ),
                ),
            ),
            floatingActionButton: new FloatingActionButton(
                onPressed: null,
                tooltip: 'Increment',
                child: new Icon(Icons.add),
            ),
        );
    }
}

提示:如果appBar不设置leading并且使用了Drawer组件,Drawer会自动在appBar中添加一个按钮(Icons.menu)用来操作Drawer

APP 效果图:

标签:flutter dart appbar

如需评论,请填写表单。
换一个

记住我的信息