Flutter IM UI
Almaren
趁着空闲时间,把之前写了部分效果IM程序再次完善,更是吃上了螃蟹😀(Flutter 3.29)
- 当然,界面并没有写完,部分效果仅供学习。
过程中遇到的一些问题以及解决方案
1.手机的底部导航条透明高斯模糊问题。
小米手机底部导航条的颜色不需要去修改原生安卓的xml配置文件了。 至少在澎湃OS2上面是这样的,但是需要关闭颜色反转,否则无法透明。
systemOverlayStyle: SystemUiOverlayStyle(
//底部导航栏
systemNavigationBarColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.dark,
systemNavigationBarContrastEnforced: false, //底部强制反转色
),
如果其他手机可能需要设置安卓配置文件了。
// 你需要为白色和黑色主题 分别设置
android\app\src\main\res\values\styles.xml
android\app\src\main\res\values-night\styles.xml
<style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
<item name="android:windowBackground">?android:colorBackground</item>
<!--导航栏透明-->
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:navigationBarColor">@android:color/transparent</item>
</style>
2.图片预加载
如果图片资源较大,提前加载到内存中,可以避免渲染时的白屏闪烁问题。
precacheImage(const AssetImage("images/intro_bg.jpg"), Get.context!);
3.IndexedStack 层叠页面,可以保持页面的滚动状态
IndexedStack(
index: pageIndex,
children: [
const ChatsPage(),
const ContactsPage(),
const SettingsPage(),
],
),
4.ExtendBodyBehindAppBar
当每个页面都使用extendBodyBehindAppBar的时候,就需要注意使用SafeArea 或者 SliverSafeArea, LiseView 默认会自带 SafeAreaPadding,除非你覆盖了它的Paddding属性。
SliverSafeArea(
bottom: false,
sliver: HeaderLocator.sliver(),
),
5.BackdropFilter.grouped
Flutter 3.29 这个包包含了BackdropFilter.grouped,这个App已经加入, 但是差距不大,没法看出效果,官方说的是这个可以增加 高斯模糊的性能。
BackdropGroup
BackdropFilter.grouped(
enabled: enabled,
filter: ImageFilter.blur(
sigmaX: sigmaX,
sigmaY: sigmaY,
),