基于滚动值的 Flutter Web 视频播放

Posted 2023-02-23

【中文标题】基于滚动值的 Flutter Web 视频播放

【英文标题】：Flutter Web Video Plays based on scrolling values

【发布时间】：2021-12-16 10:12:24

【问题描述】：

我正在开发一个仅显示全屏视频的 Flutter 网站。现在，该视频不会自动播放，也不会使用播放/暂停按钮；相反，tt 会根据用户的滚动来寻找视频。

我尝试的是获取视频播放器控制器和滚动控制器，并使用视频控制器的 seek 方法，在其侦听器中传递 scrollController 值。

问题是我应该在哪里使用这个滚动控制器？

ListView 和 SingleChildScrollView 需要内容来获取滚动值，但我只有全屏视频。我仍在探索许多选项，例如 GestureDetector 中的 verticalDrag 等。任何指导或解决方案都会非常有帮助。

【问题讨论】：

很好的问题，关于使用视频控制器寻找的好想法。你很亲近！让我为你写一个小演示。

【参考方案1】：

您可以为此使用Listener 小部件，并监听PointerScrollEvent：

  Listener(
    onPointerSignal: (event) 
      if (event is PointerScrollEvent) 
        print('user scrolled: $event.scrollDelta');
      
    ,
    child: FlutterLogo(size: 2000),
  )

演示：

完整源代码：

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

void main() 
  runApp(const MyApp());


class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  


class MyHomePage extends StatefulWidget 
  const MyHomePage(Key? key) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  double _value = 0.5;

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Demo')),
      body: Center(
        child: Listener(
          onPointerSignal: (event) 
            if (event is PointerScrollEvent) 
              print('user scrolled: $event.scrollDelta');
              setState(() 
                _value += event.scrollDelta.dy / 1000;
                _value = _value.clamp(0.0, 1.0);
              );
            
          ,
          child: LinearProgressIndicator(
            minHeight: 400,
            value: _value,
          ),
        ),
      ),
    );
  

【讨论】：

这正是我所需要的。我对这些值做了一些数学运算，它奏效了。谢谢！