Flutter组件AppBar详解

1. 简介

AppBar是基于Material Design设计风格的应用栏，一般使用在Scaffold内部，作为顶部应用栏。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MaterialApp Title',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TestAppbarPage(),
    );
  }
}

class TestAppbarPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _StatefulWidgetState();
}

class _StatefulWidgetState extends State<TestAppbarPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TestAppBar'),
        centerTitle: true,
        backgroundColor: Colors.green,
        brightness: Brightness.dark,
//        automaticallyImplyLeading: false,
        leading: Icon(Icons.add),
      ),
      body: Text('123'),
    );
  }
}

2. 常用属性

• title：应用栏标题
• centerTitle：标题是否居中，默认为false
• backgroundColor：应用栏背景色，默认为MaterialApp主题色MaterialApp.theme. primarySwatch。
• brightness：亮度设置,主要影响手机自带的顶部小图标（电池、wifi、时间等）的颜色，可选Brightness.dark和Brightness.light。dark时，图标为白色；light时为黑色。默认为Brightness.dark。
• automaticallyImplyLeading：是否自动展示左侧的点击返回的箭头。默认为true。如果页面是从其他页面跳转过来的，appbar会自动在左侧显示一个返回的箭头，点击可返回上一页。如果将此参数设置为false，则可以隐藏此箭头。
• leading：设置应用栏左侧内容，可以为任意Widget。

未完待续