如何实现分页相关功能

文章目录

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

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

如何实现分页相关功能_第1张图片

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相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

你可能感兴趣的:(一起Talk,Flutter吧,移动开发Flutter)