Flutter沉浸式狀態欄/AppBar導航欄/仿鹹魚底部凸起導航

来源:https://www.cnblogs.com/xiaoyan2017/archive/2020/04/27/12784076.html
-Advertisement-
Play Games

Flutter中如何實現沉浸式透明Statusbar狀態欄效果？ 如下圖：狀態欄是指android手機頂部顯示手機狀態信息的位置。android 自4.4開始新加入透明狀態欄功能，狀態欄可以自定義顏色背景，使titleBar能夠和狀態欄融為一體，增加沉浸感。 如上圖Flutter狀態欄預設為黑色半透 ...


  • Flutter中如何實現沉浸式透明Statusbar狀態欄效果？

如下圖：狀態欄是指android手機頂部顯示手機狀態信息的位置。
android 自4.4開始新加入透明狀態欄功能，狀態欄可以自定義顏色背景，使titleBar能夠和狀態欄融為一體，增加沉浸感。

如上圖Flutter狀態欄預設為黑色半透明，那麼如何去掉這個狀態欄的黑色半透明背景色，讓其和標題欄顏色一致，通欄沉浸式，實現如下圖效果呢？且繼續看下文講述。

在flutter項目目錄下找到android主入口頁面MainActivity.kt或MainActivity.java，判斷一下版本號然後將狀態欄顏色修改設置成透明，因為他本身是黑色半透明。

MainActivity.kt路徑： android\app\src\main\kotlin\com\example\flutter_app\MainActivity.kt 

在MainActivity.kt頁面新增如下高亮代碼片段

package com.example.flutter_app

import androidx.annotation.NonNull;
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugins.GeneratedPluginRegistrant

//引入
import android.os.Build;
import android.os.Bundle;

class MainActivity: FlutterActivity() {
    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine);
    }

    //設置狀態欄沉浸式透明（修改flutter狀態欄黑色半透明為全透明）
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            window.statusBarColor = 0
        }
    }
}

註意：flutter項目預設是使用Kotlin語言

Kotlin 是一種在 Java 虛擬機上運行的靜態類型編程語言，被稱之為 Android 世界的Swift，由 JetBrains 設計開發並開源。
Kotlin 可以編譯成Java位元組碼，也可以編譯成 JavaScript，方便在沒有 JVM 的設備上運行。
在Google I/O 2017中，Google 宣佈 Kotlin 取代 Java 成為 Android 官方開發語言。
Kotlin詳情見：https://www.kotlincn.net/

 

flutter create flutter_app  命令創建flutter項目時，預設是Kotlin語言模式，如果想要修改成Java語言，則運行如下命令創建項目即可

flutter create -a java flutter_app 

 

如果是java語言模式下，修改沉浸式狀態欄方法和上面同理

MainActivity.java路徑： android\app\src\main\java\com\example\flutter_app\MainActivity.java 

在MainActivity.java頁面新增如下高亮代碼片段

package com.example.demo1;

import androidx.annotation.NonNull;
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.GeneratedPluginRegistrant;

// 引入
import android.os.Build;
import android.os.Bundle;

public class MainActivity extends FlutterActivity {
  @Override
  public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
    GeneratedPluginRegistrant.registerWith(flutterEngine);
  }

  // 設置狀態欄沉浸式透明（修改flutter狀態欄黑色半透明為全透明）
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
      getWindow().setStatusBarColor(0);
    }
  }
}

最後一步，去掉右上角banner提示

return MaterialApp(
    title: 'Flutter Demo',
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
        primarySwatch: Colors.green,
    ),
    home: MyHomePage(title: 'Flutter Demo App'),
    ...
);

 

  • Flutter中實現鹹魚底部導航凸起效果

如上圖： BottomNavigationBar 組件普通底部導航欄配置

int _selectedIndex = 0;
// 創建數組引入頁面
List pglist = [HomePage(), FindPage(), CartPage(), ZonePage(), UcenterPage(),];

...

Scaffold(
    body: pglist[_selectedIndex],
    
    // 抽屜菜單
    // drawer: new Drawer(),

    // 普通底部導航欄
    bottomNavigationBar: BottomNavigationBar(
        fixedColor: Colors.red,
        type: BottomNavigationBarType.fixed,
        elevation: 5.0,
        unselectedFontSize: 12.0,
        selectedFontSize: 18.0,
        items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
            BottomNavigationBarItem(icon: Icon(Icons.search), title: Text('Find')),
            BottomNavigationBarItem(icon: Icon(Icons.add), title: Text('Cart')),
            BottomNavigationBarItem(icon: Icon(Icons.photo_filter), title: Text('Zone')),
            BottomNavigationBarItem(icon: Icon(Icons.face), title: Text('Ucenter')),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
    ),
)

void _onItemTapped(int index) {
    setState(() {
        _selectedIndex = index;
    });
}

 

如上圖： BottomNavigationBar 組件仿鹹魚凸起導航欄配置

int _selectedIndex = 0;
// 創建數組引入頁面
List pglist = [HomePage(), FindPage(), CartPage(), ZonePage(), UcenterPage(),];

...

