容纳多个组件页面，可对它们进行滑动切换，可指定滑动的方向、是否反向、滑动控制器等属性。

PageView基本使用

【children】 : 子组件列表 【List】
【onPageChanged】 : 点击事件 【ValueChanged】
11.gif

  1. import 'package:flutter/material.dart';
  2. class CustomPageView extends StatelessWidget {
  3.   final data = <Color>[
  4.     Colors.green[50],
  5.     Colors.green[100],
  6.     Colors.green[200],
  7.     Colors.green[300],
  8.     Colors.green[400],
  9.     Colors.green[500],
  10.     Colors.green[600],
  11.     Colors.green[700],
  12.     Colors.green[800],
  13.     Colors.green[900],
  14.   ];
  16.   @override
  17.   Widget build(BuildContext context) {
  18.     return Container(
  19.       height: 150,
  20.       child: PageView(
  21.         onPageChanged: (position){
  22.           print(position);
  23.         },
  24.         children: data
  25.             .map((color) => Container(
  26.           alignment: Alignment.center,
  27.           width: 90,
  28.           color: color,
  29.           child: Text(
  30.             colorString(color),
  31.             style: TextStyle(color: Colors.white,
  32.                 fontSize:24,shadows: [
  33.               Shadow(
  34.                   color: Colors.black,
  35.                   offset: Offset(.5, .5),
  36.                   blurRadius: 2)
  37.             ]),
  38.           ),
  39.         ))
  40.             .toList(),
  41.       ),
  42.     );
  43.   }
  44.   String colorString(Color color) =>
  45.       "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
  46. }

PageView滑动方向

【scrollDirection】 : 滑动方向 【Axis】
【reverse】 : 是否反向 【bool】
12.gif

import 'package:flutter/material.dart';
class DirectionPageView extends StatelessWidget {
  final data = <Color>[
    Colors.orange[50],
    Colors.orange[100],
    Colors.orange[200],
    Colors.orange[300],
    Colors.orange[400],
    Colors.orange[500],
    Colors.orange[600],
    Colors.orange[700],
    Colors.orange[800],
    Colors.orange[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      child: PageView(
        scrollDirection: Axis.vertical,
        reverse: true,
        onPageChanged: (position) {
          print(position);
        },
        children: data
            .map((color) =>
            Container(
              alignment: Alignment.center,
              width: 90,
              color: color,
              child: Text(
                colorString(color),
                style: TextStyle(color: Colors.white,
                    fontSize: 24, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
              ),
            ))
            .toList(),
      ),
    );
  }

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}

PageView控制器简单实用

【controller】 : 页面控制器 【PageController】
13.gif

import 'package:flutter/material.dart';
class CtrlPageView extends StatefulWidget {
  @override
  _CtrlPageViewState createState() => _CtrlPageViewState();
}

class _CtrlPageViewState extends State<CtrlPageView> {
  final data = <Color>[
    Colors.orange[50],
    Colors.orange[100],
    Colors.orange[200],
    Colors.orange[300],
    Colors.orange[400],
    Colors.orange[500],
    Colors.orange[600],
    Colors.orange[700],
    Colors.orange[800],
    Colors.orange[900],
  ];

  PageController _controller;

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

  @override
  void initState() {
    super.initState();
    _controller=PageController(
      viewportFraction: 0.8,
      initialPage: (data.length/2).round()
    );

  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      child: PageView(
        controller: _controller,
        onPageChanged: (position) {
          print(position);
        },
        children: data
            .map((color) =>
            Container(
              alignment: Alignment.center,
              width: 90,
              color: color,
              child: Text(
                colorString(color),
                style: TextStyle(color: Colors.white,
                    fontSize: 24, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
              ),
            ))
            .toList(),
      ),
    );
  }

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}