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仿掘金点赞效果
老孟导读:今天分享一下如何实现掘金点赞效果,这不仅仅是一篇技术文章,还是一篇解决问题思路的文章,遇到一个需求时,如何拆分需求,然后一步一步实现,这个过程比单纯的技术(此文)更有含金量. 先来看一下掘金 ...
随机推荐
- MySQL数据库(二)——库相关操作、表相关操作(一)、存储引擎、数据类型
库相关操作.表相关操作(一).存储引擎.数据类型 一.库相关操作 1.创建数据库 (1)语法 create database 数据库 charset utf8; (2)数据库命名规范 可以由字母.数字 ...
- Gradle任务
Gradle构建脚本描述一个或多个项目.每个项目都由不同的任务组成.任务是构建执行的一项工作.任务可以是编译一些类,将类文件存储到单独的目标文件夹中,创建JAR,生成Javadoc或将一些归档发布到存 ...
- Jenkins和Docker
由于采用了Docker版的Jenkins,导致在Jenkins里无法调用Docker命令行工具进行Docker镜像构建 有三种解决方案: 1. 安装Docker插件,利用Jenkins插件进行构建 2 ...
- 深入理解JAVA虚拟机原理之Dalvik虚拟机(三)
更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680 本文是Android虚拟机系列文章的第三篇,专门介绍Andorid系统上曾经使用 ...
- leetcode.哈希表.128最长连续序列-Java
1. 具体题目 给定一个未排序的整数数组,找出最长连续序列的长度.要求算法的时间复杂度为 O(n). 示例: 输入: [100, 4, 200, 1, 3, 2] 输出: 4 解释: 最长连续序列是 ...
- 第九篇 数据表设计和保存item到json文件
上节说到Pipeline会拦截item,根据设置的优先级,item会依次经过这些Pipeline,所以可以通过Pipeline来保存文件到json.数据库等等. 下面是自定义json #存储item到 ...
- 自动化监控系统(三) 搭建xadmin做网站后台
Django有个自带的admin后台,不过界面不怎么好看,这里我用xadmin 我的python版本是3.5,可以使用支持py3的xadmin:https://github.com/sshwsfc/x ...
- jsk
题目描述 码队的女朋友非常喜欢玩某款手游,她想让码队带他上分.但是码队可能不会带青铜段位的女朋友上分,因为码队的段位太高(已经到达王者),恐怕不能和他的女朋友匹配游戏. 码队的女朋友有些失落,她希望能 ...
- 【构造共轭函数+矩阵快速幂】HDU 4565 So Easy! (2013 长沙赛区邀请赛)
[解题思路] 给一张神图,推理写的灰常明白了,关键是构造共轭函数,这一点实在是要有数学知识的理论基础,推出了递推式,接下来就是矩阵的快速幂了. 神图: 给个大神的链接:构造类斐波那契数列的矩阵快速幂 ...
- D3.js 区域生成器 (V3版本)
区域生成器(Area Generator) 区域生成器(Area Generator)用于生成一块区域,使用方法与线段生成器类似.线段生成器地址:数据访问器有x().x0().x1().y().y ...