抖音滑动效果：如何全屏垂直滚动？答案

【问题标题】：Swipe effect of tiktok : How to scroll vertically in full-screen?抖音滑动效果：如何全屏垂直滚动？
【发布时间】：2021-05-12 15:59:14
【问题描述】：

我正在尝试设置一个类似于tiktok的滑动效果的画廊。

这是我的初始屏幕：

当用户滑动屏幕时，狗的全屏照片应该是这样的：

【问题讨论】：

标签： flutter dart navigation

【解决方案1】：

试试tiktoklikescroller包

一个垂直的全屏滚动实现，类似于 TikTok 应用程序。

示例：

import 'package:flutter/material.dart';
import 'package:tiktoklikescroller/tiktoklikescroller.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<Color> colors = <Color>[Colors.red, Colors.blue, Colors.yellow];
    return MaterialApp(
      home: Scaffold(
        body: TikTokStyleFullPageScroller(
          contentSize: colors.length,
          swipeThreshold: 0.2,
          // ^ the fraction of the screen needed to scroll
          swipeVelocityThreshold: 2000,
          // ^ the velocity threshold for smaller scrolls
          animationDuration: const Duration(milliseconds: 300),
          // ^ how long the animation will take
          builder: (BuildContext context, int index) {
            return Container(
                color: colors[index],
                child: Text(
                  '$index',
                  style: const TextStyle(fontSize: 48, color: Colors.white),
                ),
              );
          },
        ),
      ),
    );
  }
}

输出：

希望对你有用

【讨论】：

【解决方案2】：

Tiktoklikescroller 曾经但在 2021 年 9 月之前还可以，它在示例中有效，但会停止使用 API 数据在元素 1 上滚动，（我不知道为什么）。

因此，根据其中一条评论，这对 Senfuka（我）有效：

 PageView.builder(
        scrollDirection: Axis.vertical,
        itemCount: widget.products.length,
        itemBuilder: (context, index) {
          try {
            return ProductPage(
              widget.products[index],
              isHome: false,
            );
          } catch (e) {
            print(e);
            return Container();
          }
        });

【讨论】：

【解决方案3】：

感谢您的建议。它几乎可以工作了:)

我试过了，但我收到一个错误：A RenderViewport 需要一个 RenderSliver 类型的孩子，但收到了一个 RenderStack 类型的孩子。

所以根据文档，它需要在 Sliver 中。我试着把它放在我有标题的 SliverPadding 里面。并且还尝试将其放置在独立的 SliverToBoxAdapter 中。

但是，我只能通过向上拖动页眉区域来滚动孔屏幕。然后，如果我再次向下滚动，Header 和 AppBar 将不再显示。

如何滚动孔屏并向后滚动？

    SliverPadding(
      padding: const EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 5.0),
      sliver: SliverToBoxAdapter(
        child: Column(
          children: [
            Container(
              height: 200.0,
              color: Colors.black12,
              child: Text('Header', style: TextStyle(fontSize: 30),),
            ),

            Container(
              height: MediaQuery.of(context).size.height,
              child: TikTokStyleFullPageScroller(
                contentSize: colors.length,
                swipeThreshold: 0.2,
                // ^ the fraction of the screen needed to scroll
                swipeVelocityThreshold: 2000,
                // ^ the velocity threshold for smaller scrolls
                animationDuration: const Duration(milliseconds: 300),
                // ^ how long the animation will take
                builder: (BuildContext context, int index) {
                  return Container(
                    color: colors[index],
                    child: Text(
                      '$index',
                      style: const TextStyle(fontSize: 48, color: Colors.white),
                    ),
                  );
                },
              ),
            ),

          ],
        ),
      ),
    ),

【讨论】：

为你解决了吗？
我改用了 PageView。