Flutter——最详细(AppBar)使用教程

9月前作者：怀君分类：Toy博客阅读(47) 违法举报

这篇具有很好参考价值的文章主要介绍了Flutter——最详细(AppBar)使用教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

AppBar简介

Material Design 应用栏(标题栏)

使用场景：

顶部标题栏包括一些常用的菜单按钮

属性	作用
leading	左边工具视图
automaticallyImplyLeading	左边图标的颜色
title	标题视图
actions	右边菜单按钮
flexibleSpace	其高度将与应用栏的整体高度相同
bottom	左侧底部文本内容
elevation	底部阴影
scrolledUnderElevation	左侧底部文本最大行数
shadowColor	阴影样式
surfaceTintColor	应用栏背景色以指示高度的表面色调叠加的颜色
shape	标题栏样式选择
backgroundColor	标题栏背景色
foregroundColor	标题栏前景色
iconTheme	用于工具栏图标的颜色、不透明度和大小
actionsIconTheme	用于工具栏图标的颜色、不透明度和大小
primary	此应用栏是否显示在屏幕顶部
centerTitle	标题是否居中
excludeHeaderSemantics	标题是否应使用标题 Semantics 包装
titleSpacing	标题间距
toolbarOpacity	应用栏的工具栏部分的不透明程度
bottomOpacity	应用栏底部的不透明程度
toolbarHeight	标题栏高度
leadingWidth	左边视图宽度
toolbarTextStyle	主题相关，所有AppBar的字体样式
titleTextStyle	主题相关，所有title的字体样式
systemOverlayStyle	顶部系统状态栏样式

leading、title、actions： 组合使用效果图

appbar leading,flutter,flutter,前端

Scaffold(
      appBar: AppBar(
        title: Text('Flutter App Bar'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            // 处理返回操作
          },
        ),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              // 处理搜索操作
            },
          ),
          IconButton(
            icon: Icon(Icons.more_vert),
            onPressed: () {
              // 处理更多操作
            },
          ),
        ],
      ),
      body: Container(),
    );

iconTheme： 效果图
要注意 iconTheme 单独使用时，会应用到所有的Icon样式
actionsIconTheme 两个属性组合使用时，则会区分Icon 样式

appbar leading,flutter,flutter,前端

 Scaffold(
      appBar: AppBar(
        title: Text('Flutter App Bar'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            // 处理返回操作
          },
        ),
        iconTheme: IconThemeData(
          color: Colors.red, // 修改图标颜色
          size: 30.0,       // 修改图标大小
        ),
        actionsIconTheme: IconThemeData(
          color: Colors.blue, // 修改图标颜色
          size: 30.0, // 修改图标大小
        ),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              // 处理搜索操作
            },
          ),
          IconButton(
            icon: Icon(Icons.more_vert),
            onPressed: () {
              // 处理更多操作
            },
          ),
        ],
      ),
      body: Container(),
    );

backgroundColor： 背景色黄色
foregroundColor： 前景色绿色会覆盖标题的色值

appbar leading,flutter,flutter,前端

Scaffold(
      appBar: AppBar(
        title: Text('我是绿色'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            // 处理返回操作
          },
        ),
        iconTheme: IconThemeData(
          color: Colors.red, // 修改图标颜色
          size: 30.0, // 修改图标大小
        ),
        actionsIconTheme: IconThemeData(
          color: Colors.blue, // 修改图标颜色
          size: 30.0, // 修改图标大小
        ),
        backgroundColor: Colors.yellow,
        foregroundColor: Colors.greenAccent,
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              // 处理搜索操作
            },
          ),
          IconButton(
            icon: Icon(Icons.more_vert),
            onPressed: () {
              // 处理更多操作
            },
          ),
        ],
      ),
      body: Container(),
    );

titleTextStyle： 标题字体样式
titleSpacing： 标题左边间距

appbar leading,flutter,flutter,前端

