Flutter组件--AppBar相关属性

news2025/11/9 11:38:40

AppBar介绍

 

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

为什么需要AppBar

1、因为导航栏里面一般由左侧功能键（返回键、菜单键）、标题、右侧功能键组成，而AppBar里面内置封装了这些组件，使用起来非常方便。

2、可以做一些特殊的导航栏，比如可滚动的导航栏。

3、根据环境 MediaQuery 的填充插入内容，以避免系统  UI 入侵。

AppBar的效果图​​​​​​​


​​​​​​​

 

AppBar属性和说明

序列号字段属性描述
1keyKey当组件在组件树中移动时使用Key可以保持组件之前状态
2leadingWidget通常情况下返回一个返回键（IconButton)
3leadingWidthdouble左侧leading的宽度，默认56
4automaticallyImplyLeadingbool和leading配合使用，如果为true并且leading为空的情况下，会自动配置返回键
5titleWidget导航栏的标题
6centerTitlebool标题是否居中，不同操作系统默认显示位置不一样
7actionsList一个Widget列表
8bottomPreferredSizeWidget出现在导航栏底部的控件
9elevationdouble控制导航栏下方阴影的大小
10shadowColorColor控制导航栏下方阴影的颜色
11shapeShapeBorder导航栏的形状以及阴影
12backgroundColorColor导航栏的背景颜色
13foregroundColor(只有当14属性设置为flase的时候,该属性才会生效)Color导航栏中文本和图标的颜色
14backwardsCompatibilitybool与foregroundColor配合使用
15iconThemeIconThemeData导航栏图标的颜色、透明度、大小的配置
16actionsIconThemeIconThemeData导航栏右侧图标的颜色、透明度、大小的配置
17textThemeTextTheme导航栏文本的排版样式
18primarybool导航栏是否显示在屏幕顶部
19excludeHeaderSemanticsbool标题是否应该用 [Semantics] 包裹，默认false
20titleSpacingdoubletitle内容的间距
21toolbarOpacitydouble导航栏的透明度
22bottomOpacitydouble导航栏底部的透明度
23toolbarHeightdouble导航栏的高度，默认kToolbarHeight
24toolbarTextStyleTextStyle导航栏图标的颜色
25titleTextStyleTextStyle导航栏标题的默认颜色
26flexibleSpaceWidget堆叠在工具栏和选项卡栏的后面
27systemOverlayStyleSystemUiOverlayStyle叠加层的样式
28brightnessBrightness导航栏的亮度，改属性已废弃，用systemOverlayStyle代替

AppBar详细使用

1.key

key 是用来作为Widget 、Element 和 SemanticsNode 的标识，当组件在组件树中移动时使用Key可以保持组件之前状态

GlobalKey _appBarKey = GlobalKey();

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      key: _appBarKey,
    ),
  );
}

2.leading

appBar 左侧显示的一个 Widget，一般显示返回键 Icon 或 IconButton

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: IconButton(
        onPressed: (){
          Navigator.pop(context);
        }, 
        icon: Icon(Icons.arrow_back_sharp, color: Colors.white,)
      ),
    ),
  );
}

3.leadingWidth

左侧leading的宽度，默认56

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: IconButton(
        onPressed: (){
          Navigator.pop(context);
        }, 
        icon: Icon(Icons.arrow_back_sharp, color: Colors.white,)
      ),
      leadingWidth: 60,
    ),
  );
}

4.automaticallyImplyLeading

当leading 未配置时，在二级页面下会自动展示一个返回键，默认值为 true

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      automaticallyImplyLeading: false,
    ),
  );
}

5.title

导航栏的标题，一般是显示当前页面的标题文字

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("AppBarExample"),
    ),
  );
}

6.centerTitle

标题是否居中，不同操作系统默认显示位置不一样，安卓默认显示在左侧，苹果默认显示在中间

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("AppBarExample"),
      centerTitle: true,
    ),
  );
}

7.actions

一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      actions: [
        IconButton(
          onPressed: (){

          },
          tooltip: "扫一扫",
          icon: Icon(Icons.qr_code_scanner),
        ),
        IconButton(
          onPressed: (){

          },
          tooltip: "添加",
          icon: Icon(Icons.add),
        )
      ],
    ),
  );
}

8.bottom

出现在应用栏底部的控件，一般是 TabBar

import 'package:flutter/material.dart';

class AppBarExample extends StatefulWidget {
  @override
  _AppBarExampleState createState() => _AppBarExampleState();
}

class _AppBarExampleState extends State<AppBarExample> with SingleTickerProviderStateMixin{

