Flutter 组件之 PageView

作者: Abner_XuanYuan | 来源:发表于2023-10-14 10:44 被阅读0次

flutter组件PageView
Flutter 滚动组件之PageView
Flutter（16）：Material组件之PageView
Flutter的PageView组件
Flutter中PageView的滑动开始监听、完成监听自定义
Flutter 之 PageView 控件
Flutter Widgets 之 PageView
Flutter Widgets 之 PageView
Flutter - PageView
Flutter PageView

1、属性

PageView PageView({
  Key? key,
  Axis scrollDirection = Axis.horizontal,    //滚动方向，水平或者垂直，默认垂直
  bool reverse = false,    //children(子节点)的排序是否是倒序
  PageController? controller,    //滚动控制器，可以定位页面，获取当前页面等信息
  ScrollPhysics? physics,    //滑动效果
  bool pageSnapping = true,    //设置是否整页滚动
  void Function(int)? onPageChanged,    //页面发生改变时的回调
  List<Widget> children = const <Widget>[],    //子页面组件列表
  //这个属性是设置认定开始拖动行为的方式，可以选择的是down和start两个，默认是start. down是第一个手指按下认定拖动开始，start是手指拖动才算开始。
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,    
  bool allowImplicitScrolling = false,    //是否缓存当前页面的前后两页
  String? restorationId,    //restoreidID 以字符串为对象。它用于保存滚动位置并在以后恢复它。
  Clip clipBehavior = Clip.hardEdge,    //内容将根据此选项进行剪辑（或不剪辑）。
  ScrollBehavior? scrollBehavior,    //滚动视图的水波纹效果
  bool padEnds = true,    //是否在列表的两端添加填充。
})

2、示例

import 'package:flutter/material.dart';

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

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

class _PageViewPageState extends State<PageViewPage> {
  List<Widget> _listWidge() {
    List<Widget> list = [];
    for (var i = 0; i < 5; i++) {
      list.add(Center(
        child: Text(
          "第 $i 页",
          style: Theme.of(context).textTheme.headlineLarge,
        ),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("PageView"),
      ),
      body: PageView(
        scrollDirection: Axis.vertical,   //滚动方向,水平/上下
        reverse: true,    //倒序滚动
        children: _listWidge(),
      ),
    );
  }
}

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> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("PageView"),
      ),
      body: PageView.builder(
        itemBuilder: (BuildContext c, int index) => MyPage(title: "$index"),
        itemCount: 10,
      ),
    );
  }
}

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

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

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

3、无线加载方案探索

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() {
    super.initState();

    for (var i = 0; i < 5; i++) {
      _list.add(MyPage(title: "$i"));
    }
  }

  @override
  Widget build(BuildContext context) {
    return PageView(
      scrollDirection: Axis.vertical,
      children: _list,
      onPageChanged: (value) {
        print(value);
        print(_list.length);

        if (value + 2 == _list.length) {
          setState(() {
            for (var i = 0; i < 5; i++) {
              _list.add(MyPage(title: "$i"));
            }
          });
        }
      },
    );
  }
}

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

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

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

4、无线轮播图

///无线轮播图
class PageViewPage extends StatefulWidget {
  const PageViewPage({super.key});

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

class _PageViewPageState extends State<PageViewPage> {
  List<Widget> pageList = [];

  @override
  void initState() {
    super.initState();

    List listData = [
      {
        "imageUrl": 'https://www.itying.com/images/flutter/1.png',
      },
      {
        "imageUrl": 'https://www.itying.com/images/flutter/2.png',
      },
      {
        "imageUrl": 'https://www.itying.com/images/flutter/3.png',
      },
      {
        "imageUrl": 'https://www.itying.com/images/flutter/4.png',
      },
      {
        "imageUrl": 'https://www.itying.com/images/flutter/5.png',
      }
    ];

    for (var i = 0; i < listData.length; i++) {
      pageList.add(PicturePage(
        url: listData[i]["imageUrl"],
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("无线轮播"),
      ),
      body: ListView(
        children: [
          Swiper(pageList: pageList),
        ],
      ),
    );
  }
}

//Swiper 组件
class Swiper extends StatefulWidget {
  final double width;
  final double height;
  final List<Widget> pageList;

