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

最新推荐文章于 2024-06-26 00:22:14 发布
最新推荐文章于 2024-06-26 00:22:14 发布
阅读量3.7k 收藏 9
点赞数 3
分类专栏： flutter 文章标签： flutter 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013290250/article/details/134296716
版权

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,
怀君
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Flutter中AppBar组件详解
越陌度阡
12-27 1869
AppBar组件主要用于定义应用程序顶部区域，可以用来展示应用程序标题、搜索入口、下拉菜单、标签栏等信息。常用的属性如下所示： 1. leading 标题前置控件。在首页通常显示应用程序的Logo，其它页面通常显示为返回按钮； 2. title 页面标题。通常显示当前页面的标题文字，可以放组件； 3. actions 标题后置控件。通常使用IconButton来表示，可以放按钮组； 4. bottom 底部控件。通常用tabBar来表示放置Tab标签栏； 5. backgroundColor 导航
calendar_appbar:带有日历的自定义AppBar小部件的Flutter包
04-06
【calendar_appbar】是一款专为Flutter开发者设计的自定义AppBar组件，它集成了一项独特的功能——日历视图。这个小部件使得用户在顶部导航栏就能方便地浏览和选择日期，提高了应用程序的用户体验，尤其适用于那些...
Flutter的Appbar
aau88497的博客
04-05 213
actions → List一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用PopupMenuButton 来显示为三个点，点击后弹出二级菜单。 automaticallyImplyLeading → bool是否提供控件占位。 backgroundColor → ColorAppbar ...
【自学Flutter】17 导航栏AppBar 、抽屉菜单Drawer、圆形图标ClipOval 的使用
最新发布
2401_85730870的博客
06-26 702
小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人。
Flutter AppBar 详解
大工软男de小书柜
10-07 5656
概述 AppBar({ Key key, this.leading, //widget类型，即可任意设计样式，表示左侧leading区域，通常为icon，如返回icon this.automaticallyImplyLeading = true, // 如果leading!=null，该属性不生效；如果leading==null且为true，左侧leading区域留白；如...
Flutter开发之appBar简介
江上清风山间明月的博客
02-04 1602
AppBar在APP上的上方（如果有）显示工具栏小部件、前导、标题和操作。而APP的底部通常用于TabBar。
[flutter专题]详解AppBar小部件
2401_84408092的博客
05-06 835
应用栏布局自定义 AppBarFlutter 中的 AppBar 是什么？Flutter AppBar 是根据Material Design指南构建的应用程序组件。它通常位于屏幕顶部，并且能够在其布局中包含其他小部件。AppBar 通常显示品牌信息，例如徽标和标题，并且通常包含按钮或其他用户交互点。以下是 Flutter 中默认的 AppBar 的样子：// Mostly, AppBar is used inside a Scaffold widget.Scaffold(appBar: AppBar(),)
Flutter 中的 AppBar 小部件：全面指南
smileKH的博客
05-18 950
AppBar是一个包含应用标题、widget 以及可能的操作的顶部导航栏。它通常位于Scaffold的appBar属性中，是应用中提供导航和操作的中心位置。AppBarAppBar(// 处理菜单按钮点击},),],
自定义AppBar实现滚动渐变
nicolelili1的专栏
05-28 2242
1、 滑动过程中AppBar在不透明和透明之间进行变化 2、 为l使AppBar能够滚动，我们需要一个列表，这个列表足够长，以至于我们能够监听列表的滚动，来改变顶部的AppBar的背景色 添加底部的列表，让AppBar可以滑动 3、移除listview和顶部的padding 这个padding可能是开发团队考虑到了手机的适配，比如iphonX的适配，提前把顶部的安...
【Flutter】四十一、Flutter解决沉浸式状态栏——SafeArea
01-07
import 'package:flutter/material.dart'; class SafeAreaRoute extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( ...
Flutter实战1
08-03
#### 五、第一个Flutter应用——计数器示例 1. **计数器应用实现步骤**： - 创建一个新的Flutter项目。 - 在主屏幕上添加一个按钮和一个文本显示当前计数值。 - 为按钮绑定点击事件，每次点击增加计数值并在界面...
flutter_shop：使用flutter制作的购物应用程序
02-17
《使用Flutter制作购物应用程序——扑扑店解析》 Flutter，由Google开发的开源UI工具包，以其高效、跨平台的特性在移动应用开发领域大放异彩。本项目"flutter_shop"就是一个很好的实例，它展示了如何利用Flutter和...
flutter_widgets.zip
07-14
总的来说，"flutter_widgets.zip"提供的示例将引导你深入理解Flutter的核心——Widgets，以及如何利用它们构建出美观且功能丰富的应用。通过这个压缩包，你可以逐步掌握Flutter的开发技巧，开启你的移动应用开发之旅...
Flutter 导航栏AppBar
热门推荐
我很好
09-03 3万+
恢弘志士之气，不宜妄自菲薄。——诸葛亮
【Flutter学习】基本组件之AppBar顶部导航栏
weixin_34227447的博客
06-25 526
一，概述　 　　　AppBar 显示在app的顶部。AppBar包含5大部分，如下图：　　　　 　　　　　二，构造函数及参数含义　　　 构造函数 AppBar({ Key key, this.leading, //在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮 this.automaticallyImplyL...
Flutter修改AppBar的主题
海阔天空
06-17 1321
Flutter修改AppBar的主题
flutter-＞appBar配置和顶部导航栏
q7410p123的博客
03-22 439
【代码】flutter-＞appBar配置和顶部导航栏。
Flutter 组件集录 | AppBar 组件 - 从源码中学习
Eqiqi的博客
10-28 399
我们已经详细分析了 `AppBar` 在使用中的细节。本文将从源码的角度来分析 `AppBar` 的源码实现，一方面有利于进一步认识 `AppBar` 内部的更多细节，另一方面源码中对组件封装中的处理方式，也有很多值得我们学习的地方。
flutter appbar
05-26
Flutter AppBar是一个Material Design风格的顶部导航栏，通常包含应用程序的标题、菜单选项和其他操作控件。在Flutter中，您可以使用AppBar Widget轻松创建一个AppBar。 以下是一个简单的示例： ```dart import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter AppBar Demo', home: Scaffold( appBar: AppBar( title: Text('AppBar Demo'), ), body: Center( child: Text('Hello, World!'), ), ), ); } } ``` 在这个示例中，我们创建了一个名为`MyApp`的无状态小部件，并在`build`方法中返回一个`MaterialApp`。在`MaterialApp`中，我们将`Scaffold`作为主页，该`scaffold`包含一个`AppBar`和一个`Center`小部件，其中包含一个简单的文本`Hello, World!`。 在`AppBar`中，我们设置了标题文本为`AppBar Demo`。默认情况下，`AppBar`的背景颜色是蓝色，但您可以使用`backgroundColor`属性来更改它。此外，您还可以添加菜单选项、操作按钮和其他控件以扩展`AppBar`的功能。 希望这可以帮助您开始使用Flutter的AppBar！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

怀君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值