  TabController _tabController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: "火车", icon: Icon(Icons.bus_alert),),
            Tab(text: "汽车", icon: Icon(Icons.bus_alert),)
          ],
        ),
      ),
    );
  }
}

9.elevation

控制应用栏下方阴影的大小，这个值不能是一个负值

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      elevation: 10,
    ),
  );
}

10.shadowColor

控制导航栏下方阴影的颜色

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      elevation: 10,
      shadowColor: Colors.green,
    ),
  );
}

11.shape

导航栏的形状以及阴影

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      elevation: 10,
      shadowColor: Colors.green,
      shape: RoundedRectangleBorder(
        side: BorderSide(
          color: Colors.red,
          width: 5
        )
      )
    ),
  );
}

12.backgroundColor

导航栏的背景颜色

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.orange,
    ),
  );
}

13.foregroundColor

导航栏中文本和图标的颜色

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      foregroundColor: Colors.black,
    ),
  );
}

14.backwardsCompatibility

与foregroundColor配合使用

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      foregroundColor: Colors.black,
      backwardsCompatibility: true,
    ),
  );
}

15.iconTheme

导航栏图标的颜色、透明度、大小的配置

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: IconButton(
        onPressed: (){
          Navigator.pop(context);
        }, 
        icon: Icon(Icons.arrow_back_sharp, color: Colors.white,)
      ),
      iconTheme: IconThemeData(
        color: Colors.orange,
        opacity: 1,
        size: 50
      ),
    ),
  );
}

16.actionsIconTheme

导航栏右侧图标的颜色、透明度、大小的配置

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      actions: [
        IconButton(
          onPressed: (){

          },
          tooltip: "扫一扫",
          icon: Icon(Icons.qr_code_scanner),
        ),
        IconButton(
          onPressed: (){

          },
          tooltip: "添加",
          icon: Icon(Icons.add),
        )
      ],
      actionsIconTheme: IconThemeData(
        color: Colors.purple,
      ),
    ),
  );
}

17.textTheme

导航栏文本的排版样式，默认使用ThemeData.primaryTextTheme

18.primary

导航栏是否显示在屏幕顶部

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backrogoundColor: Colors.black,
      primary: true,
    ),
  );
}

19.excludeHeaderSemantics

标题是否应该用 [Semantics] 包裹，默认false

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backrogoundColor: Colors.black,
      primary: true,
      excludeHeaderSemantics: true,
    ),
  );
}

20.titleSpacing

标题内容的间距，如果为0，将占用全部空间

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("AppBarExample"),
      centerTitle: true,
      titleSpacing: 0,
    ),
  );
}

21.toolbarOpacity

导航栏的透明度

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backrogoundColor: Colors.black,
      toolbarOpacity: 0.5,
    ),
  );
}

22.bottomOpacity

导航栏底部的透明度

import 'package:flutter/material.dart';

class AppBarExample extends StatefulWidget {
  @override
  _AppBarExampleState createState() => _AppBarExampleState();
}

class _AppBarExampleState extends State<AppBarExample> with SingleTickerProviderStateMixin{

  TabController _tabController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: "火车", icon: Icon(Icons.bus_alert),),
            Tab(text: "汽车", icon: Icon(Icons.bus_alert),)
          ],
        ),
				bottomOpacity: 0.5,
      ),
    );
  }
}

23.toolbarHeight

导航栏的高度，默认kToolbarHeight

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backrogoundColor: Colors.black,
      toolbarHeight: 200,
    ),
  );
}

24.toolbarTextStyle

导航栏图标的颜色

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: IconButton(
        onPressed: (){
          Navigator.pop(context);
        }, 
        icon: Icon(Icons.arrow_back_sharp, color: Colors.white,)
      ),
      toolbarTextStyle: TextStyle(
        color: Colors.black
      ),
    ),
  );
}

25.titleTextStyle

导航栏标题的默认颜色

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("AppBarExample"),
      centerTitle: true,
      titleSpacing: 0,
      titleTextStyle: TextStyle(
        color: Colors.red
      ),
    ),
  );
}

26.flexibleSpace,systemOverlayStyle,brightness

flexibleSpace 以及 systemOverlayStyle 一般都是在配合 SliverAppBar 使用的，这里不做过多的描述。而 brightness 已经废弃，用 systemOverlayStyle 代替

总结

以上是针对 AppBar 的所有使用方法，最常用的属有leading、title、actions、centerTitle、bottom、backgroundColor，其他属性都是在特定的情况才会使用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/23365.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

django的使用步骤详细

django的使用步骤详细

