flutter 底部bottomNavigationBar凸起效果
概要
最近在做flutter 的时候,之前看到想实现 底部导航栏中间按钮 凸起效果, 最近想做又突然找不到方案了,因此记录下这里的实现方式。
预览效果
代码
主要使用 BottomAppBar 组建,以及配合FloatingActionButton ,具体全部代码如下:
import 'package:flutter/material.dart';
import 'package:flutter_app/src/pages/KBRandomWords.dart';
import "package:flutter_app/src/pages/KBWidgetPage.dart";
import 'kb_movie_review.dart';
import 'KBLoginPage.dart';
import 'src/widgets/cookbook/SnackBarDemo.dart'; class KBHome2 extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _KBHomeState2();
}
} class _KBHomeState2 extends State<KBHome2> {
int _currentIndex = 0; List<Widget> _pages; @override
void initState() {
super.initState();
print("Home InitStatus");
_pages = [
new RandomWords(
key: Key("random"),
),
new KBMovieReview(key: Key("movie")),
new KBLoginPage(),
new KBWidgetPage(
key: Key("widget"),
),
];
} @override
void dispose() {
super.dispose();
_pageController.dispose();
} var _pageController = PageController(initialPage: 0); @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("测试抽屉"),
),
// body: _pages[_currentIndex], // 只是这样写会导致在每次切换的时候 都rebuild 子控件
body: PageView.builder(
controller: _pageController,
onPageChanged: _pageChanged,
itemCount: _pages.length,
itemBuilder: (context, index) => _pages[index]), floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(
Icons.add,
color: Colors.white,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, bottomNavigationBar: BottomAppBar( color: Colors.red,
shape: CircularNotchedRectangle(),
child: Padding(
padding: EdgeInsets.fromLTRB(0, 6, 0, 6),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
GestureDetector(
onTap: () {
onTap(0);
},
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.home, color: getColor(0)),
Text("首页", style: TextStyle(color: getColor(0)))
],
)),
GestureDetector(
onTap: () {
onTap(1);
},
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.forum, color: getColor(1)),
Text("论坛", style: TextStyle(color: getColor(1)))
],
)),
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(
Icons.home,
color: Colors.transparent,
),
Text("发布", style: TextStyle(color: Color(0xFFEEEEEE)))
],
),
GestureDetector(
onTap: () {
onTap(2);
},
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.mail, color: getColor(2)),
Text("消息", style: TextStyle(color: getColor(2)))
],
)),
GestureDetector(
onTap: () {
onTap(3);
},
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.person, color: getColor(3)),
Text("我的", style: TextStyle(color: getColor(3)))
],
))
],
),
),
),
);
} Color getColor(int value) {
return this._currentIndex == value ? Theme.of(context).cardColor : Color(0XFFBBBBBB);
} void _pageChanged(int index) {
setState(() {
if (_currentIndex != index) _currentIndex = index;
});
} void onTap(int index) {
// _pageController.jumpToPage(index);
_pageController.animateToPage(index,
duration: const Duration(milliseconds: 100), curve: Curves.easeOutSine);
}
}
上面的pages 只要替换成自己的即可,
这里主要使用到了 以下代码实现:
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(
Icons.add,
color: Colors.white,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
flutter 底部bottomNavigationBar凸起效果的更多相关文章
- [css]演示:纯CSS实现的右侧底部简洁悬浮效果
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- Flutter 底部导航栏bottomNavigationBar
实现一个底部导航栏,包含3到4个功能标签,点击对应的导航标签可以切换到对应的页面内容,并且页面抬头显示的内容也会跟着改变. 实际上由于手机屏幕大小的限制,底部导航栏的功能标签一般在3到5个左右,如果太 ...
- 23Flutter FloatingActionButton实现类似闲鱼App底部导航凸起按钮:
/* 一.Flutter FloatingActionButton介绍 FloatingActionButton简称FAB,可以实现浮动按钮,也可以实现类型闲鱼app的底部凸起导航. child:子视 ...
- flutter 底部按钮切换页面
界面如图: 我们就从上节里面的app.dartt修改 目录:lib lib/story 其它两个目录一样. 图片配置一下 app.dart import 'package:flutter/materi ...
- 09 Flutter底部Tab切换保持页面状态的几种方法
IndexedStack:保此所有页面的状态: AutomaticKeepAliveClientMixin:保此部分页面的状态: 修改的页面代码: 页面效果: Tabs.dart import 'pa ...
- FloatingActionButton 实现类似 闲鱼 App 底部导航凸起按钮
一.Flutter FloatingActionButton 介绍 FloatingActionButton 简称 FAB,可以实现浮动按钮,也可以实现类似闲鱼 app 的地步凸起导航 child ...
- Fragment实现底部选项卡切换效果
现在很多APP的样式都是底部选项卡做为首页的,实现这样的效果,我们一般有这样几种方式,第一,最屌丝的做法,我直接自定义选项卡视图,通过监听选项卡视图,逻辑控制内容页的切换,这样做的想法一般是反正这几个 ...
- vue2.0实现底部导航切换效果
使用vue2.0写移动端的时候,经常会写底部导航效果,点击切换路由效果,实现图片和文字颜色切换.vue2.0也提供了很多ul框架供我们实现效果,今天就用原生的实现一个底部导航切换,直接上代码: 效果图 ...
- Flutter仿掘金点赞效果
老孟导读:今天分享一下如何实现掘金点赞效果,这不仅仅是一篇技术文章,还是一篇解决问题思路的文章,遇到一个需求时,如何拆分需求,然后一步一步实现,这个过程比单纯的技术(此文)更有含金量. 先来看一下掘金 ...
随机推荐
- Jackson环境安装设置
本地环境设置 由于Jackson是基于Java编程语言的,所以需要设置Java开发环境,这里介绍如何下载安装设置Java.请按照以下步骤来设置环境. Java SE是免费的,点击下载链接:下载Java ...
- swagger2 注解说明 ( @ApiImplicitParams )
@Api:用在请求的类上,表示对类的说明 tags="说明该类的作用,可以在UI界面上看到的注解" value="该参数没什么意义,在UI界面上也看到,所以不需要配置&q ...
- CentOS 7 用 yum 安装 Nginx
在 CentOS 7 中,直接使用 yum 安装 Nignx 会提示无下载源.因此,需要添加 Nginx 的下载源到 yum: sudo rpm -Uvh http://nginx.org/packa ...
- centos7 安装KDE
下载安装了centos7 64位系统之后.初始化安装的是GNOME桌面系统.因为是按照鸟哥的Linux在学习,所以需要安装kde. 首先需要root权限. 打开终端. 输入su root密码.进入ro ...
- 笔记49 在Spittr应用中整合Hibernate
在前边构建的Spittr应用中整合Hibernate 由于最近所学的hibernate都是使用xml方式进行配置的,所以在与以Java方式配置的Spittr应用结合时就会出现一些小问题,在此进行总结. ...
- Yii2 : Active Record add Not In condition
$query = MyModel::find()->where(['not in','attribute',$array]); 參考 Yii2 : Active Record add Not I ...
- d3操作svg路径动画,及dom移动
图片跟随路径循环运动,dom也跟着路径运动(利用实时获取坐标位置的方法,改变transform) 1,准备路径 a,自己脑补路径 b,在ps上画好,然后在保存成png-24图片,背景透明,在网站htt ...
- jq-demo-2种吸顶效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- prufer序列的性质及相关结论
- nacos配置服务入门
1.nacos服务端部署 参见官方文档:https://nacos.io/zh-cn/docs/quick-start.html 2.nacos配置中心功能使用 在pol文件中添加依赖: 在启动类中使 ...