Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果

作者：黄晓敏3023 | 2021-11-05 17:05

这篇文章主要介绍了Flutter沉浸式状态栏AppBar导航栏仿咸鱼底部凸起导航栏效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

如下图：状态栏是指android手机顶部显示手机状态信息的位置。
android 自4.4开始新加入透明状态栏功能，状态栏可以自定义颜色背景，使titleBar能够和状态栏融为一体，增加沉浸感。

如上图Flutter状态栏默认为黑色半透明，那么如何去掉这个状态栏的黑色半透明背景色，让其和标题栏颜色一致，通栏沉浸式，实现如下图效果呢？且继续看下文讲述。

在flutter项目目录下找到android主入口页面MainActivity.kt或MainActivity.java，判断一下版本号然后将状态栏颜色修改设置成透明，因为他本身是黑色半透明。

MainActivity.kt路径：android\app\src\main\kotlin\com\example\flutter_app\MainActivity.kt

在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语言

Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，被称之为 Android 世界的Swift，由 JetBrains 设计开发并开源。
Kotlin 可以编译成Java字节码，也可以编译成 JavaScript，方便在没有 JVM 的设备上运行。
在Google I/O 2017中，Google 宣布 Kotlin 取代 Java 成为 Android 官方开发语言。
Kotlin详情见：https://www.kotlincn.net/

flutter create flutter_app 命令创建flutter项目时，默认是Kotlin语言模式，如果想要修改成Java语言，则运行如下命令创建项目即可

flutter create -a java flutter_app

如果是java语言模式下，修改沉浸式状态栏方法和上面同理

MainActivity.java路径：android\app\src\main\java\com\example\flutter_app\MainActivity.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);
 }
 }
}

最后一步，去掉右上角banner提示

return MaterialApp(
 title: 'Flutter Demo',
 debugShowCheckedModeBanner: true,
 theme: ThemeData(
 primarySwatch: Colors.green,
 ),
 home: MyHomePage(title: 'Flutter Demo App'),
 ...
);

◆ 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(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组件仿咸鱼凸起导航栏配置

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: [
  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/dart开发一个实例项目，届时再分享。

到此这篇关于Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果的文章就介绍到这了,更多相关Flutter沉浸式状态栏导航栏仿咸鱼底部凸起导航内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

推荐阅读

程序员
如何使用HttpsUrlConnection而不是DefaultHttpClient

如何解决《如何使用HttpsUrlConnection而不是DefaultHttpClient》经验，为你挑选了3个好方法。 ... [详细]
程序员
使用RxAndroid安排

如何解决《使用RxAndroid安排》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何在Python中创建类的不同实例？

如何解决《如何在Python中创建类的不同实例？》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何使用.translate()从Python 3.x中的字符串中删除标点符号？

如何解决《如何使用.translate()从Python3.x中的字符串中删除标点符号？》经验，为你挑选了3个好方法。 ... [详细]
程序员
Jmeter MarshalException:错误编组参数

如何解决《JmeterMarshalException:错误编组参数》经验，为你挑选了0个好方法。 ... [详细]
程序员
C ++ JSON解串器

如何解决《C++JSON解串器》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何用CSS实现单行省略号

如何解决《如何用CSS实现单行省略号》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何让UITextView检测主题标签？

如何解决《如何让UITextView检测主题标签？》经验，为你挑选了2个好方法。 ... [详细]
程序员
删除重复项而不覆盖hashCode()

如何解决《删除重复项而不覆盖hashCode()》经验，为你挑选了1个好方法。 ... [详细]
程序员
为什么OpenCL工作组是三维的？

如何解决《为什么OpenCL工作组是三维的？》经验，为你挑选了1个好方法。 ... [详细]
程序员
BCNF分解算法说明

如何解决《BCNF分解算法说明》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何从PySpark中的map方法返回一个空(null？)项？

如何解决《如何从PySpark中的map方法返回一个空(null？)项？》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何将fmt.Print和log.Print保存到Golang中的同一文件中

如何解决《如何将fmt.Print和log.Print保存到Golang中的同一文件中》经验，为你挑选了1个好方法。 ... [详细]
程序员
处理开始但不显示窗口

如何解决《处理开始但不显示窗口》经验，为你挑选了0个好方法。 ... [详细]
程序员
Heroku Build失败:"node_modules已检入源代码管理"

如何解决《HerokuBuild失败:"node_modules已检入源代码管理"》经验，为你挑选了1个好方法。 ... [详细]
程序员
删除R中一组行中的某些行

如何解决《删除R中一组行中的某些行》经验，为你挑选了1个好方法。 ... [详细]
程序员
django视图从另一个应用程序渲染为模板

如何解决《django视图从另一个应用程序渲染为模板》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何在Python中以未知长度的列表迭代级联格式(在for循环中)？

如何解决《如何在Python中以未知长度的列表迭代级联格式(在for循环中)？》经验，为你挑选了1个好方法。 ... [详细]
程序员
从Python smtplib捕获调试输出

如何解决《从Pythonsmtplib捕获调试输出》经验，为你挑选了0个好方法。 ... [详细]
程序员
ColdFusion中的UTF-8标志

如何解决《ColdFusion中的UTF-8标志》经验，为你挑选了1个好方法。 ... [详细]

黄晓敏3023

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

RankList | 热门文章