flutter 自定义tabbar 给tabbar添加背景功能
flutter 自带的tabbar BottomNavigationBar有长按水波纹效果,不可以添加背景图片功能,如果有这方面的需求,就需要自定义tabbar了
自定义图片 我们使用BottomAppBar 设定宽高,内部的UI就可以完全自定义 测试了一下,基本能达到想要的效果
废话不多了,直接上代码了
import 'package:flutter/material.dart';
import 'home.dart';
import 'category.dart';
import 'activity.dart';
import 'mine.dart';
class TabbarPage extends StatefulWidget {
@override
_TabbarPageState createState() => _TabbarPageState();
}
class _TabbarPageState extends State<TabbarPage> {
PageController _pageController;
List images = [
['assets/tab_icon_home.png', 'assets/tab_icon_home_selected.png'],
['assets/tab_icon_category.png', 'assets/tab_icon_category_selected.png'],
['assets/tab_icon_collect.png', 'assets/tab_icon_collect_selected.png'],
['assets/tab_icon_profile.png', 'assets/tab_icon_profile_selected.png'],
];
final List _titles = ['首页', '好物', '双11', '我的'];
final List<Widget> _tabBodies = [
HomePage(),
CategoryPage(),
ActivityPage(),
MinePage(),
];
int _currentIndex = 0;
void initState() {
super.initState();
this._pageController =PageController(initialPage: _currentIndex, keepPage: true);
}
@override
Widget build(BuildContext context) {
return Scaffold(
// body: IndexedStack(
// index: _currentIndex,
// children: _tabBodies,
// ),
body: PageView(
children: _tabBodies,
controller: _pageController,
// physics: NeverScrollableScrollPhysics(),
),
// bottomNavigationBar: BottomNavigationBar(
// backgroundColor: Colors.brown,
// type: BottomNavigationBarType.fixed,
// currentIndex: _currentIndex,
// items: getItems(),
// onTap: (index) {
// setState(() {
// _currentIndex = index;
// // _pageController.jumpToPage(index);
// });
// },
// ),
bottomNavigationBar: _bottomAppBar(),
);
}
BottomAppBar _bottomAppBar() {
double width = MediaQuery.of(context).size.width;
double height = 60;
return BottomAppBar(
child: Container(
//设置背景
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
repeat: ImageRepeat.noRepeat,
image: AssetImage('assets/tab_festival_background_android.png'),
),
),
width: width,
height: height,
child: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: _customItems(),
),
),
);
}
/*获取tab图片*/
Widget getTabIcon(int index) {
if (_currentIndex == index) {
return Image.asset(
images[index][1],
width: 30,
fit: BoxFit.fitHeight,
);
}
return Image.asset(images[index][0], width: 30, fit: BoxFit.fitHeight);
}
/*获取tab文字*/
Text getTabText(int index) {
if (_currentIndex == index) {
return Text(
_titles[index],
style: TextStyle(color: Color(0xFFEA164B), fontSize: 11),
);
}
return Text(
_titles[index],
style: TextStyle(color: Color(0xFF8228CF), fontSize: 11),
);
}
/*获取tabbatItem*/
List<BottomNavigationBarItem> getItems() {
return [
BottomNavigationBarItem(
icon: getTabIcon(0),
title: getTabText(0),
),
BottomNavigationBarItem(icon: getTabIcon(1), title: getTabText(1)),
BottomNavigationBarItem(icon: getTabIcon(2), title: getTabText(2)),
BottomNavigationBarItem(icon: getTabIcon(3), title: getTabText(3)),
];
}
List<Widget> _customItems() {
double width = MediaQuery.of(context).size.width;
//均分成4分
double itemWidth = width / 4.0;
return images.map((img) {
int index = images.indexOf(img);
return GestureDetector(
onTap: () {
setState(() {
_currentIndex = index;
_pageController.jumpToPage(index);
});
},
child: Container(
color: Colors.transparent,
width: itemWidth * 0.8,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
getTabIcon(index),
getTabText(index),
],
),
),
);
}).toList();
}
}
tabbar中通过pageView来实现页面的持久保存,细节参考
flutter 自定义tabbar 给tabbar添加背景功能的更多相关文章
- AJ学IOS 之微博项目实战(4)微博自定义tabBar中间的添加按钮
AJ分享,必须精品 一:效果图 自定义tabBar实现最下面中间的添加按钮 二:思路 首先在自己的tabBarController中把系统的tabBar设置成自己的tabBar(NYTabBar),这 ...
- iOS 自定义UITabBarController的tabBar
#import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDeleg ...
- sharepoint 2010 如何给文档库或自定义列表添加评论功能
转:http://www.cfanz.cn/?c=article&a=read&id=40924 最近公司在知识库中,有一个需求,就是想要给文档添加评论功能,在sharepoint 2 ...
- SharePoint 2007 文档库中的文档添加评论功能
背景:接到一个项目,要求文档管理,当然文档库就可以了,但是要求文档需要大家去读,读完以后还可以发表评论,这Moss貌似就有点困难了.和同事一起合计,想来想去也没有太好的办法,后来想到传统开发,两个表的 ...
- Android 三档自定义滑动开关,禁止点击功能的实现,用默认的seekbar组件实现
android三档自定义滑动开关,禁止点击功能的实现,普通开关网上有很多例子,三档滑动开关的则找了整天都没有相关例子,开始用普通开关的源码修改了自己实现了一个类,但效果不如人意,各种边界情况的算法很难 ...
- 在VC中,为图片按钮添加一些功能提示(转)
在VC中,也常常为一些图片按钮添加一些功能提示.下面讲解实现过程:该功能的实现主要是用CToolTipCtrl类.该类在VC msdn中有详细说明.首先在对话框的头文件中加入初始化语句:public ...
- Egret 位图,纹理,添加背景 学习
1,重新设置舞台大小,可以直接到VS中的 "解决方案"中,找到 launcher->egret_loader.js中,找到setDesignSize方法,修改其中大小即可:有 ...
- 为HTML表格添加交互功能------DataTables
DataTables是一个功能强大的Javascript库,用于为HTML表格添加交互功能,虽然简单性是整个项目的核心设计原则,但入门看起来相当艰巨.但是,采取这些第一步并在您的网站上运行DataTa ...
- 为CSDN博客添加打赏功能
随着移动支付在国内的兴起,越来越多的付费内容越多如雨后春笋般的冒了出来.其中以<逻辑思维>.罗振宇.李笑来为主要代表作品和人物. 现在很多博客或者个人网站里面都有打赏功能,这算是对博主的劳 ...
随机推荐
- 使用iframe框架时,实现子页面内跳转到整个页面,而不是在子页面内跳转
首先先来描述一下我所遇到的问题,我在一个首页的index.jsp页面中用到了iframe框架,见下图 在iframe中引入jsp页面的路径,是几个iframe框架组合成的一个完整的页面,但是他们的存在 ...
- windows配置mysql权限
想要把csv里面的数据导入mysql,报错.用命令 show variables like '%secure%'; : [2019-04-08 17:04:36] [HY000][129 ...
- mac系统 flutter从安装到第一个应用
mac系统 安装flutter 分三步: 1. 安装flutter sdk 2. flutter环境变量配置 3. 建立flutter应用 Flutter SDK下载 打开终端执行命令 git clo ...
- table 随着内容自动适应宽度
td { white-space: nowrap; } 给td加个属性就可以了,如果有th则可以 td,th 本文来自:https://blog.csdn.net/liuhongwei_study/a ...
- rontab踩坑(三):crontab定时任务调度机制与系统时间/时区的不一致
解决方案: 因为我们的服务器在是肯尼亚: 我么查看一下localtime 是否和 时区一致? 可以看到是一致的. 应该是是配置改动后未重启! service crond restart
- [2019HDU多校第一场][HDU 6590][M. Code]
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6590 题目大意(来自队友):二维平面上有\(n\)个点,每个点要么是黑色要么是白色,问能否找到一条直线 ...
- CSS测试题Ⅱ
1.如何使用 CSS3 强制换行? A. word-wrap: break-word; B. text-wrap: break-word; C. text-wrap: force; D. text-w ...
- Laravel Passport API 认证使用小结
Laravel Passport API 认证使用小结 八月 4, 2017 发布在 Laravel 看到Laravel-China 社区常有人问 Laravel Passport 用于密码验证方式来 ...
- Combine String HDU - 5707 dp or 广搜
Combine String HDU - 5707 题目大意:给你三个串a,b,c,问a和b是不是恰好能组成c,也就是a,b是不是c的两个互补的子序列. 根据题意就可以知道对于c的第一个就应该是a第一 ...
- 【luoguP1955 】[NOI2015]程序自动分析--普通并查集
题目描述 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3...代表程序中出现的变量,给定n个形如xi=xj或xi≠xj的变 ...