Question

我有一个带有PageView的自定义BottomAppBar，用于页面。我试图在用户单击BottomAppBar中的项目时更改页面。我正在使用提供程序来管理全局状态。单击项目会触发提供程序中的值更改，但是PageView中没有方法可以在值更改时触发页面更改。我该如何实现？下面是我的代码。

我的提供者：

class CurrentPage extends ChangeNotifier {
  int _currentPage = 0;
  int get currentPage => _currentPage;

  setCurrentPage(int val) {
    _currentPage = val;
    notifyListeners();
  }
}

BottomAppBar项：

 InkWell(
                onTap: () {
                  context.read<CurrentPage>().setCurrentPage(0);
                },
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                      horizontal: 26.5, vertical: 17.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Icon(
                        CustomIcons.home,
                        size: 18.0,
                        color: context.watch<CurrentPage>().currentPage == 0
                            ? Color(0xFF2C1DEB)
                            : Color(0xFFCCCCD5),
                      ),
                      SizedBox(height: 9.0),
                      Text(
                        'HOME',
                        style: TextStyle(
                          color: context.watch<CurrentPage>().currentPage == 0
                              ? Color(0xFF2C1DEB)
                              : Color(0xFFCCCCD5),
                          fontWeight: FontWeight.w800,
                          fontSize: 10.0,
                          letterSpacing: 1.0,
                        ),
                      ),
                    ],
                  ),
                ),
              ),

PageView：

class Pages extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final PageController _pageController =
        PageController(initialPage: context.watch<CurrentPage>().currentPage);

    return PageView(
      onPageChanged: (int) {},
      controller: _pageController,
      scrollDirection: Axis.horizontal,
      pageSnapping: true,
      children: [
        Container(
          color: Colors.green,
          child: Text('Home Page'),
        ),
        Container(
          child: Text('Profile Page'),
        ),
        Container(
          child: Text('Search Page'),
        ),
        Container(
          child: Text('Jobs Page'),
        ),
      ],
    );
  }
}

Answer 1

这就是您的制作方法。从提供商处致电notifyListener后，如果currentPage已更改，它将转到新选择的页面

class Pages extends StatelessWidget {
      final PageController _pageController =
            PageController(initialPage:0);
      @override
      Widget build(BuildContext context) {


    return Consumer<CurrentPage>(builder:(ctx, currentPage,  widget){

     final pageView = PageView(
          onPageChanged: (int) {},
          controller: _pageController,
          scrollDirection: Axis.horizontal,
          pageSnapping: true,
          children: [
            Container(
              color: Colors.green,
              child: Text('Home Page'),
            ),
            Container(
              child: Text('Profile Page'),
            ),
            Container(
              child: Text('Search Page'),
            ),
            Container(
              child: Text('Jobs Page'),
            ),
          ],);
          if(currentPage.currentPage != _pageController.page.floor()){
            _pageController.jumpToPage(currentPage.currentPage);
          }
          return pageView;
          }
        );
      }
    }

Answer 2

您应该在PageViewController中使用animateToPage或jumpToPage方法。还需要使Page小部件成为StatefullWidget。

Flutter-在提供者值更改时触发PageView更改

2 个答案: