另一个PageView中的PageView的Flutter块滚动

Question

我有下面的小部件，它垂直显示一些食谱的图片列表，当滑动到每个食谱的右侧页面时，它会转到它的描述页面。这里的问题是，当我转到DescriptionScreen时，我可以向下滚动并转到其他食谱的RecipeScreen。我想阻止这一点，只有当用户在RecipeScreen上时才允许垂直滚动，否则如果用户在DescriptionScreen上，则只能向左滑动并继续滚动。怎么可能做到这一点呢？

  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      extendBodyBehindAppBar: true,
      body: Column(
        children: [
          Expanded(
            child: PageView.builder(
              controller: verticalPageController,
              scrollDirection: Axis.vertical,
              itemCount: recipes.length,
              allowImplicitScrolling: true,
              itemBuilder: (BuildContext context, int index) {
                return PageView(
                  controller: pageControllers[index],
                  children: [
                    RecipeScreen(
                      recipe: recipes[index],
                      onRecipeDelete: onRecipeDelete,
                      ),
                    ),
                    DescriptionScreen(
                      recipeId: recipes[index].id,
                      onRecipeSave: onRecipeSave,
                    ),
                  ],
                );
              },
            ),
          ),
          SafeArea(
            top: false,
            child: Container(height: 0),
          ),
        ],
      ),
      bottomNavigationBar: BottomBar(
        page: currentPage,
      ),
    );
  }

Answer 1

我会向您的水平PageViews添加一个onPageChanged，当用户转到DescriptionScreen时，您会将垂直PageView的物理属性设置为NeverScrollableScrollPhysics。

高级代码：

class MyStatefulWidgetState extends State<MyStatefulWidget> {
  ScrollPhysics physics;
  
  void setScrollPhysics(ScrollPhysics physics) {
    setState(() {
      this.physics = physics
    });
  }

  Widget build(BuildContext context) {
    return Scaffold(
      body: //...
        PageView.builder(
          controller: verticalPageController,
          // ...
          physics: physics, // this line will enable / disable scroll
          itemBuilder: (ctx, index) {
            return PageView(
              controller: pageControllers[index],
              onPageChanged: (page) {
                // enable / disable vertical scrolling depending on page
                setScrollPhysics(page == 1 ? NeverScrollableScrollPhysics() : null);
              }
            )
          }
        )
    );
  }
}