首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xiaoyan2017
V2EX  ›  程序员

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

  •  
  •   xiaoyan2017 · 76 天前 · 1472 次点击
    这是一个创建于 76 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    7 条回复    2020-04-28 09:15:36 +08:00
    putaozhenhaochi
        1
    putaozhenhaochi   76 天前 via Android
    默认语言不是 Dart 吗
    wobuhuicode
        2
    wobuhuicode   76 天前
    @putaozhenhaochi 这里说的是原生层的代码。话说搞状态条 还真是安卓恒久不变的话题……国产手机的私有 API 也要考虑到吧
    CommandZi
        3
    CommandZi   76 天前
    写 Dart 的是不是都有一个超高的显示器?
    treizeor
        4
    treizeor   76 天前
    沉浸式只需要在 main()里面加入这段代码。不需要改原生
    ``` if (Platform.isAndroid) {
    SystemUiOverlayStyle systemUiOverlayStyle =
    SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
    }```
    dingyp
        5
    dingyp   76 天前
    @treizeor 正解
    NewTab12138
        6
    NewTab12138   76 天前
    @treizeor 纯 flutter 项目确实是这样,但是如果你是作为插件集成到原生项目就不止写这么多了
    kazeik
        7
    kazeik   75 天前
    沉浸式状态栏用 4 楼的即可,还到原生端改代码,兼容性就差了。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   945 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 19:29 · PVG 03:29 · LAX 12:29 · JFK 15:29
    ♥ Do have faith in what you're doing.