Flutter PageView Scroll 但仅适用于小部件而不是整个页面答案

【问题标题】：Flutter PageView Scroll but only for widgets and not entire pagesFlutter PageView Scroll 但仅适用于小部件而不是整个页面
【发布时间】：2022-09-28 19:44:22
【问题描述】：

今天我有一个问题，没有提供任何代码。我想创建一个类似 tiktok 的体验，以便在颤动中滚动浏览我的 appfeed。但是，我不想在滑动时滚动整个页面，只滚动到 ListView/PageView 中的下一个小部件。我只能用 pageview 刷整个页面，而且我只能在 Listview 上正常滚动。我的要求有什么解决方案吗？我希望我足够澄清我的意思。 Instagram 在其搜索中提供了这样的体验。有没有可能实现这样的事情？请帮忙。

标签： flutter dart scrollview flutter-pageview tiktok

【解决方案1】：

因此，您要做的是使用 Stack 小部件，然后放置页面浏览量，就像您使用颤振创建入门屏幕一样，就像这样

import 'package:flutter/material.dart';

class OnBoarding extends StatefulWidget {
  @override
  _OnBoardingState createState() => _OnBoardingState();
}

class _OnBoardingState extends State<OnBoarding> {
  PageController? controller;
  int currentIndex = 0;

  @override
  void initState() {
    controller = PageController();
    super.initState();
  }

  @override
  void dispose() {
    controller!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: [
          PageView(
            scrollDirection: Axis.vertical,
            onPageChanged: onchahged,
            controller: controller,
            children: [
              Container(
                child: Image.network(
                  'https://picsum.photos/200/300',
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                child: Image.network(
                  'https://picsum.photos/200/300',
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                child: Image.network(
                  'https://picsum.photos/200/300',
                  fit: BoxFit.fill,
                ),
              ),
            ],
          ),
          Positioned(
            bottom: 30,
            right: 10,
            child: Column(
              children: [
                Icon(
                  Icons.ac_unit,
                  size: 30,
                  color: Colors.white,
                ),
                SizedBox(
                  height: 10,
                ),
                Icon(
                  Icons.image,
                  size: 30,
                  color: Colors.white,
                ),
                SizedBox(
                  height: 10,
                ),
                Icon(
                  Icons.person,
                  size: 30,
                  color: Colors.white,
                ),
                SizedBox(
                  height: 10,
                ),
                Icon(
                  Icons.person_add,
                  size: 30,
                  color: Colors.white,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  onchahged(int index) {
    setState(() {
      currentIndex = index;
    });
  }
}

这是它的样子

【讨论】：

谢谢，但我想我还不够清楚。不幸的是，这不是我想要的。例如，如果您的答案中的图像只有 500 像素高并且您会滑动，您也会进入一个新屏幕。但是，我正在为小于整个屏幕高度的小部件寻找一种页面视图。如果您滑动，您应该留在提要中，但不是像在滚动视图上那样平滑滚动，您应该像在您提供的页面视图中那样跳转到下一个帖子。 Listview 和 PageView 之间的混合
我想我不明白你在问什么，希望其他人可以帮助你。

【解决方案2】：

在高度为 500 像素的容器内使用 ListView.builder，ListView.builder 将拥有子帖子，因此您可以保持在同一个提要中，并且能够垂直或水平地浏览帖子。

检查以下链接以获取教程：https://www.youtube.com/watch?v=baA_J5tUtEU

您可以通过在 ListView.buidler 中设置 scrollDirection: Axis.horizontal 或 Axis.vertical 来更改滚动

希望这能回答你的问题。

【讨论】：

谢谢，但我很抱歉，但这不是我想要的。是的，我想要类似 listview 的东西，但有类似 tiktok 的体验，而在你的示例中，我不想要一个简单的滚动，而是想要跳转到提要中的下一个项目。
看看这个youtube.com/watch?v=wnTYKJEJ7f4

【解决方案3】：

对于特定的小部件，您必须用 GestureDetector 包装它并防止当前小部件可滚动。

一个例子：

GestureDetector(
   onHorizontalDragUpdate: (_) {},
   child: WidgetToNotBeingScrollableInTheHorizontal(),
);

【讨论】：