双击底部导航栏项目 Flutter

Question

在我的主页中，我有一个带有 2 个菜单的底部导航。

我有源库bottomNavigationBar: BottomNavigationBar

原库中没有属性onDoubleTap

有没有什么技术可以用它来实现。

这是我现在所做的

List<Widget> _widgetOptions;
int _selectedIndex = 0;
@override
void initState() {
super.initState();
_widgetOptions = <Widget>[
  HomeScreen(),
  SettingScreen();
];
 }
void _onItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
  });
}
@override
Widget build(BuildContext context) {
return Scaffold(
  body: IndexedStack(
    children: _widgetOptions,
    index: _selectedIndex,
  ),
  bottomNavigationBar: BottomNavigationBar(
    items: <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Image.asset("assets/icons/home.png",
        ),
        activeIcon: Image.asset(
          "assets/icons/home_active.png",
        ),
      ),
      BottomNavigationBarItem(
          icon: Image.asset(
            "assets/icons/service.png",
          ),
          activeIcon: Image.asset(
            "assets/icons/service.png",
          ),
      ),
    ],
    currentIndex: _selectedIndex,
    onTap: _onItemTapped,
  ),
);
}

Answer 1

用 Inkwell

包装您的项目小部件

BottomNavigationBarItem(
              icon: InkWell(
                onDoubleTap: (){
                      print('click');
                    },
                child: youriconwidget();
              ),
              title: Text(""),
            )

双击时

I/flutter (11516): click

希望对您有所帮助

Answer 2

您可以使用 GestureDetector 小部件并将其包装在您在 bottomNavigationBar 属性

中传递的 BottomNavigationBar 上

Gesture Detector 有一个 onDoubleTap 方法可用于您的情况。这是你想做的

          bottomNavigationBar: GestureDetector(
            onDoubleTap: (){
              //execute Event
            },
            child: BottomNavigationBar(
                items: [...],
            ),

双击底部导航栏项目 Flutter

Double tap in bottom navigaton bar item Flutter

flutter

flutter-dependencies