当前位置：首页 > article >正文

PageView组件的功能和用法

article 2025/1/27 3:59:07

文章目录

1 概念介绍
2 使用方法
3 示例代码

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

在这里插入图片描述

1 概念介绍

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

2 使用方法

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

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

3 示例代码

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"),
      ),
    ],
  ),
);

上面的代码中我们给PageVeiw添加了三个页面，每个页面的背景颜色不同，而且页面中间显示页面序号。注意页面会填充满整个屏幕，即使指定长度和宽度也没有效果。
代码中onPageChanged属性对应的方法没有做太多的事情，只是把当前页面的索引值打印到日志中。我们在这里只列出了核心代码，完整的代码可以查看Github上
ex015文件中的代码。编译并且运行上面的程序就会得到一个可以滑动的页面，从左向右滑动页面时可以在三个页面之间进行切换，同时会在日志窗口中会打印出页面的
索引值。我们在这里就不演示程序运行效果了，建议大家自己动手去实践。
看官们，关于PageView Widget相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!

查看全文

http://www.kler.cn/a/518316.html