小編這次要給大家分享的是如何實(shí)現(xiàn)Flutter沉浸式狀態(tài)欄/AppBar導(dǎo)航欄/仿咸魚底部凸起導(dǎo)航欄,文章內(nèi)容豐富,感興趣的小伙伴可以來(lái)了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。
創(chuàng)新互聯(lián)主營(yíng)正安網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP開(kāi)發(fā)公司,正安h5重慶小程序開(kāi)發(fā)搭建,正安網(wǎng)站營(yíng)銷推廣歡迎正安等地區(qū)企業(yè)咨詢
如下圖:狀態(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)類型編程語(yǔ)言,被稱之為 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)咸魚底部導(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組件仿咸魚凸起導(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;
});
}看完這篇關(guān)于如何實(shí)現(xiàn)Flutter沉浸式狀態(tài)欄/AppBar導(dǎo)航欄/仿咸魚底部凸起導(dǎo)航欄的文章,如果覺(jué)得文章內(nèi)容寫得不錯(cuò)的話,可以把它分享出去給更多人看到。
分享名稱:如何實(shí)現(xiàn)Flutter沉浸式狀態(tài)欄/AppBar導(dǎo)航欄/仿咸魚底部凸起導(dǎo)航欄
標(biāo)題網(wǎng)址:http://chinadenli.net/article12/iidsgc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應(yīng)網(wǎng)站、云服務(wù)器、企業(yè)建站、品牌網(wǎng)站制作、虛擬主機(jī)、營(yíng)銷型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)