android底部导航栏中间凸起,Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标...
仿闲鱼底部导航栏带有中间凸起图标
刚接触Flutter,需要实现一个类似闲鱼APP的底部导航栏的实现
要实现的效果如图:
好的,下面开始上代码了:
一. 在main.dart文件中,定义APP的入口信息
import 'package:flutter/material.dart';
import 'pages/MainPage.dart';
void main() => runApp(LightLanguageClient());
class LightLanguageClient extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Demo',
theme: ThemeData(
primarySwatch: Colors.blue
),
home: MainPage(),
);
}
}
二. 我们需要定义三个页面,功能类似Android的Fragment,分别为HomePage.dart, AssistantPage.dart,MinePage.dart, 这三个页面的代码很简单:
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget{
@override
State createState() {
return _HomePageState();
}
}
class _HomePageState extends State{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Text('这是首页'),
),
),
);
}
}
这个三个页面的代码都一样就没有都贴出来
三.现在我们就需要去创建我们的主页了,"MainPage.dart"文件
第一步,我们先去实现一个最简单的底部导航栏
import 'package:flutter/material.dart';
import 'HomePage.dart';
import 'AssistantPage.dart';
import 'MinePage.dart';
class MainPage extends StatefulWidget {
@override
State createState() {
return _MainPage();
}
}
class _MainPage extends State with SingleTickerProviderStateMixin {
PageController pageController;
int page = 0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: new PageView(
children: [HomePage(), AssistantPage(), MinePage()],
controller: pageController,
onPageChanged: onPageChanged,
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
BottomNavigationBarItem(icon: Icon(Icons.assessment), title: Text('助手')),
BottomNavigationBarItem(icon: Icon(Icons.person), title: Text('我的')),
],
onTap: onTap,
currentIndex: page,
),
));
}
@override
void initState() {
super.initState();
pageController = PageController(initialPage: this.page);
}
@override
void dispose() {
pageController.dispose();
super.dispose();
}
void onTap(int index) {
pageController.animateToPage(index,
duration: const Duration(milliseconds: 300), curve: Curves.ease);
}
void onPageChanged(int page) {
setState(() {
this.page = page;
});
}
}
在MainPage.dart中我们用到了几个控件:
1. PageView : 此控件类似Android的ViewPager,把之前创建的3个页面一次添加进去,之后需要给PageView设置一个控制器-PageController,给PageView设置一个onPageChanged页面切换监听方法,此方法的功能类似与Android中ViewPager中的OnPageChangeListener里的监听方法
2. BottomNavigationBar :此控件主要用于配置底部导航栏,详细用法请参见官方文档,在此控件的使用中,我们需要设置三个属性,
items: 添加底部导航栏的每个Item
onTap: 为底部导航栏设置点击事件
currentIndex: 为底部导航设置当前选中项
3. BottomNavigationBarItem: 此控件是底部导航栏的Item
至此,我们实现了最基本的底部导航栏的实现,效果图如下:
四.我们要实现仿闲鱼的底部导航栏,需要重构一下底部导航栏,
重构方案:
1.把中间的文字去掉
2.在BottomNavigationBar控件的中上的位置放入一个图片
3.重构底部导航的事件方法
4.禁止PageView的滑动事件
现在开始重构:
1.要在BottomNavigationBar上面覆盖一个图片,我们需要用到一个布局Widget---Stack,类似于Framelayout
class _MainPage extends State with SingleTickerProviderStateMixin {
PageController pageController;
int page = 0;
//添加图片地址,需要动态更换图片
String bigImg = 'images/home_green.png';
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: new PageView(
children: [HomePage(), AssistantPage(), MinePage()],
controller: pageController,
onPageChanged: onPageChanged,
),
//重构bottomNavigationBar
bottomNavigationBar: Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: BottomNavigationBar(
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
BottomNavigationBarItem(icon: Icon(Icons.assessment), title: Text('')),
BottomNavigationBarItem(icon: Icon(Icons.person), title: Text('我的')),
],
onTap: onTap,
currentIndex: page,
),
),
Align(
alignment: Alignment.bottomCenter,
child: InkWell(
child: new Image.asset(bigImg,width: 80.0,height: 80.0,),
onTap:onBigImgTap,
),
)
],
)
));
}
@override
void initState() {
super.initState();
pageController = PageController(initialPage: this.page);
}
@override
void dispose() {
pageController.dispose();
super.dispose();
}
//修改bottomNavigationBar的点击事件
void onTap(int index) {
if (index != 1) {
setState(() {
this.bigImg = 'images/home_green.png';
});
}
pageController.animateToPage(index,
duration: const Duration(milliseconds: 300), curve: Curves.ease);
}
//添加图片的点击事件
void onBigImgTap() {
setState(() {
this.page = 1;
this.bigImg = 'images/icon_home.png';
onTap(1);
});
}
void onPageChanged(int page) {
setState(() {
this.page = page;
});
}
}
重构完成之后,效果图如下,我们发现这并不是我们想要的,底部导航栏我们是实现了,但是PageView被遮盖了
PageView被遮盖的解决办法,我们给Stack添加一个可以指定高度的父级--Container,修改的代码如下:
bottomNavigationBar: Container(
height: 100.0,
child: Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('首页')),
BottomNavigationBarItem(
icon: Icon(Icons.accessibility_new), title: Text('')),
BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text('我的')),
],
onTap: onTap,
currentIndex: page,
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: InkWell(
child: new Image.asset(
bigImg,
width: 80.0,
height: 80.0,
),
onTap: onBigImgTap,
),
)),
],
),
)
然后我们需要禁止PageView的滑动,我们只需要在给PageView设置一个属性就好了
physics: NeverScrollableScrollPhysics(),
在运行Flutter项目的时候出现了一个问题,运行时会出现一段时间的白屏,解决办法:
解决方案很简单,Android原生的白屏问题可以通过为 Launcher Activity 设置 windowBackground 解决,而 Flutter 也是基于此办法,同时优化了 Flutter 初始化阶段的白屏问题(覆盖一个launchView),只用两步设置便能解决 Flutter 中白屏问题。
在项目的 android/app/src/main/res/mipmap-xhdpi/ 目录下添加闪屏图片;
打开 android/app/src/main/res/drawable/launch_background.xml 文件,这个文件就是闪屏的背景文件,具体如何设置可以查阅 Android Drawable,我在 demo 中的设置如下:
android:bottom="84dp">
android:src="@mipmap/launch_image" />
如此一来,我们就完成了,文章开始提出的需求了.
刚开始接触Flutter,代码写的有些混乱,可能有些问题考虑不是很深入,有不足之处,还请各位大佬指出
推荐阅读
android底部导航栏中间凸起,Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标...相关推荐
- 闲鱼底部tab android,Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标
image 霸图镇楼 仿闲鱼底部导航栏带有中间凸起图标 需求情景: 需要实现一个类似闲鱼APP的底部导航栏的实现 要实现的效果如图 image 好的,下面开始上代码了: 一. 在main.dart文件 ...
- Flutter仿闲鱼底部导航栏实现
概述 本文主要实现一个仿闲鱼底部导航栏实现,这种效果在项目中经常用到,接下来我们就从头开始实现. 仿闲鱼底部导航栏 要实现闲鱼底部导航栏的效果我们需要使用到BottomNavigationBar和Fl ...
- 仿闲鱼 底部菜单html,GitHub - 494293346/rotateMenu: 仿闲鱼首页,“底部加号弹出菜单选项” 界面,动画效果可能跟闲鱼有点不一样...
rotateMenu 仿闲鱼首页,"底部加号弹出菜单选项" 界面,动画效果可能跟闲鱼有点不一样 ##简介 仿闲鱼首页,"底部加号弹出菜单选项" 界面,动画效果可 ...
- Flutter FloatingActionButton 及仿闲鱼的发布按钮
一.FloatingActionButton 二.模仿闲鱼的发布按钮 1.配置 BottomNavigationBar 2.创建一个符合样式的 FloatingActionButton 3.将 flo ...
- 仿闲鱼 底部菜单html,最快、最简单的实现底部标签导航(仿闲鱼)
[实例简介] 效果图及详情http://blog.csdn.net/chinese_zhang/article/details/50991573 [实例截图] [核心代码] LLRiseTabBar- ...
- Flutter学习笔记(10)--容器组件、图片组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...
- Flutter学习笔记(18)--Drawer抽屉组件
如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件 Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板.通常Drawer是和ListView组 ...
- Flutter学习笔记 —— 完成一个简单的新闻展示页
Flutter学习笔记 -- 完成一个简单的新闻展示页 前言 思路分析 案例代码 结束语 上图 前言 刚学Flutter不久,今天我们来看看如何使用 Container & ListView实 ...
- 【学习笔记】ROS-移动机器人导航相关
[学习笔记]ROS-移动机器人导航相关 一.定位 二.导航 1. move_base现存问题 三.可视化 1. Rviz显示机器人运动轨迹方法: 一.定位 二.导航 1. move_base现存问题 ...
最新文章
- centos 打包某个目录_Linux目录基础,带你了解Linux神秘面纱
- eclipse和myeclipse中如何关闭自动补全括号,花括号,双引号等功能
- 【javascript】checkbox——类似邮箱全选功能
- ADO之connection
- Android应用删除顶部标题栏
- 浏览器linux安装失败,LINUX 上安装WAS 提示没有浏览器问题
- FreeRTOS内核实现01:列表与列表项实现
- 力扣-5773(243周赛)插入后的最大值
- 网上的一个PHP分页函数,测试可用
- 正交试验案例分析全步骤
- win10系统bat隐藏运行的cmd窗口
- 小波变换matlab程序,图像小波变换原理_图像小波变换的matlab实现详解
- Android5 supersu,最新的安卓5.1.1 ROOT教程(不需要刷第三方内核)
- 冰山理论(理解笔记)
- 从动物纪录片中所学所得
- 昊海微信拼团php,最新微信昊海拼团系统独立版源码分享,微信团购关注送红包送优惠卷功能,附说明文档...
- 事件10001,10016,10037
- /etc/profile 和 /etc/profile.d/ 的区别
- 【2019-09-04】恐惧就是进化的暗示
- 新寓言——没有窝的猪
热门文章
- ubuntu下访问支付宝官网,安装安全控件
- 内置MOS DC-DC 升压IC
- EC2386电压3.3V SOT23-3封装同步升压IC
- 穿上资本小棉袄的00后社交,到底是什么鬼?
- 内部计算机是否可以存储器,计算机基本理论基础知识总汇.
- linux检查防病毒系统,[操作系统-Linux]常用的防病毒软件
- VMware与主机文件共享
- 股票费用计算机,【股票买卖收益的计算器】股票买卖费用怎么算?_千聊
- ansys参数化编程与命令手册_当结构设计遇到遗传算法应用ANSYS和MATLAB联合仿真优化设计探索(前传)...
- 本地计算机策略无法建立管理单元,小白教你解决mmc无法创建管理单元