这是一个创建于 1672 天前的主题，其中的信息可能已经有所发展或是发生改变。
Flutter 实现透明沉浸式状态栏
如下图：状态栏是指 android 手机顶部显示手机状态信息的位置。android 自 4.4 开始新加入透明状态栏功能，状态栏可以自定义颜色背景，使 titleBar 能够和状态栏融为一体，增加沉浸感。
如上图：Flutter 状态栏默认为黑色半透明，那么如何去掉这个状态栏的黑色半透明背景色，让其和标题栏颜色一致，通栏沉浸式，实现如下图效果呢？
需要在 flutter 项目目录下找到 android 主入口页面 MainActivity.kt 或 MainActivity.java，判断一下版本号然后将状态栏颜色修改设置成透明，因为他本身是黑色半透明。
修改 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 语言
在 Google I/O 2017 中，Google 宣布 Kotlin 取代 Java 成为 Android 官方开发语言。
通过 flutter create flutter\_app 命令创建 flutter 项目时，默认是 Kotlin 语言模式，如果想要修改成 Java 语言，则运行如下命令创建项目即可
flutter create -a java flutter\_app
如果是 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);
}
}
}
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(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 实现沉浸式状态栏+仿咸鱼底部凸起导航栏就分享完了，希望能有些帮助！💪💪
最后分享个 h5 实例： html5+jQ 仿微信聊天实例|语音|地图|摇一摇
作者：xiaoyan2017
链接： https://juejin.im/post/5ea659226fb9a03c85463f5c
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
 |
1
putaozhenhaochi 2020-04-27 14:46:18 +08:00 via Android
默认语言不是 Dart 吗
|
 |
2
wobuhuicode 2020-04-27 15:00:21 +08:00
@putaozhenhaochi 这里说的是原生层的代码。话说搞状态条 还真是安卓恒久不变的话题……国产手机的私有 API 也要考虑到吧
|
 |
3
CommandZi 2020-04-27 16:49:34 +08:00
写 Dart 的是不是都有一个超高的显示器？
|
 |
4
treizeor 2020-04-27 16:54:49 +08:00
沉浸式只需要在 main()里面加入这段代码。不需要改原生
``` if (Platform.isAndroid) { SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor: Colors.transparent); SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle); }``` |
 |
6
NewTab12138 2020-04-27 17:40:43 +08:00
@treizeor 纯 flutter 项目确实是这样,但是如果你是作为插件集成到原生项目就不止写这么多了
|
 |
7
kazeik 2020-04-28 09:15:36 +08:00
沉浸式状态栏用 4 楼的即可，还到原生端改代码，兼容性就差了。
|
Select Language