flutter如何实现抖音短视频的效果？

flutter如何实现抖音短视频的效果呢？其实flutter中有对应的PageView组件可以实现。

flutter 实现抖音短视频的效果视频教程地址：https://www.bilibili.com/video/BV1S4411E7LY?p=43

Flutter中的轮动图以及抖音上下滑页切换视频功能等等，这些都可以通过 PageView 轻松实现

PageView常见属性：

28.1、PageView 的使用

import 'package:flutter/material.dart';

class PageViewPage extends StatefulWidget {
  const PageViewPage({super.key});

  @override
  State<PageViewPage> createState() => _PageViewPageState();
}

class _PageViewPageState extends State<PageViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("pageview演示"),
        ),
        body: PageView(
          // scrollDirection: Axis.vertical, // 滑动方向为垂直方向
          children: [
            Center(
              child: Text("1",style: Theme.of(context).textTheme.headline1,),
            ),
            Center(
              child: Text("2",style: Theme.of(context).textTheme.headline1,),
            ),
            Center(
              child: Text("3",style: Theme.of(context).textTheme.headline1,),
            ),
             Center(
              child: Text("4",style: Theme.of(context).textTheme.headline1,),
            ),
             Center(
              child: Text("5",style: Theme.of(context).textTheme.headline1,),
            ),
            Center(
              child: Text("6",style: Theme.of(context).textTheme.headline1,),
            )
          ],
        ));
  }
}

28.2、PageView.builder

import 'package:flutter/material.dart';

class PageViewPage extends StatefulWidget {
  const PageViewPage({super.key});

  @override
  State<PageViewPage> createState() => _PageViewPageState();
}

class _PageViewPageState extends State<PageViewPage> {
  int itemCount=10;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();   
  }

  @override
  Widget build(BuildContext context) {   
    return Scaffold(
        appBar: AppBar(
          title: const Text("pageview演示"),
        ),
        
        body: PageView.builder(
          scrollDirection: Axis.vertical, // 滑动方向为垂直方向          
          itemBuilder: (BuildContext context, int index) { 
            return MyPage(text:"$index");
          },
          itemCount: 10,          
        ));
  }
}

class MyPage extends StatefulWidget {
  final String text;
  const MyPage({super.key,required this.text});

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(widget.text,style: Theme.of(context).textTheme.headline1),
    );
  }
}

28.3、flutter仿抖音短视频 PageView上拉无限加载的实现思路

import 'package:flutter/material.dart';

class PageViewPage extends StatefulWidget {
  const PageViewPage({super.key});

  @override
  State<PageViewPage> createState() => _PageViewPageState();
}

class _PageViewPageState extends State<PageViewPage> {
  final List<Widget> _list = [];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    for (var i = 0; i < 10; i++) {
      _list.add(MyPage(text:"$i"));
    }
  }

  @override
  Widget build(BuildContext context) {   
    return Scaffold(
        appBar: AppBar(
          title: const Text("pageview演示"),
        ),
        body: PageView(
          scrollDirection: Axis.vertical, // 滑动方向为垂直方向
          onPageChanged: (index){
            print(index);
            print(_list.length);
            if(index+2==_list.length){
              setState(() {
                for (var i = 0; i < 10; i++) {
                  _list.add(MyPage(text:"$i"));
                }
              });
            }
          },  
          children:_list,
        ));
  }
}

class MyPage extends StatefulWidget {
  final String text;
  const MyPage({super.key,required this.text});

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(widget.text,style: Theme.of(context).textTheme.headline1),
    );
  }
}