Flutter沉浸式狀態(tài)欄/AppBar導(dǎo)航欄/仿咸魚(yú)底部凸起導(dǎo)航欄效果
如下圖：狀態(tài)欄是指android手機(jī)頂部顯示手機(jī)狀態(tài)信息的位置。
android 自4.4開(kāi)始新加入透明狀態(tài)欄功能，狀態(tài)欄可以自定義顏色背景，使titleBar能夠和狀態(tài)欄融為一體，增加沉浸感。
如上圖Flutter狀態(tài)欄默認(rèn)為黑色半透明，那么如何去掉這個(gè)狀態(tài)欄的黑色半透明背景色，讓其和標(biāo)題欄顏色一致，通欄沉浸式，實(shí)現(xiàn)如下圖效果呢？且繼續(xù)看下文講述。
在flutter項(xiàng)目目錄下找到android主入口頁(yè)面MainActivity.kt或MainActivity.java，判斷一下版本號(hào)然后將狀態(tài)欄顏色修改設(shè)置成透明，因?yàn)樗旧硎呛谏胪该鳌?/p>
MainActivity.kt路徑：android\app\src\main\kotlin\com\example\flutter_app\MainActivity.kt
在MainActivity.kt頁(yè)面新增如下高亮代碼片段
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?) {
super.onCreate(savedInstanceState);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
window.statusBarColor = 0
}
}
}
注意：flutter項(xiàng)目默認(rèn)是使用Kotlin語(yǔ)言
Kotlin 是一種在 Java 虛擬機(jī)上運(yùn)行的靜態(tài)類(lèi)型編程語(yǔ)言，被稱(chēng)之為 Android 世界的Swift，由 JetBrains 設(shè)計(jì)開(kāi)發(fā)并開(kāi)源。
Kotlin 可以編譯成Java字節(jié)碼，也可以編譯成 JavaScript，方便在沒(méi)有 JVM 的設(shè)備上運(yùn)行。
在Google I/O 2017中，Google 宣布 Kotlin 取代 Java 成為 Android 官方開(kāi)發(fā)語(yǔ)言。
Kotlin詳情見(jiàn)：https://www.kotlincn.net/
flutter create flutter_app 命令創(chuàng)建flutter項(xiàng)目時(shí)，默認(rèn)是Kotlin語(yǔ)言模式，如果想要修改成Java語(yǔ)言，則運(yùn)行如下命令創(chuàng)建項(xiàng)目即可
flutter create -a java flutter_app
如果是java語(yǔ)言模式下，修改沉浸式狀態(tài)欄方法和上面同理
MainActivity.java路徑：android\app\src\main\java\com\example\flutter_app\MainActivity.java
在MainActivity.java頁(yè)面新增如下高亮代碼片段
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)咸魚(yú)底部導(dǎo)航凸起效果
如上圖：BottomNavigationBar組件普通底部導(dǎo)航欄配置
int _selectedIndex = 0;
// 創(chuàng)建數(shù)組引入頁(yè)面
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;
});
}
如上圖：BottomNavigationBar組件仿咸魚(yú)凸起導(dǎo)航欄配置
int _selectedIndex = 0;
// 創(chuàng)建數(shù)組引入頁(yè)面
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 ? 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組件凸起凹陷導(dǎo)航欄配置
int _selectedIndex = 0;
// 創(chuàng)建數(shù)組引入頁(yè)面
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 ? 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;
});
}
夜深了，這次就分享到這里，后續(xù)計(jì)劃使用flutter/dart開(kāi)發(fā)一個(gè)實(shí)例項(xiàng)目，屆時(shí)再分享。
到此這篇關(guān)于Flutter沉浸式狀態(tài)欄/AppBar導(dǎo)航欄/仿咸魚(yú)底部凸起導(dǎo)航欄效果的文章就介紹到這了,更多相關(guān)Flutter沉浸式狀態(tài)欄導(dǎo)航欄 仿咸魚(yú)底部凸起導(dǎo)航內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Android 使用Glide加載網(wǎng)絡(luò)圖片等比例縮放的實(shí)現(xiàn)方法
這篇文章主要介紹了Android 使用Glide加載網(wǎng)絡(luò)圖片等比例縮放的實(shí)現(xiàn)方法,需要的朋友可以參考下2018-08-08
Android編程獲取網(wǎng)絡(luò)時(shí)間實(shí)例分析
這篇文章主要介紹了Android編程獲取網(wǎng)絡(luò)時(shí)間,結(jié)合實(shí)例形式對(duì)比分析了Android通過(guò)訪(fǎng)問(wèn)網(wǎng)絡(luò)及通過(guò)GPS獲取網(wǎng)絡(luò)時(shí)間的具體步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-01-01
Android Camera2采集攝像頭原始數(shù)據(jù)
這篇文章主要介紹了Android Camera2采集攝像頭原始數(shù)據(jù)并進(jìn)行手工預(yù)覽的功能實(shí)現(xiàn)原理以及代碼分析，需要的朋友學(xué)習(xí)下吧。2018-02-02
Android部分手機(jī)拍照后獲取的圖片被旋轉(zhuǎn)問(wèn)題的解決方法
這篇文章主要為大家詳細(xì)介紹了Android部分手機(jī)拍照后獲取的圖片被旋轉(zhuǎn)問(wèn)題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
Android webView如何輸出自定義網(wǎng)頁(yè)
這篇文章主要介紹了Android webView如何輸出自定義網(wǎng)頁(yè),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
這篇文章主要為大家詳細(xì)介紹了Android自定義控件屬性,需要的朋友可以參考下2016-02-02
Android實(shí)現(xiàn)listview動(dòng)態(tài)加載數(shù)據(jù)分頁(yè)的兩種方法
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)listview動(dòng)態(tài)加載的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要為大家詳細(xì)介紹了android自定義Dialog彈框和背景陰影顯示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
21天學(xué)習(xí)android開(kāi)發(fā)教程之MediaPlayer
21天學(xué)習(xí)android開(kāi)發(fā)教程之MediaPlayer，MediaPlayer可以播放音頻和視頻，操作相對(duì)簡(jiǎn)單，感興趣的小伙伴們可以參考一下2016-02-02
Android 出現(xiàn)問(wèn)題 Gradle
這篇文章主要介紹了Android 出現(xiàn)問(wèn)題 Gradle "xxx" project refresh failed解決辦法的相關(guān)資料,需要的朋友可以參考下2017-04-04