Scaffold(
      appBar: AppBar(
        title: Text('我是紫色'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            // 处理返回操作
          },
        ),
        iconTheme: IconThemeData(
          color: Colors.red, // 修改图标颜色
          size: 30.0, // 修改图标大小
        ),
        actionsIconTheme: IconThemeData(
          color: Colors.blue, // 修改图标颜色
          size: 30.0, // 修改图标大小
        ),
        backgroundColor: Colors.yellow,
        foregroundColor: Colors.greenAccent,
        titleTextStyle: TextStyle(
          color: Colors.deepPurple,   // 修改标题文本颜色
          fontSize: 24.0,       // 修改标题文本字体大小
          fontWeight: FontWeight.bold,  // 修改标题文本字体粗细
        ),
        titleSpacing: 30,
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              // 处理搜索操作
            },
          ),
          IconButton(
            icon: Icon(Icons.more_vert),
            onPressed: () {
              // 处理更多操作
            },
          ),
        ],
      ),
      body: Container(),
    );

centerTitle： 标题是否居中展示，默认靠左
toolbarHeight： 标题栏的高度

appbar leading,flutter,flutter,前端

Scaffold(
      appBar: AppBar(
        title: Text(' App Bar'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            // 处理返回操作
          },
        ),
        iconTheme: IconThemeData(
          color: Colors.red, // 修改图标颜色
          size: 30.0, // 修改图标大小
        ),
        actionsIconTheme: IconThemeData(
          color: Colors.blue, // 修改图标颜色
          size: 30.0, // 修改图标大小
        ),
        backgroundColor: Colors.yellow,
        foregroundColor: Colors.greenAccent,
        centerTitle: true,
        titleTextStyle: TextStyle(
          color: Colors.deepPurple, // 修改标题文本颜色
          fontSize: 24.0, // 修改标题文本字体大小
          fontWeight: FontWeight.bold, // 修改标题文本字体粗细
        ),
        toolbarHeight: 100,
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              // 处理搜索操作
            },
          ),
          IconButton(
            icon: Icon(Icons.more_vert),
            onPressed: () {
              // 处理更多操作
            },
          ),
        ],
      ),
      body: Container(),
    );

systemOverlayStyle： 系统状态栏样式修改

appbar leading,flutter,flutter,前端

Scaffold(
      appBar: AppBar(
        title: Text(' App Bar'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            // 处理返回操作
          },
        ),
        iconTheme: IconThemeData(
          color: Colors.red, // 修改图标颜色
          size: 30.0, // 修改图标大小
        ),
        actionsIconTheme: IconThemeData(
          color: Colors.blue, // 修改图标颜色
          size: 30.0, // 修改图标大小
        ),
        backgroundColor: Colors.yellow,
        foregroundColor: Colors.greenAccent,
        centerTitle: true,
        titleTextStyle: TextStyle(
          color: Colors.deepPurple, // 修改标题文本颜色
          fontSize: 24.0, // 修改标题文本字体大小
          fontWeight: FontWeight.bold, // 修改标题文本字体粗细
        ),
        toolbarHeight: 100,
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              // 处理搜索操作
            },
          ),
          IconButton(
            icon: Icon(Icons.more_vert),
            onPressed: () {
              // 处理更多操作
            },
          ),
        ],
        systemOverlayStyle: SystemUiOverlayStyle(
          statusBarColor: Colors.blue, // 设置状态栏背景颜色
          statusBarIconBrightness: Brightness.dark, // 设置状态栏图标的亮度，dark表示黑色图标
        ),
      ),
      body: Container(),
    );

toolbarOpacity： 设置标题栏透明度 0.5

appbar leading,flutter,flutter,前端文章来源地址https://www.toymoban.com/news/detail-752652.html

  toolbarOpacity: 0.5,

到了这里，关于Flutter——最详细(AppBar)使用教程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

flutter：实现一个简单的appBar上的搜索框、一个简单的搜索历史

效果图代码效果代码

2024年02月12日
浏览(55)
Flutter——最详细(NavigationBar)使用教程

