另一个 PageView 内的 PageView 的颤动块滚动答案

【问题标题】：Flutter block scroll of PageView inside another PageView另一个 PageView 内的 PageView 的颤动块滚动
【发布时间】：2021-08-13 23:21:02
【问题描述】：

我有以下小部件，它垂直显示一些食谱的图片列表，当滑动到每个食谱的右侧页面时，它会转到其描述页面。这里的问题是，当我转到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,
      ),
    );
  }

【问题讨论】：

标签： flutter

【解决方案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);
              }
            )
          }
        )
    );
  }
}

【讨论】：