[] Entry Flutter 08-PageView

Basic

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Gecer')),
      body: PageView(    
        children: <Widget>[
          MyContainer(Colors.red, 'ONE'),
          MyContainer(Colors.yellow, "TWO"),
          MyContainer(Colors.blue, "THREE"),
        ],
      ),
    );
  }
}

class MyContainer extends StatelessWidget {
  Color _color;
  String _content;
  MyContainer(this._color, this._content);
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment(0, 0),
      color: _color,
      child: Text(
        _content,
        style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
      ),
    );
  }
}

Cross-page display

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Gecer')),
      body: PageView(
        pageSnapping: false, //可以跨页显示     
        children: <Widget>[
          MyContainer(Colors.red, 'ONE'),
          MyContainer(Colors.yellow, "TWO"),
          MyContainer(Colors.blue, "THREE"),
        ],
      ),
    );
  }
}

Specify the display direction

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Gecer')),
      body: PageView(
        pageSnapping: false, //可以跨页显示     
        scrollDirection: Axis.vertical,
        children: <Widget>[
          MyContainer(Colors.red, 'ONE'),
          MyContainer(Colors.yellow, "TWO"),
          MyContainer(Colors.blue, "THREE"),
        ],
      ),
    );
  }
}

Invert the display order (reverse: true)

Gets the index page display

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Gecer')),
      body: PageView(
        // pageSnapping: false, //可以跨页显示,不能与onPageChanged一起使用     
        onPageChanged: (pageIndex) {
          debugPrint('pageIndex : $pageIndex');
        },       
        scrollDirection: Axis.vertical,
        children: <Widget>[
          MyContainer(Colors.red, 'ONE'),
          MyContainer(Colors.yellow, "TWO"),
          MyContainer(Colors.blue, "THREE"),
        ],
      ),
    );
  }
}

Controller

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Gecer')),
      body: PageView(
        controller: PageController(
            initialPage: 2, //初始页面
            viewportFraction: 0.8 //显示比例
        ),
        scrollDirection: Axis.vertical,
        children: <Widget>[
          MyContainer(Colors.red, 'ONE'),
          MyContainer(Colors.yellow, "TWO"),
          MyContainer(Colors.blue, "THREE"),
        ],
      ),
    );
  }
}

Create a view using a circular manner

class Home extends StatelessWidget {
  var _datas=['ONE','TWO','THREE'];
  var _colors=[Colors.red,Colors.yellow,Colors.blue];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Gecer')),
      body: PageView.builder(
        itemCount: _datas.length,
        itemBuilder: (BuildContext context,int index){
        return MyContainer(_colors[index],_datas[index]);
        }
      )
    );    
  }
}