记录解决因elevation引起的颜色偏红UI问题

FourV大大

于 2024-06-04 11:20:14 发布

阅读量206

点赞数 1

分类专栏： Flutter随记 APP开发随记文章标签： ui flutter 经验分享 ios android

本文链接：https://blog.csdn.net/HMOnlyou/article/details/139436123

版权

APP开发随记同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

Flutter随记

11 篇文章 0 订阅

订阅专栏

APP页面经历了多个版本迭代，不知是Flutter哪个插件更新版本导致了部分UI颜色偏红！如下图：

滚动前的导航栏(AppBar)：

向上滚动后的导航栏(AppBar)：

PopupMenuButton UI底色偏红

AlertDialog

解决方案：
在main.dart文件中给MaterialApp或GetMaterialApp设置theme和darkTheme，此处以GetMaterialApp为例
1）导航栏处理：

runApp(
      GetMaterialApp(
      	  theme: ThemeData(
          appBarTheme: AppBarTheme(
              backgroundColor: Colors.white,
              elevation: 0,
              scrolledUnderElevation: 0,
              systemOverlayStyle: SystemUiOverlayStyle.light),
          scaffoldBackgroundColor: FTColors.greyF8,
          brightness: Brightness.light
        ),
        darkTheme: ThemeData(
          appBarTheme: AppBarTheme(
              backgroundColor: Colors.black,
              elevation: 0,
              scrolledUnderElevation: 0,
              systemOverlayStyle: SystemUiOverlayStyle.dark),
          scaffoldBackgroundColor: FTColors.greyF8,
          brightness: Brightness.dark
        ),
      	)
      );

2）针对每个PopupMenuButton单独处理

PopupMenuButton(
      elevation: 0, //解决菜单背景色偏红问题
      color: Colors.white,
      itemBuilder: (BuildContext context) {
			return [
				PopupMenuItem<String>(
      				  value: "itemId",
				      child: Text(
				        "item"
				      ),
    			)
			];
	   }
)

3）针对每个AlertDialog单独处理

	AlertDialog(
          elevation: 0,
          backgroundColor: Colors.white,
          title: const Text("提示"),
          content: const Text("您已退出登录"),
    )

由于没有找到可以统一处理后两种widget的方法，所以采取了最笨的方式——单独处理。
优先解决问题，后续再优化实现方式