У меня есть BottomNavigationBar с 5 элементами, а также FloatingActionButton, который должен изменить 3-й элемент «Фото».

Так что мне нужно, если пользователь нажимает на центральном BottomNavigationBarItem «Фото», это не повлияет на переключение на эту вкладку.

Как я могу отключить нажатие на определенный BottomNavigationBarItem?

BottomNavigationBar with FloatingActionButton

А вот мой код:

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;
    });
  }
}

ОБНОВЛЕНИЕ:

Проблема почти решена (спасибо @ibhavikmakwana) путем изменения функции _onItemTapped

void _onItemTapped(int index) {
    if (index != 2) {
      setState(() {
        _selectedIndex = index;
      });
    }
  }

Но это решено не полностью. Когда я нажимаю на фотобумагу, она все еще показывает эффект всплеска. Можно ли отключить эффект всплеска касания?

enter image description here

7
Maxim Milyutin 2 Май 2019 в 12:51

3 ответа

Лучший ответ

Вы можете сделать что-то вроде ниже:

Ваш 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;
    });
  }
}
1
ibhavikmakwana 2 Май 2019 в 10:20

Может быть, вы можете попробовать это, чтобы отключить эффект всплеска:

Измените splashColor или splashFactory в ThemeData на Colors.transparent.

Ссылка: Как отключить заставку виджета по умолчанию во Флаттере?

2
leemuljadi 24 Окт 2019 в 11:54

Чтобы отключить эффект всплеска в BottomNavigationBar, оберните его в виджет «Тема» и переопределите значения splashColor и highlightColor с помощью Colors.transparent.

1
Guy McLean 11 Фев 2020 в 22:38