Question

我有5个项目的BottomNavigationBar，还有应该更改第3个项目“照片”的FloatingActionButton。

所以我需要，如果用户在中央BottomNavigationBarItem'照片'上按下，则不会影响切换到该标签。

如何禁用对特定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;
      });
    }
  }

但是它不能完全解决。当我点击照片标签时，它仍然显示拍打飞溅效果。 我可以禁用拍打飞溅效果吗？

Answer 1

我和你有同样的问题。就我而言，我只想将其应用在bottomNavigationBar上，因为我对另一个小部件具有飞溅效果。

我使用以下代码修复了该问题：

bottomNavigationBar: Theme(
    data: ThemeData(
      splashColor: Colors.transparent,
      highlightColor: Colors.transparent,
    ),
    child: BottomNavigationBar(),
),

Answer 2

您可以执行以下操作：

您的bottomNavigationBar

bottomNavigationBar: BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      ...
    ),
    BottomNavigationBarItem(
      ...
    ),
    BottomNavigationBarItem(
      ...
    ),
  ],
  onTap: navigationTapped,
  currentIndex: _page,
),

您可以添加条件检查页面索引是否与当前索引匹配，而不执行任何操作，然后从该点返回。

像page == index

index在BottomNavigationBarItem的位置

void navigationTapped(int page) {
  if (page == 1) {
    return;
  } else {
    setState(() {
      _selectedIndex = page;
    });
  }
}

Answer 3

也许您可以尝试禁用飞溅效果：

将splashColor中的splashFactory或ThemeData更改为Colors.transparent。

参考： How to disable default Widget splash effect in Flutter?

Answer 4

要在BottomNavigationBar中禁用飞溅效果，请将其包装在Theme小部件中，并使用Colors.transparent覆盖splashColor和highlightColor的值。

Answer 5

要扩展此处给出的正确答案以及禁用飞溅效果的正确方法，您应该复制现有应用程序ThemeData并仅覆盖 splashColor和highlighColor属性。

否则，其他应用程序的ThemeData属性将丢失。

用主题小部件包装小部件，而不是：

Theme(
  data: ThemeData(
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
  ),
  child: YourWidget(),
);

使用：

Theme(
  data: Theme.of(context).copyWith(
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
  ),
  child: YourWidget(),
);

如何使BottomNavigationBarItem不可点击并禁用水龙头飞溅效果？

5 个答案: