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

Richardd
2021-02-09  
1284  
    
3  

我正在尝试建立一个具有类似于 tiktok 的滑动效果的画廊。

这是我的初始屏幕：

initial screen

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

after swipe

flutter ,  dart ,  navigation
stack overflow Swipe effect of tiktok : How to scroll vertically in full-screen?
原文答案

答案:

作者头像
Kab Agouda
2021-02-09    2      原文

试试 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),
                ),
              );
          },
        ),
      ),
    );
  }
}

输出 ：

enter image description here

希望它会有用

作者头像
Ray Zion
2021-09-07    1      原文

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();
          }
        });
作者头像
Richardd
2021-02-09    0      原文

谢谢你的建议。它几乎可以工作:)

我试过了，但我收到一个错误： A RenderViewport expected a child of type RenderSliver but received a child of type 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),
                    ),
                  );
                },
              ),
            ),

          ],
        ),
      ),
    ),

enter image description here

相关问题

标签