一、安装django pip install django 二、创建django项目 放django文件的的文件路径上输入cmd进入终端输入下面的命令 django-admin startproject 项目名称 三、app的创建 进入创建好的项目里面输入一下的命令 python manage.py startapp app名称 四、注册app 五、编写U…
阅读更多...
计算机视觉：基于Numpy的图像处理技术（二）：图像主成分分析（PCA）

计算机视觉：基于Numpy的图像处理技术（二）：图像主成分分析（PCA）

计算机视觉&#xff1a;基于Numpy的图像处理技术&#xff08;二&#xff09;&#xff1a;图像主成分分析&#x1f3f3;️‍&#x1f308; 文章目录计算机视觉&#xff1a;基于Numpy的图像处理技术&#xff08;二&#xff09;&#xff1a;图像主成分分析:rainbow_flag:图像主成分…
阅读更多...
企业数据泄漏事件频发，如何防止企业数据泄漏？

企业数据泄漏事件频发，如何防止企业数据泄漏？

2022年即将接近尾声&#xff0c;这一年受疫情和国际经济形势影响&#xff0c;各行各业都不太好过&#xff0c;同样互联网领域发展不平衡、规则不健全、秩序不合理等问题日益凸显&#xff0c;虽然互联网的快速发展为企业数字化转型提供了支撑&#xff0c;但是互联网发展进程中“…
阅读更多...
Android App开发动画特效之利用滚动器实现平滑翻页（附源码和演示 简单易懂）

Android App开发动画特效之利用滚动器实现平滑翻页（附源码和演示 简单易懂）

需要图片集请点赞关注收藏后评论区留言~~~ 一、利用滚动器实现平滑翻页 在日常生活中&#xff0c;平移动画比较常见&#xff0c;有时也被称为位移动画&#xff0c;左右翻页和上下滚动其实都用到了平移动画&#xff0c;譬如平滑翻书的动画效果&#xff0c;就是位移动画的一种应…
阅读更多...
BHQ-3 amine，1661064-89-6可在430nm至730nm范围内猝灭所有普通荧光团

BHQ-3 amine，1661064-89-6可在430nm至730nm范围内猝灭所有普通荧光团

英文名称&#xff1a;BHQ-3 amine CAS&#xff1a;1661064-89-6 外观&#xff1a;深紫色粉末 分子式&#xff1a;C32H36N7 分子量&#xff1a;518.69 储存条件&#xff1a;-20C&#xff0c;避光避湿 结构式&#xff1a; 凯新生物产品简介&#xff1a;干燥的寡核苷酸在环境…
阅读更多...
如今传统企业如何做数字化转型？

如今传统企业如何做数字化转型？

如今传统企业如何做数字化转型&#xff1f; 传统企业的数字化转型&#xff0c;也分为大型企业和中小企业&#xff0c;二者的侧重是十分不同的&#xff01; 大型传统企业数字化转型的侧重点是—— 如何利用新一代信息技术&#xff0c;整合其现有技术和资源优势&#xff0c;在相…
阅读更多...
MyBatis的缓存

MyBatis的缓存

目录 1.一级缓存 情况一 : 不同的SqlSession对应不同的一级缓存 情况二 : 同一个SqlSession但是查询条件不同 情况三 : 同一个SqlSession两次查询期间执行了任何一次增删改操作 情况四 : 同一个SqlSession两次查询期间手动清空了缓存 2.二级缓存 2.1二级缓存的相关配置 3.MyBa…
阅读更多...
内网渗透神器CobaltStrike之会话管理(五)

内网渗透神器CobaltStrike之会话管理(五)

CS之间派生会话 将CS1管理的会话派生至CS2中, 简单来说就是将CS1服务器的肉鸡送给CS2服务器 准备环境 主机描述Kali(192.168.47.134)CS TeamServer1Kali2(192.168.47.144)CS TeamServer2Windows7(192.168.47.133)CS客户端,攻击机Windows7(192.168.47.141)受害机操作步骤 首先…
阅读更多...
详解：MySQL自增ID与UUID的优缺点及选择建议，MySQL有序uuid与自定义函数实现

详解：MySQL自增ID与UUID的优缺点及选择建议，MySQL有序uuid与自定义函数实现

文章目录1.自增ID的优缺点1.1 优点1.2 缺点1.3 不适合以自增ID主键作为主键的情况2.UUID作为主键2.1 介绍2.2 优点2.3 缺点3.有序UUID作为主键3.1 介绍3.2 演示使用3.2.1 前提知识3.2.1.1 数据类型 - binary3.2.1.2 函数 - hex()3.2.1.3 函数 - unhex()3.2.2 数据库层3.2.3 JAV…
阅读更多...
web自动化测试（java+seleium）环境安装

web自动化测试（java+seleium）环境安装