  const Swiper(
      {super.key,
      this.width = double.infinity,
      this.height = 200,
      required this.pageList});

  @override
  State<Swiper> createState() => _SwiperState();
}

class _SwiperState extends State<Swiper> {
  late PageController _pageController;
  int _currentPageIndex = 0;
  late Timer timer;

  @override
  void initState() {
    super.initState();

    _pageController = PageController(initialPage: 0);

    const timeOut = Duration(seconds: 3);
    timer = Timer.periodic(timeOut, (timer) {
      //跳转
      _pageController.animateToPage(
          (_currentPageIndex + 1) % (widget.pageList.length),
          curve: Curves.linear,
          duration: const Duration(milliseconds: 200));
    });
  }

  @override
  void dispose() {
    super.dispose();

    timer.cancel();
    _pageController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        SizedBox(
          width: double.infinity,
          height: 200,
          child: PageView.builder(
            controller: _pageController,
            onPageChanged: (value) {
              setState(() {
                _currentPageIndex = value % (widget.pageList.length);
              });
            },
            itemCount: 10000,
            itemBuilder: (context, index) =>
                widget.pageList[index % (widget.pageList.length)],
          ),
        ),
        Positioned(
            bottom: 10,
            left: 0,
            right: 0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(widget.pageList.length, (i) {
                return Container(
                  margin: const EdgeInsets.fromLTRB(2, 0, 2, 0),
                  width: 10,
                  height: 10,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color:
                          _currentPageIndex == i ? Colors.blue : Colors.grey),
                );
              }).toList(),
            )),
      ],
    );
  }
}

///PicturePage
class PicturePage extends StatefulWidget {
  final String url;
  final double width;
  final double height;
  const PicturePage(
      {super.key,
      required this.url,
      this.width = double.infinity,
      this.height = 200});

  @override
  State<PicturePage> createState() => _PicturePageState();
}

class _PicturePageState extends State<PicturePage> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: widget.width,
      height: widget.height,
      child: Image.network(widget.url, fit: BoxFit.cover),
    );
  }
}

5、缓存 pageView

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

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

class _PageViewPageState extends State<PageViewPage> {
  List<Widget> childre = <Widget>[];

  @override
  void initState() {
    super.initState();

    for (var i = 0; i < listData.length; i++) {
      childre.add(PicturePage1(url: listData[i]["imageUrl"]));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("测试"),
      ),
      body: ListView(
        children: [
          AspectRatio(
            aspectRatio: 16 / 9,
            child: PageView(
              children: childre,
            ),
          ),
          const Text("text组件"),
        ],
      ),
    );
  }
}

///PicturePage1
class PicturePage1 extends StatefulWidget {
  final String url;
  const PicturePage1({super.key, required this.url});

  @override
  State<PicturePage1> createState() => _PicturePage1State();
}

class _PicturePage1State extends State<PicturePage1>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Center(
      child: AspectRatio(
        aspectRatio: 16 / 9,
        child: Image.network(
          widget.url,
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

flutter组件PageView
这个组件经常用到，而我在项目中用到最典型的是结合bottomNavigationBar 实现iOS的TabbarC...
Flutter 滚动组件之PageView
介绍 PageView是一页一页滚动的列表组件，类似于Android中的ViewPager 属性 scrollDi...
Flutter（16）：Material组件之PageView
Flutter教学目录[https://www.jianshu.com/p/3320350b3814]持续更新中 ...
Flutter的PageView组件
基本用法 PageView可以实现组件滑动效果。不仅可以水平滑动而且可以进行垂直滑动，简单使用如下： PageVi...
Flutter中PageView的滑动开始监听、完成监听自定义
最近Flutter项目开发中，用到了PageView的上下滚动，但是正常的PageView的使用，onPageCh...
Flutter 之 PageView 控件
相当于 Android 的 ViewPager 效果。不过 PageView 还带有垂直方向的滚动。 PageVi...
Flutter Widgets 之 PageView
注意：无特殊说明，Flutter版本及Dart版本如下：Flutter版本： 1.12.13+hotfix.5Da...
Flutter Widgets 之 PageView
Flutter Widgets 之 PageViewhttps://juejin.im/post/68449040...
Flutter - PageView
滑屏翻页，我们可以用到PageView这个组件
Flutter PageView