Flutter PageView和GestureDetector通过滑动更改路由

时间:2020-08-19 11:12:25

标签: flutter gesturedetector flutter-pageview

在Flutter中,我已经使用PageView小部件构建了一个路由系统。这与bottomNavigationBar配合良好。

routing.dart

class Routes extends StatefulWidget {
  Routes({Key key}) : super(key: key);

  @override
  _RoutesState createState() => _RoutesState();
}

class _RoutesState extends State<Routes> {
  PageController _pageController = PageController();
  // handle all pages
  List<Widget> _screens = [
    Stores(),
    Recipes(), 
    Basket(), 
  ];

  int _selectedIndex = 0;
  void _onPageChanged(int currentIndex) {
    setState(() {
      _selectedIndex = currentIndex;
    });
  }

  void _onItemTapped(int selectedIndex) {
    _pageController.jumpToPage(selectedIndex);
    setState(() {
      _selectedIndex = selectedIndex;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: PageView(
          controller: _pageController,
          children: _screens,
          onPageChanged: _onPageChanged,
          physics: NeverScrollableScrollPhysics(),
        ),
        bottomNavigationBar: Theme(
            data: Theme.of(context).copyWith(
              canvasColor: Colors.white, // BottomNavBar BackgroundColor
            ),
            child: BottomNavigationBar(
              currentIndex: _selectedIndex,
              onTap: _onItemTapped,
              items: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  title: Text('Stores'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.restaurant_menu),
                  title: Text('Recipes'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.restaurant_menu),
                  title: Text('Basket'),
                )
              ],
            )));
  }
}

每页(商店,食谱和购物篮)在底部显示导航。
但是,当我加载Stores页面时,会弹出一条消息,要求用户滑动以查看最新的食谱之一。
滑动时,应将用户重定向到Recipes()BottomNavigationBar应该使用新索引进行更新。

alertDialog.dart

class Dialogs {
  recipesAlert(BuildContext context, String title, String description) {
    return showDialog(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) {
          return GestureDetector(
              onPanUpdate: (details) {
                if (details.delta.dx > 0) {
                  // swiping in right direction
                  print('ive swiped');
                  *************************************
                  HERE WHERE I SHOULD CALL ROUTES(), 
                  REDIRECT TO RECIPES() AND 
                  UPDATE THE BOTTOM BAR 
                  *************************************
                }
              },
              child: AlertDialog(
                content: SingleChildScrollView(
                    child: ListBody(
                      children: <Widget>[
                        
                        Padding(
                          child: Text('Swipe right',
                            style: TextStyle(
                                color: Colors.black,
                                fontWeight: FontWeight.bold
                            ),
                          ),
                        ............
                    

我不能使用类似的东西:

Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => Recipes())

否则,它将打开一个没有bottomNavigationBar的新recipes页面。
我想打电话给Routes(),将用户重定向到Recipes(),并用正确的索引更新BottomNavigationBar

感谢您的帮助。 乔

0 个答案:

没有答案