Scaffold(
    body: pglist[_selectedIndex],
    
    // 抽屜菜單
    // drawer: new Drawer(),

    // 普通底部導航欄
    bottomNavigationBar: BottomNavigationBar(
        fixedColor: Colors.red,
        type: BottomNavigationBarType.fixed,
        elevation: 5.0,
        unselectedFontSize: 12.0,
        selectedFontSize: 18.0,
        items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
            BottomNavigationBarItem(icon: Icon(Icons.search), title: Text('Find')),
            BottomNavigationBarItem(icon: Icon(null), title: Text('Cart')),
            BottomNavigationBarItem(icon: Icon(Icons.photo_filter), title: Text('Zone')),
            BottomNavigationBarItem(icon: Icon(Icons.face), title: Text('Ucenter')),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
    ),
    
    floatingActionButton: FloatingActionButton(
        backgroundColor: _selectedIndex == 2 ? Colors.red : Colors.grey,
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                Icon(Icons.add)
            ]
        ),
        onPressed: (){
            setState(() {
                _selectedIndex = 2;
            });
        },
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
)

void _onItemTapped(int index) {
    setState(() {
        _selectedIndex = index;
    });
}

 

如上圖： BottomAppBar 組件凸起凹陷導航欄配置

int _selectedIndex = 0;
// 創建數組引入頁面
List pglist = [HomePage(), FindPage(), CartPage(), ZonePage(), UcenterPage(),];

...

Scaffold(
    body: pglist[_selectedIndex],
    
    // 抽屜菜單
    // drawer: new Drawer(),

    // 底部凸起凹陷導航欄
    bottomNavigationBar: BottomAppBar(
        color: Colors.white,
        shape: CircularNotchedRectangle(),
        child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
                IconButton(
                    icon: Icon(Icons.home),
                    color: _selectedIndex == 0 ? Colors.red : Colors.grey,
                    onPressed: (){
                        _onItemTapped(0);
                    },
                ),
                IconButton(
                    icon: Icon(Icons.search),
                    color: _selectedIndex == 1 ? Colors.red : Colors.grey,
                    onPressed: (){
                        _onItemTapped(1);
                    },
                ),
                
                SizedBox(width: 50,),
                
                IconButton(
                    icon: Icon(Icons.photo_filter),
                    color: _selectedIndex == 3 ? Colors.red : Colors.grey,
                    onPressed: (){
                        _onItemTapped(3);
                    },
                ),
                IconButton(
                    icon: Icon(Icons.face),
                    color: _selectedIndex == 4 ? Colors.red : Colors.grey,
                    onPressed: (){
                        _onItemTapped(4);
                    },
                ),
            ],
        ),
    ),
)

void _onItemTapped(int index) {
    setState(() {
        _selectedIndex = index;
    });
}

夜深了，這次就分享到這裡，後續計劃使用flutter/dart開發一個實例項目，屆時再分享。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 13.JavaScript實現滑鼠左鍵拖拽效果
    實現滑鼠左鍵拖拽效果的兩種方式： 方式一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale= ...
  • this 去哪？
    this 去哪？ 本文寫於 2020 年 4 月 26 日 最後兩行函數的值為什麼不一樣？？？ 之前關於函數的文章里寫過了， 可以讓 和`obj.foo()`等價，那為什麼 this 指向不一樣？ 在學 React 的時候，很多人會發現有個很煩人的操作，就是在 裡面，需要 。 首先需要從函數的調用開 ...
  • 挑戰全網最幽默的Vuex系列教程：第四講 Vuex旗下的Action
    寫在前面 通過上一講「Vuex 旗下的 Mutation」，我們知道瞭如何去修改 State 的數據，而且只能通過 Mutation 去提交修改，另外還瞭解到了 Mutation 必須是同步函數，那麼如果需求當中必須要用到非同步函數怎麼辦？ 好辦，那就輪到 Action 上場了。 簡單介紹 Actio ...
  • 自定義Antd Pro 預設元素
    "概要" "通用元素" "修改的方式" "主頁面" "標簽上的圖標" "logo 和 系統名稱" "footer 的配置" "loading 頁面" "最終效果" 概要 使用 Antd Pro 來開發前端項目時, 生成的項目模板中, 一些基本的元素都是和 Antd Pro 項目相關的. 比如, 系統 ...
  • JS中的基本類型和引用類型
    內置類型 JS 中七種內置類型（null，undefined，boolean，number，string，symbol，object）又分為兩大類型 兩大類型： 基本類型： ，`undefined boolean number string symbol` 引用類型Object： ， ， ， 等 存 ...
  • 前端程式員的進階
    前言 如何成為一名優秀的前端工程師 1. 要有自己的前端知識體系 1. 逐步完善自己的三大能力，首先是編程能力，其次是工程能力，最後是架構能力 1. 在工作中完善自己的領域知識，如教育類，電商類等等 "構建自己的知識體系" 構建自己的知識體系，就是就是把一些零碎的，分散的，相對獨立的知識概念或者觀點 ...
  • JS的賦值與深淺拷貝實例
    賦值 基本類型： 傳值，在棧記憶體中的數據發生數據變化的時候，系統會自動為新的變數分配一個新的之值在棧記憶體中，兩個變數相互獨立，互不影響的 引用類型： 傳址，只改變指針的指向，指向同一個對象，兩個變數相互干擾 淺拷貝 對於基本類型，淺拷貝是對值的複製，拷貝前後對象的基本數據類型互不影響 對於引用類型來 ...
  • 系統模塊劃分設計的思考
    系統模塊劃分設計的思考 前言 首先明確一下，這裡所說的系統模塊劃分，是針對client，service，common這樣的技術劃分，而不是針對具體業務的模塊劃分。避免由於歧義，造成你的時間浪費。 直接原因 公司內部某技術團隊，在引用我們系統的client包時，啟動失敗。 失敗原因是由於client下 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類