【2023-12-28】更新：

今天發(fā)現(xiàn)IOS組件 CupertinoNavigationBar 已經(jīng)實(shí)現(xiàn)該效果绽快，但是自定義能力不如該文章各拷，可以參考刁绒。

關(guān)鍵詞：Flutter、Appbar烤黍、BottomNavigationBar膛锭、高斯模糊、半透明蚊荣、模仿IOS

Screenshot_2023-09-15-22-48-35-622_com.example.ap.jpg

<img src="https://upload-images.jianshu.io/upload_images/29320756-ee0a26f472c1bf40.jpg" width="200" alt="效果圖"/>

XXX

<img src="https://upload-images.jianshu.io/upload_images/29320756-ee0a26f472c1bf40.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/240" alt="drawing" width="200"/>

android\app\src\main\res\values\styles.xml

<item name="android:windowTranslucentNavigation">true</item>

關(guān)鍵代碼：

1.封裝一個(gè)可以模糊背景的容器

Widget getFilterWidget({
    Widget? child,
    double sigmaX = 12,
    double sigmaY = 12,
    bool hasColor = true, //是否具備顏色
    EdgeInsets? padding,
  }) {
    return ClipRect(
      //背景模糊化
      child: BackdropFilter(
        filter: ImageFilter.blur(
          sigmaX: sigmaX,
          sigmaY: sigmaY,
        ),
        child: Container(
          color: hasColor ? const Color.fromARGB(100, 255, 255, 255) : null,
          padding: padding,
          child: child,
        ),
      ),
    );
  }

2.封裝一個(gè)可以獲取透明Appbar的函數(shù)

PreferredSizeWidget getAppBar({
    double appHeight = 80,
    Widget? title,
    Widget? leading,
    List<Widget>? actions,
    PreferredSize? bottom,
  }) {
    if (actions != null) {
      actions.add(const SizedBox(width: 8));
    }
    return PreferredSize(
      preferredSize: Size(0, appHeight),
      child: getFilterWidget(
        child: AppBar(
          title: title,
          toolbarHeight: appHeight,
          leading: leading,
          leadingWidth: 80,
          actions: actions,
          bottom: bottom,
          elevation: 0,
          surfaceTintColor: Colors.transparent,
          backgroundColor: Colors.transparent,
          systemOverlayStyle: const SystemUiOverlayStyle(
            statusBarColor: Colors.transparent,
            statusBarIconBrightness: Brightness.light,
          ),
          //bottom: getTitle(),
        ),
      ),
    );
  }

3.使用方法

Scaffold(
      appBar: getAppBar(
        title: const Text(
          "AppBar by Dream.Machine",
          style: TextStyle(color: Colors.white),
        ),
      ),

bottomNavigationBar: getFilterWidget(
        hasColor: false,
        child: BottomNavigationBar(
          elevation: 0,
          onTap: (index) {},
          backgroundColor: const Color.fromARGB(100, 255, 255, 255),
          currentIndex: 0,
          showSelectedLabels: false,
          showUnselectedLabels: false,
          items: [
            BottomNavigationBarItem(
              activeIcon: SvgPicture.asset(
                "images/frame/frame_chat_active.svg",
                colorFilter:
                    const ColorFilter.mode(Colors.white, BlendMode.srcIn),
              ),
              icon: SvgPicture.asset("images/frame/frame_chat.svg"),
              label: "CHAT",
            ),
            BottomNavigationBarItem(
              activeIcon:
                  SvgPicture.asset("images/frame/frame_contacts_active.svg"),
              icon: SvgPicture.asset(
                "images/frame/frame_contacts.svg",
                colorFilter:
                    const ColorFilter.mode(Colors.white, BlendMode.srcIn),
              ),
              label: "Contacts",
            ),
            BottomNavigationBarItem(
              activeIcon:
                  SvgPicture.asset("images/frame/frame_settings_active.svg"),
              icon: SvgPicture.asset(
                "images/frame/frame_settings.svg",
                colorFilter:
                    const ColorFilter.mode(Colors.white, BlendMode.srcIn),
              ),
              label: "SETTING",
            )
          ],
        ),
      ),