Material 3 导航栏组件! 导航栏提供了一种持久且便捷的方式来在应用程序的主要目的地之间进行切换。底部菜单栏模块属性作用 onDestinationSelected 选择索引回调监听器 selectedIndex 目前选定目的地的索引 destinations 存放菜单按钮 backgroundColor 导航栏背景色 elevation 海拔高度 heigh

2024年02月15日
浏览(36)
Flutter——最详细(TextField)使用教程

文本输入框，拥有复杂的属性。可指定控制器、文字样式、装饰线、行数限制、游标样式等。监听输入框变动事件。搜索框，输入账号密码等属性作用 controller 输入框监听器 decoration 输入框装饰属性 textAlign 内容对齐方式 textAlignVertical 文本垂直对齐 textDirection 文字方向 ma

2024年02月13日
浏览(40)
Flutter——最详细(Scaffold)使用教程

相当于界面的主体（类似于安卓最外层PhoneWindow），组件的展示都必须依附于它。每一个界面都是脚手架，通过它来进行架构实现，优美的布局效果。属性作用 appBar 顶部的标题栏 body 显示整体布局 floatingActionButton 右下角按钮 floatingActionButtonLocation 按钮的位置 floatingActionB

2024年02月06日
浏览(37)
Flutter——最详细(Map)使用教程

键值对的集合，您可以使用其关联的键从中检索值。普通的 HashMap 是无序的（不保证顺序）， LinkedHashMap 按键插入顺序迭代，而像 SplayTreeMap 这样的排序映射按排序顺序迭代键。 1，添加元素 addEntries() 2，更新组元素 update() 3，更新所有元素的值 updateAll() 4，删除指定的元素

2024年02月06日
浏览(36)
Flutter——最详细(CustomScrollView)使用教程

创建一个 [ScrollView]，该视图使用薄片创建自定义滚动效果。 [SliverList]，这是一个显示线性子项列表的银子列表。 [SliverFixedExtentList]，这是一种更高效的薄片，它显示沿滚动轴具有相同范围的子级的线性列表。 [SliverGrid]，这是一个显示子项 2D 数组的薄片。 [SliverPadding]，这是

2024年01月22日
浏览(39)
Flutter——最详细(NavigationRail)使用教程

一个 Material Design 小部件，旨在显示在应用程序的左侧或右侧，以便在少量视图（通常在三到五个视图之间）之间导航。通过Row属性，左侧或右侧菜单栏按钮属性作用 onDestinationSelected 选择索引回调监听器 selectedIndex 目前选定目的地的索引 destinations 存放菜单按钮 backgroundC

2024年02月16日
浏览(42)
flutter getx 简单使用教程

所以Flutter使用GetX真的很不错为什么说什么GetX好用呢？ 1、依赖注入 GetX是通过依赖注入的方式，存储相应的XxxGetxController；已经脱离了InheritedWidget那一套玩法，自己手动去管理这些实例，使用场景被大大拓展 2、跨页面交互这绝对是GetX的一个优点！对于复杂的生产环境，跨

2024年02月08日
浏览(53)
Flutter Image库详细介绍与使用指南

1. 介绍在Flutter中，图片是应用程序中不可或缺的一部分，而 image 库是一个强大而灵活的图片加载和处理库。通过使用 image^ 4.1.4 ，您可以轻松地实现图片的加载、缓存、调整大小和裁剪等功能，同时还支持各种图片格式。 2. 安装在 pubspec.yaml 文件中添加以下依赖：然后运行

2024年01月25日
浏览(35)
教程：Flutter 和 Rust混合编程，使用flutter_rust_bridge自动生成ffi代码

实践环境：Arch Linux flutter_rust_bridge官方文档 Flutter环境配置教程 | Rust环境配置教程记录使用 flutter_rust_bridge 遇到的一些坑。假设我们已经配置了Fluuter与Rust环境现在直接使用flutter_rust_bridge模板创建自己的项目运行：现在我们先让项目跑起来：编辑 native/src/api.rs 安装代码生

2024年02月09日
浏览(85)