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: 组合使用效果图

dart 复制代码
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 样式


dart 复制代码
 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: 前景色 绿色 会覆盖标题的色值

dart 复制代码
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: 标题左边间距

dart 复制代码
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: 标题栏的高度

dart 复制代码
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: 系统状态栏样式修改

dart 复制代码
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

dart 复制代码
  toolbarOpacity: 0.5,
相关推荐
青皮桔21 分钟前
CSS实现百分比水柱图
前端·css
影子信息26 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月27 分钟前
1.vue权衡的艺术
前端·vue.js·开源
样子201831 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿32 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
帅次1 小时前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu2 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说2 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
小蜜蜂嗡嗡2 小时前
flutter flutter_vlc_player播放视频设置循环播放失效、初始化后获取不到视频宽高
flutter