flutter 通栏沉浸状态条|flutter 自定义底部凸起导航栏

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
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。