Flutter中的可滚动列表组件-PageView

PageVIew，可滚动的视图列表组件，而且每一个子组件的大小都和视图窗口大小一样。

属性：

• controller -> PageController 用于控制视图页面滚动到的位置
• children 视图页面列表
• scrollDirection 页面滚动的方向，从左往右，或者从上往下
• onPageChanged 视图页面发生转换的时候进行的函数操作
• reverse 对视图页面的排列顺序进行反转

效果：

 

PageView的用法

在项目的main.dart中的代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo Code',style: TextStyle(color: Colors.white),),
        centerTitle: true,
      ),
      body: Container(
        height: 500.0,//确保pageview的高度
        child: PageView(
          controller: PageController(
            initialPage: 0,//让初始页为第一个pageview的实例
            viewportFraction: 1.0//让页面视图充满整个视图窗口 即充满400px高的视图窗口
          ),
          children: <Widget>[
            Container(
              color: Colors.yellow,
              child: Center(
                child: Text('这是第一个pageView的实例',style: TextStyle(color: Colors.white,fontSize: 20.0),),
              ),
            ),
            Container(
              color: Colors.red,
              child: Center(
                child: Text('这是第二个pageView的实例',style: TextStyle(color: Colors.white,fontSize: 20.0),),
              ),
            ),
            Container(
              color: Colors.green,
              child: Center(
                child: Text('这是第三个pageView的实例',style: TextStyle(color: Colors.white,fontSize: 20.0),),
              ),
            )
          ],
          scrollDirection: Axis.vertical,//上下滚动
          onPageChanged: (int index) {
            print('这是第${index}个页面');
          },
          reverse: false,//是否反转页面的顺序
        ),
      ),
    );
  }
}

 如果container的高度500没有设置的话，每个页面的大小将是手机的可视高度。

如果controller中的initialPage设置为1，则当前显示的页面时第二个页面

viewprotFraction的默认值为1.0，表示页面视图充满整个父容器。若是0.5，则页面视图的高度是父容器高度的一半。