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

2024-04-10 1506阅读

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

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 样式

 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：前景色绿色会覆盖标题的色值

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：标题左边间距

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：标题栏的高度

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：系统状态栏样式修改

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

  toolbarOpacity: 0.5,

VPS购买请点击我

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

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

AppBar简介

使用场景：

相关阅读

怎么把织梦的模板替换?

dedecms怎么调用特定的栏目文档?

怎么抓包一个网页?

wap怎么封装app?

目录[+]