Flutter3.22.2中SliverAppBar设置背景色滑动显示颜色错误

news/2024/11/8 16:10:51 标签: flutter

在使用Flutter项目开发中,可能会有页面需要滑动收起标题栏的效果,一般都会使用SliverAppBar来实现,当项目的Flutter的SDK版本升级到3.4后,发现使用了SliverAppBar的页面,在滑动过程中,标题栏和状态栏的颜色不对,初始图:

滑动后(需要将头像收起,角色名称隐藏,只显示小头像和账号):

预期是要滑动收起和初始状态的颜色要一致,都应该是浅绿色,代码如下:

 NestedScrollView(
              controller: scrollController,
              headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) => [
                SliverAppBar(
                  backgroundColor: mColors.colorBgGreen4,

                  /// 右侧图标
                  actions: [
                    GestureDetector(
                      child: Image.asset(
                        'images/icon/icon_customer_service.png',
                        width: 24,
                        height: 24,
                      ).initMargin(right: 12),
                      onTap: () {
                      },
                    ),
                    //右上角消息
                    MessageColumn()
                  ],
                  toolbarHeight: 44,
                  centerTitle: true,
                  pinned: true,
                  elevation: 0,
                  snap: false,
                  floating: false,
                  forceElevated: innerBoxIsScrolled,

                  /// 整个头部背景高度
                  expandedHeight: 84,

                  /// 头部标题
                  title: ValueListenableBuilder(
                    valueListenable: showTitle,
                    builder: (BuildContext context, dynamic value, Widget? child) {
                      return AnimatedOpacity(
                        opacity: value ? 1 : 0,
                        duration: const Duration(milliseconds: 300),
                        child: Offstage(
                          offstage: value ? false : true,
                          child: Container(
                            height: 44,
                            child: GestureDetector(
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Container(
                                    margin: EdgeInsets.only(left: 12, right: 8),
                                    child: Image.asset(
                                      "images/icon/icon_user_avatar.png",
                                      width: 28,
                                    ),
                                  ),
                                  Text(
                                    '187****0182',
                                    style: TextStyle(
                                        color: mColors.colorTitle,
                                        fontSize: 16,
                                        fontWeight: FontWeight.bold),
                                  ),
                                ],
                              ),
                              onTap: () async {

                              },
                            ),
                          ),
                        ),
                      );
                    },
                  ),
                  onStretchTrigger: () async => () {
                    return;
                  },
                  stretch: true,

                  /// 可以往下拉的最大距离
                  stretchTriggerOffset: 1,
                  flexibleSpace: FlexibleSpaceBar(
                    /// 整个头部背景
                    background: Container(
                      color: mColors.colorBgGreen4,
                      height: 60,
                      width: double.infinity,
                      margin: MediaQuery.of(context).padding,
                      child: UserInfo2Column(),
                    ),
                  ),
                ),
              ],
              body: Container(
                color: Color(0xfff3f5f7),
                child: SingleChildScrollView(
                    child: Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(10.0), topRight:         Radius.circular(10.0))),
                  child: Container(
                    ),
                  ),
                )),
              ),
            )

无论怎么改都发现,似乎有一个百分百的颜色遮罩一样,backgroundColor设置成纯色,依然会有若隐若现的阴影,后来和大佬朋友讨论,说有没有可能是因为flutter版本升级后的版本差异,说干就干,将sdk版本降低到3.4以前,确实没有这个问题了。

怎么解决了,查阅一番资料后发现,3.4以后,APP的默认样式ThemeData改成了Material形式的,在项目入口处将MaterialApp的ThemeData添加一个参数useMaterial3: false,就完美解决了:

 MaterialApp(
          ///安卓切到后台会不显示app名字,需要加此参数
          title: 'xxxx',
          theme: ThemeData(
            useMaterial3: false,//添加此参数解决问题
            colorScheme: const ColorScheme.light(),
          ))

这个参数是什么意思呢,文档的解释:

A temporary flag that can be used to opt-out of Material 3 features

意思就是是否使用Material 3的样式,默认是true,后续高版本可能会取消这个参数的设置。


http://www.niftyadmin.cn/n/5744125.html

相关文章

数据库期末考试简答题

1.试述数据、数据库、数据库管理系统、数据库系统的概念。 答:(1)数据是数据库中存储的基本对象,是描述事物的符号记录。数据有多种表现形式,它们都可以经过数字化后存入计算机。数据的种类有数字、文字、…

基于百度飞桨paddle的paddlepaddle2.4.2等系列项目的运行

PPASR 必看&#xff01;&#xff01;&#xff01; PaddleSpeech develop --> PaddlePaddle 2.5.0/2.5.1 PaddleSpeech < 1.4.1 --> PaddlePaddle < 2.4.2 1.创建虚拟环境 conda create --name test python3.10 2.激活环境&#xff0c;安装ppasr的paddlepaddl…

LeetCode :150. 逆波兰表达式求值(含求后缀表达式和中缀转后缀表达式)

目录 题目描述: 代码: 拓展: 中缀表达式转后缀表达式代码: 题目描述: 给你一个字符串数组 tokens &#xff0c;表示一个根据 逆波兰表示法 表示的算术表达式。 请你计算该表达式。返回一个表示表达式值的整数。 注意&#xff1a; 有效的算符为 、-、* 和 / 。每个操作数…

【手撕排序2】快速排序

&#x1f343; 如果觉得本系列文章内容还不错&#xff0c;欢迎订阅&#x1f6a9; &#x1f38a;个人主页:小编的个人主页 &#x1f380; &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐文章 ✌️ &#x1f91e; &#x1f91f; &#x1f918; &#x1f919; &#x1f448; &…

Linux(ubuntu) 部署xinference

注:在此前提我已经准备好了环境 - 文章中大部分命令我都会有说明 进阶命令就需要友友们在研究了 miniconda 安装 gpu 显卡驱动安装 xinference使用命令什么的我就不放了官方文档中很简单易懂 xinference 官方文档地址 注&#xff1a;此文章不叙述docker版安装(docker安装很简单…

Gradle命令编译Android Studio工程项目并签名

文章目录 gradlew命令gradlew编译debug apkgradlew编译release apkapksigner签名apkgradlew注意事项 gradlew命令 gradlew 是一个脚本文件&#xff0c;它允许你在没有全局安装 Gradle 的情况下运行 Gradle 构建。这个脚本在多平台上可用&#xff0c;对于 Windows 系统来说是 g…

笔记整理—linux驱动开发部分(6)platform平台总线

与前文提到的usb、IIC、PCI总线不同&#xff0c;platform总线是一种虚拟抽象的总线&#xff0c;不存在物理层面上的一个名为platform的总线。 cup与外部设备通信有两种方法&#xff0c;地址总线或接口&#xff08;32位范围是0~2^32-1&#xff09;&#xff1b;专用接口连接&…

深度学习经典模型之Network in Network

1 Network in Network 1.1 模型介绍 ​ Network In Network (NIN)是由 M i n L i n Min Lin MinLin等人提出&#xff0c;在CIFAR-10和CIFAR-100分类任务中达到当时的最好水平&#xff0c;因其网络结构是由三个多层感知机堆叠而被成为NIN [ 5 ] ^{[5]} [5]。NIN以一种全新的角…