Flutter 设计案例 - 聊天IM UI 开源

647 阅读1分钟

Flutter IM UI

Almaren

趁着空闲时间,把之前写了部分效果IM程序再次完善,更是吃上了螃蟹😀(Flutter 3.29)

preview.jpeg

  • 当然,界面并没有写完,部分效果仅供学习。

过程中遇到的一些问题以及解决方案

1.手机的底部导航条透明高斯模糊问题。

小米手机底部导航条的颜色不需要去修改原生安卓的xml配置文件了。 至少在澎湃OS2上面是这样的,但是需要关闭颜色反转,否则无法透明。

737shots_so.jpeg

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,
          ),

源码地址