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

您可以使用GestureDetector小部件并将其包装在您通过BottomNavigationBar属性传递的bottomNavigationBar上

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

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

Answer 2

使用Inkwell

包裹您的商品小部件

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

双击时

I/flutter (11516): click

希望有帮助

双击底部导航栏项目Flutter

2 个答案: