Flutter Android Widget AppBar

Android Widget AppBar

梨花炖海棠

219人浏览 · 2023-06-01 09:38:21

梨花炖海棠 · 2023-06-01 09:38:21 发布

建议先将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"),
    );
  }
}