Flutter中AppBar组件详解

越陌度阡

发布于 2020-12-29 03:17:00

1.1K00

代码可运行

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

运行总次数：0

代码可运行

AppBar组件主要用于定义应用程序顶部区域，可以用来展示应用程序标题、搜索入口、下拉菜单、标签栏等信息。常用的属性如下所示：

1. leading 标题前置控件。在首页通常显示应用程序的Logo，其它页面通常显示为返回按钮；

2. title 页面标题。通常显示当前页面的标题文字，可以放组件；

3. actions 标题后置控件。通常使用IconButton来表示，可以放按钮组；

4. bottom 底部控件。通常用tabBar来表示放置Tab标签栏；

5. backgroundColor 导航背景颜色。值的类型为Colors；

6. iconTheme 图标样式。值的类型为IconThemeData；

7. textTheme 文字样式。值的类型为TextTheme；

8. centerTitle 标题是否居中显示。值的类型为bool；

代码示例：

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
    const HomePage({Key key}) : super(key: key);
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title:Text('Flutter App'),
                // 无论什么平台，标题都居中
                centerTitle: true,
                // 背景颜色
                backgroundColor: Colors.red,
                // 前置控件
                leading: IconButton(
                    icon:Icon(Icons.menu),
                    onPressed: (){

                    },
                ),
                // 后置控件
                actions: <Widget>[
                    // 按钮1
                    IconButton(
                        icon:Icon(Icons.search),
                        onPressed: (){

                        },
                    ),
                    // 按钮2
                    IconButton(
                        icon:Icon(Icons.settings),
                        onPressed: (){

                        },
                    )
                ],
            ),
            body:Center(
                child:Text('这是App主体')
            )
        );
    }
}