如何實(shí)現(xiàn)Flutter沉浸式狀態(tài)欄/AppBar導(dǎo)航欄/仿咸魚底部凸起導(dǎo)航欄

小編這次要給大家分享的是如何實(shí)現(xiàn)Flutter沉浸式狀態(tài)欄/AppBar導(dǎo)航欄/仿咸魚底部凸起導(dǎo)航欄，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

創(chuàng)新互聯(lián)主營正安網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP開發(fā)公司,正安h5重慶小程序開發(fā)搭建,正安網(wǎng)站營銷推廣歡迎正安等地區(qū)企業(yè)咨詢

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

如上圖Flutter狀態(tài)欄默認(rèn)為黑色半透明，那么如何去掉這個(gè)狀態(tài)欄的黑色半透明背景色，讓其和標(biāo)題欄顏色一致，通欄沉浸式，實(shí)現(xiàn)如下圖效果呢？且繼續(xù)看下文講述。

如何實(shí)現(xiàn)Flutter沉浸式狀態(tài)欄/AppBar導(dǎo)航欄/仿咸魚底部凸起導(dǎo)航欄

在flutter項(xiàng)目目錄下找到android主入口頁面MainActivity.kt或MainActivity.java，判斷一下版本號然后將狀態(tài)欄顏色修改設(shè)置成透明，因?yàn)樗旧硎呛谏胪该鳌?/p>

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

如何實(shí)現(xiàn)Flutter沉浸式狀態(tài)欄/AppBar導(dǎo)航欄/仿咸魚底部凸起導(dǎo)航欄

在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);
 }

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

注意：flutter項(xiàng)目默認(rèn)是使用Kotlin語言

Kotlin 是一種在 Java 虛擬機(jī)上運(yùn)行的靜態(tài)類型編程語言，被稱之為 Android 世界的Swift，由 JetBrains 設(shè)計(jì)開發(fā)并開源。
Kotlin 可以編譯成Java字節(jié)碼，也可以編譯成 JavaScript，方便在沒有 JVM 的設(shè)備上運(yùn)行。
在Google I/O 2017中，Google 宣布 Kotlin 取代 Java 成為 Android 官方開發(fā)語言。
Kotlin詳情見：https://www.kotlincn.net/

flutter create flutter_app 命令創(chuàng)建flutter項(xiàng)目時(shí)，默認(rèn)是Kotlin語言模式，如果想要修改成Java語言，則運(yùn)行如下命令創(chuàng)建項(xiàng)目即可

flutter create -a java flutter_app

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

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);
 }

 // 設(shè)置狀態(tài)欄沉浸式透明（修改flutter狀態(tài)欄黑色半透明為全透明）
 @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: true,
 theme: ThemeData(
 primarySwatch: Colors.green,
 ),
 home: MyHomePage(title: 'Flutter Demo App'),
 ...
);

◆ Flutter中實(shí)現(xiàn)咸魚底部導(dǎo)航凸起效果

如何實(shí)現(xiàn)Flutter沉浸式狀態(tài)欄/AppBar導(dǎo)航欄/仿咸魚底部凸起導(dǎo)航欄

如上圖：BottomNavigationBar組件普通底部導(dǎo)航欄配置

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

...

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

 // 普通底部導(dǎo)航欄
 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;
 });
}

如何實(shí)現(xiàn)Flutter沉浸式狀態(tài)欄/AppBar導(dǎo)航欄/仿咸魚底部凸起導(dǎo)航欄

如上圖：BottomNavigationBar組件仿咸魚凸起導(dǎo)航欄配置

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

...

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

 // 普通底部導(dǎo)航欄
 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 &#63; 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;
 });
}

如何實(shí)現(xiàn)Flutter沉浸式狀態(tài)欄/AppBar導(dǎo)航欄/仿咸魚底部凸起導(dǎo)航欄

如上圖：BottomAppBar組件凸起凹陷導(dǎo)航欄配置

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

...

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

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

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

看完這篇關(guān)于如何實(shí)現(xiàn)Flutter沉浸式狀態(tài)欄/AppBar導(dǎo)航欄/仿咸魚底部凸起導(dǎo)航欄的文章，如果覺得文章內(nèi)容寫得不錯(cuò)的話，可以把它分享出去給更多人看到。

分享名稱：如何實(shí)現(xiàn)Flutter沉浸式狀態(tài)欄/AppBar導(dǎo)航欄/仿咸魚底部凸起導(dǎo)航欄
標(biāo)題網(wǎng)址：http://aaarwkj.com/article12/iidsgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、云服務(wù)器、企業(yè)建站、品牌網(wǎng)站制作、虛擬主機(jī)、營銷型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

如何實(shí)現(xiàn)Flutter沉浸式狀態(tài)欄/AppBar導(dǎo)航欄/仿咸魚底部凸起導(dǎo)航欄