目录0、应用1、linux安装1.1 安装chromium1.2 安装chromedriver1.3 安装xvfb2、java maven依赖selenium依赖3、入门案例0、应用 前一段时间&#xff0c;需要实现一个模拟页面操作的功能&#xff0c;去检测程序运行是否稳定&#xff0c;因此就用到了web自动化检测的功能。 1、实…
阅读更多...
Centos8安装部署JumpServer堡垒机

Centos8安装部署JumpServer堡垒机

1&#xff1a;安装支持在线安装和离线安装&#xff0c;我们选择在线安装一键部署。安装需要的环境要求。 OS/ArchArchitectureLinux KernelSoft Requirementlinux/amd64x86_64> 4.0wget curl tar gettext iptables pythonlinux/arm64aarch64> 4.0wget curl tar gettext …
阅读更多...
highcharts 堆积图

highcharts 堆积图

参考 多坐标轴混合图 | JShare 使用 js资源 https://cdn.highcharts.com.cn/10.2.1/highcharts.js https://cdn.highcharts.com.cn/10.2.1/modules/exporting.js https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js 效果 js 引用 <script src"https…
阅读更多...
【网页设计】期末大作业html+css（体育网站)--杜丹特篮球介绍8页 带报告

【网页设计】期末大作业html+css（体育网站)--杜丹特篮球介绍8页 带报告

⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材&#xff0c;DIVCSS 布局制作,HTMLCSS网页设计期末课程大作业 | 校园篮球网页设计 | 足球体育运动 | 体育游泳运动 | 兵乓球 | 网球 | 等网站的设计与制作 | HTML期末大学生网页设计作业 HTML&#xff1a;结构 CSS&…
阅读更多...
代码随想录刷题|LeetCode 343. 整数拆分 96.不同的二叉搜索树

代码随想录刷题|LeetCode 343. 整数拆分 96.不同的二叉搜索树

目录 343. 整数拆分 思路 整数拆分 96.不同的二叉搜索树 思路 不同的二叉搜索树 343. 整数拆分 题目链接&#xff1a;力扣 思路 动态规划的题目虽然说是要先确定dp数组的含义&#xff0c;再确定递归公式&#xff0c;但是总感觉这两者是相辅相成的&#xff0c;是一起出来的&…
阅读更多...
[附源码]java毕业设计校园飞毛腿系统

[附源码]java毕业设计校园飞毛腿系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
【三维点云】2-三维点云表征

【三维点云】2-三维点云表征

文章目录内容概要1 三维数据的获取方式及原理1.1 被动测量单目立体视觉双目立体视觉多目立体视觉1.2 主动测量结构光3D成像TOF 3D成像脉冲法相位法2 三维数据的获取原理立体视觉测量法相机成像模型小孔成像模型&#xff08;相机成像模型的理想情况&#xff09;单目立体视觉聚焦…
阅读更多...
[附源码]计算机毕业设计JAVA基于web的球类体育馆预定系统

[附源码]计算机毕业设计JAVA基于web的球类体育馆预定系统

[附源码]计算机毕业设计JAVA基于web的球类体育馆预定系统 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; …
阅读更多...
SPARKSQL3.0-SessionState构建源码剖析

SPARKSQL3.0-SessionState构建源码剖析

一、介绍 Apache Spark 2.0引入了SparkSession&#xff0c;其目的是为用户提供了一个统一的切入点来使用Spark的各项功能&#xff0c;不再需要显式地创建SparkConf, SparkContext 以及 SQLContext&#xff0c;因为这些对象已经封装在SparkSession中。此外SparkSession允许用户…
阅读更多...
字节跳动提出KVM内核热升级方案，效率提升5.25倍！

字节跳动提出KVM内核热升级方案，效率提升5.25倍！

背景 作为云计算最重要的底层基础之一&#xff0c;KVM 虚拟化软件在现代的数据中心中应用非常广泛。基于 KVM 的 hypervisor 包括了构成宿主机的软硬件&#xff0c;共同为虚拟机中的应用程序提供高性能的 CPU、内存和 IO 设备等资源。在大规模部署的生产环境中&#xff0c;作为…
阅读更多...
周年更名，元宇宙产业委再上新台阶

周年更名，元宇宙产业委再上新台阶

今天&#xff0c;2022年11月10日&#xff0c;全球元宇宙大会在鹏城隆重举行&#xff0c;这个日子也是中国移动通信联合会元宇宙产业工作委员会成立一周年的日子。会上&#xff0c;我们宣布了这个更名消息&#xff0c;这也是元宇宙产业工作委员会迈上一个新台阶的标志。有20多家…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023