Flutter Android Widget AppBar

建议先将Flutter官方文档过一遍，本系列教程 Flutter SDK >= 3.10.0

一、配置项

字段	属性	描述
key	Key	当组件在组件树中移动时使用Key可以保持组件之前状态
leading	Widget	通常情况下返回一个返回键（IconButton)
leadingWidth	double	左侧leading的宽度，默认56
automaticallyImplyLeading	bool	和leading配合使用，如果为true并且leading为空的情况下，会自动配置返回键
title	Widget	导航栏的标题
centerTitle	bool	标题是否居中，不同操作系统默认显示位置不一样
actions	List	一个Widget列表
bottom	PreferredSizeWidget	出现在导航栏底部的控件
elevation	double	控制导航栏下方阴影的大小
shadowColor	Color	控制导航栏下方阴影的颜色
shape	ShapeBorder	导航栏的形状以及阴影
backgroundColor	Color	导航栏的背景颜色
foregroundColor	Color	导航栏中文本和图标的颜色
backwardsCompatibility	bool	与foregroundColor配合使用
iconTheme	IconThemeData	导航栏图标的颜色、透明度、大小的配置
actionsIconTheme	IconThemeData	导航栏右侧图标的颜色、透明度、大小的配置
textTheme	TextTheme	导航栏文本的排版样式
primary	bool	导航栏是否显示在屏幕顶部
excludeHeaderSemantics	bool	标题是否应该用 [Semantics] 包裹，默认false
titleSpacing	double	title内容的间距
toolbarOpacity	double	导航栏的透明度
bottomOpacity	double	导航栏底部的透明度
toolbarHeight	double	导航栏的高度，默认kToolbarHeight
toolbarTextStyle	TextStyle	导航栏图标的颜色
titleTextStyle	TextStyle	导航栏标题的默认颜色
flexibleSpace	Widget	堆叠在工具栏和选项卡栏的后面
systemOverlayStyle	SystemUiOverlayStyle	叠加层的样式(StatusBar)
brightness	Brightness	导航栏的亮度，改属性已废弃，用systemOverlayStyle代替

标红的是几个常用的配置

二、实现一个自定义的AppBar

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:lhdht_flutter_app/components/bottom_navigation/entrance.dart';

class HomePageEntrance extends StatelessWidget {
  const HomePageEntrance({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("首页", style: TextStyle(
          color: Colors.black,
        ),),
        systemOverlayStyle: const SystemUiOverlayStyle(
          statusBarIconBrightness: Brightness.dark, // 这里是设置StatusBar的Theme(light、dark)
        ),
        backgroundColor: Colors.transparent, // 这里不设置透明的化，从其他页面跳转过来的话会闪烁一下
        elevation: 0, // 底部阴影

        flexibleSpace: const Image(
          image: AssetImage('lib/assets/images/light_background.jpg'),
          fit: BoxFit.cover,
        ),
      ),
      body: const Center(
        child: Text("home page"),
      ),
      bottomNavigationBar: EntranceBottomNavigation(page: "/home"),
    );
  }
}