第二十五回：PageView Widget

最新推荐文章于 2025-05-01 08:54:53 发布

talk_8

最新推荐文章于 2025-05-01 08:54:53 发布

阅读量650

点赞数

分类专栏：一起Talk Flutter吧文章标签： android flutter PageView

本文链接：https://blog.csdn.net/talk_8/article/details/130536117

版权

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

文章介绍了Flutter的PageViewWidget，它用于实现左右或上下滑动展示不同页面的效果。PageView包含如scrollDirection、children和onPageChanged等属性，其中scrollDirection控制滑动方向，children存放页面内容，onPageChanged在页面切换时触发。示例代码展示了如何创建并配置一个包含三个页面的PageView。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在上一章回中介绍了如何屏蔽事件关的内容,本章回中将介绍 PageView Widget.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里介绍的PageView是指左右滑动或者上下滑动显示不同的页面，Flutter把它封装成了独立的Widget。如果有看官们会Android编程的话，就会发现它的功能和ViewPage以及ViewPage2的功能类似。本章回中将详细它的使用方法。

使用方法

和其它的组件一样，PageView提供了相关的属性来控制自己，我们只需要给属性赋值就可以，下面是常用的属性：

scrollDirection属性用来控制滑动的方向，例如Axis.horizontal表示水平滑动时切换页面；
children属性用来存放滑动的页面，它是一个List，可以存放多个页面；
onPageChanged属性是一个回调方法，当页面滑动时它就会被回调，方法中的参数是页面的索引值，索引值与children中的数量一致，不过是从0开始；

示例代码

return Scaffold(
  appBar: AppBar(
    title: const Text("Example of PaveView"),
    backgroundColor: Colors.purpleAccent,
  ),
  body: PageView(
    scrollDirection: Axis.horizontal,
    onPageChanged: (value){print("onPage Changed: ${value}");},
    children: [
      Container(
        alignment: Alignment.center,
        //长度和调试没有效果，会填充满整个屏幕
        width: 100,
        height: 300,
        color: Colors.lightBlue,
        child: const Text("Page 1"),
      ),
      Container(
        alignment: Alignment.center,
        color: Colors.greenAccent,
        child: const Text("Page 2"),
      ),
      Container(
        alignment: Alignment.center,
        color: Colors.brown,
        child: const Text("Page 3"),
      ),
    ],
  ),
);