flutter - 如何使 BottomNavigationBarItem 不可点击并禁用点击飞溅效果?
问题描述
我有带有 5 个项目的 BottomNavigationBar 以及应该更改第三个项目“照片”的 FloatingActionButton。
因此,如果用户按下中央底部导航栏项“照片”,我需要它不会影响切换到此选项卡。
如何禁用单击特定的 BottomNavigationBarItem?
这是我的代码:
import 'package:flutter/material.dart';
class MainPage extends StatefulWidget {
@override
_MainPageState createState() => new _MainPageState();
}
class PageInfoData {
final String title;
final IconData iconData;
const PageInfoData(this.title, this.iconData);
}
class _MainPageState extends State<MainPage> {
int _selectedIndex = 0;
static const List<PageInfoData> pageInfo = [
PageInfoData('History', Icons.swap_horiz),
PageInfoData('Download', Icons.file_download),
PageInfoData('Photo ', null),
PageInfoData('Upload', Icons.file_upload),
PageInfoData('Settings', Icons.settings)
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text("Menu"),
actions: <Widget>[IconButton(icon: Icon(Icons.search, color: Colors.white,),)],
),
body: Center(child: Text('Index$_selectedIndex: ${pageInfo[_selectedIndex].title}')),
backgroundColor: Colors.white,
bottomNavigationBar: BottomNavigationBar(
items: new List<BottomNavigationBarItem>.generate(pageInfo.length, (int index) {
PageInfoData curPageInfo = pageInfo[index];
return BottomNavigationBarItem(icon: Icon(curPageInfo.iconData, size: 30.0), title: Text(curPageInfo.title, style: TextStyle(fontSize: 9.0),));
}),
type: BottomNavigationBarType.fixed,
unselectedItemColor: const Color(0xff797979),
fixedColor: Theme.of(context).primaryColor,
backgroundColor: const Color(0xffe2e2e2),
currentIndex: _selectedIndex,
showUnselectedLabels: true,
onTap: _onItemTapped,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
backgroundColor: Color(0xffa2a5a4),
child: Icon(Icons.photo_camera, size: 40.0,),
onPressed: null),
);
}
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
}
更新:
_onItemTapped
通过更改功能几乎解决了问题(谢谢@ibhavikmakwana)
void _onItemTapped(int index) {
if (index != 2) {
setState(() {
_selectedIndex = index;
});
}
}
但它并没有完全解决。当我点击照片标签时,它仍然会显示点击飞溅效果。 我可以禁用点击飞溅效果吗?
解决方案
我和你有同样的问题。就我而言,我只想将它应用到bottomNavigationBar,因为我对另一个小部件有飞溅效果。
我使用下面的代码修复了它:
bottomNavigationBar: Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
),
child: BottomNavigationBar(),
),
推荐阅读
- php - 组合字母数字时如何选择真值?
- java - 在 Intellij (Linux - VM) 中创建 Maven 项目时出错
- spring - 无法使用spring hibernate在broswer上显示数据。下面是我的代码和输出
- python - 将亚马逊美食评论数据集从 kaggle 加载到 colab 笔记本中
- powershell - 如何将特定的 WMIobject 驱动程序解析为字符串?
- python - 使用烧瓶服务器时从 html 写入 python 文件的更改
- c# - 如何强制验证 UserControl?
- asp.net - 尽管视图模型已更新,但在 POST 后视图未更新
- elasticsearch - 添加任何自定义实体后的 jHipter Elasticsearch 问题
- docker-compose - NGINX 反向代理不适用于其他 docker 容器