flutter 六：视图

1.PageView页面视图

import 'package:flutter/material.dart';

class PageViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return PageView(
        pageSnapping: false, //弹簧效果，默认开启
        reverse: true, //最后一页，会变成第一页，第一页变成最后一页
        scrollDirection: Axis.vertical, //滚动方向，垂直，默认水平
        onPageChanged: (currentPage) =>
            debugPrint('Page:$currentPage'), //滑动改变到对应页，会触发回调
        controller: PageController(
          initialPage: 1, //初始显示的页面，默认是0，第一个
          keepPage: false, //默认会记住用户滚动到哪个页面,可以设置为false
          viewportFraction: 0.85, //占用的比列，滚动方向
        ),
        children: <Widget>[
          Container(
            color: Colors.brown[900],
            alignment: Alignment(0.0, 0.0),
            child: Text(
              'ONE',
              style: TextStyle(fontSize: 32.0, color: Colors.white),
            ),
          ),
          Container(
            color: Colors.brown[900],
            alignment: Alignment(0.0, 0.0),
            child: Text(
              'TWO',
              style: TextStyle(fontSize: 32.0, color: Colors.white),
            ),
          ),
          Container(
            color: Colors.brown[900],
            alignment: Alignment(0.0, 0.0),
            child: Text(
              'THREE',
              style: TextStyle(fontSize: 32.0, color: Colors.white),
            ),
          ),
        ]);
  }
}

2.PageView.builder 按需生成页面

可以用model的形式产生视图
图片没生成是因为网站链接出问题。

import 'package:flutter/material.dart';
import '../model/post.dart';

class ViewDemo extends StatelessWidget {
  Widget _pageItemBuilder(BuildContext context, int index) {
    return Stack(children: <Widget>[
      SizedBox.expand(
        child: Image.network(
          posts[index].imageUrl,
          fit: BoxFit.cover,
        ),
      ),
      Positioned(//可以显示一些文字
          bottom: 8.0,
          left: 8.0,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                posts[index].title,
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              Text(
                posts[index].author,
              )
            ],
          ))
    ]);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return PageView.builder(
      itemCount: posts.length,
      itemBuilder: _pageItemBuilder,
    );
  }
}

3.网格视图

3.1 GridView.count

class ViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.count(
      //创建网格视图最方便的是GridView.count
      crossAxisCount: 3, //对于网格视图crossAxis是水平方向3个
      crossAxisSpacing: 16.0, //添加一点边距
      mainAxisSpacing: 16.0,//对于网格视图crossAxis是垂直方向
      children: <Widget>[
        Container(
          color: Colors.grey[300],
          alignment: Alignment(0.0, 0.0),
          child: Text(
            'Item',
            style: TextStyle(fontSize: 18.0, color: Colors.red),
          ),
        ), //可以复制几份Container
        Container(
          color: Colors.grey[300],
          alignment: Alignment(0.0, 0.0),
          child: Text(
            'Item',
            style: TextStyle(fontSize: 18.0, color: Colors.red),
          ),
        ),
        Container(
          color: Colors.grey[300],
          alignment: Alignment(0.0, 0.0),
          child: Text(
            'Item',
            style: TextStyle(fontSize: 18.0, color: Colors.red),
          ),
        ),
        Container(
          color: Colors.grey[300],
          alignment: Alignment(0.0, 0.0),
          child: Text(
            'Item',
            style: TextStyle(fontSize: 18.0, color: Colors.red),
          ),
        ),
        Container(
          color: Colors.grey[300],
          alignment: Alignment(0.0, 0.0),
          child: Text(
            'Item',
            style: TextStyle(fontSize: 18.0, color: Colors.red),
          ),
        ),
      ],
    );
  }
}

用方法生成网格视图

class ViewDemo extends StatelessWidget {
  List<Widget> _buildTitles(int length) {
    return List.generate(length, (int index) {
      return Container(
        color: Colors.grey[300],
        alignment: Alignment(0.0, 0.0),
        child: Text(
          'Item',
          style: TextStyle(fontSize: 18.0, color: Colors.red),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.count(
      //创建网格视图最方便的是GridView.count
      crossAxisCount: 3, //对于网格视图crossAxis是水平方向3个
      crossAxisSpacing: 16.0, //添加一点边距
      mainAxisSpacing: 16.0, //对于网格视图crossAxis是垂直方向
      children: _buildTitles(100),
    );
  }
}

GridViewExtent

方式和GridViewCount类似

class GridViewExtentDemo extends StatelessWidget {
  List<Widget> _buildTitles(int length) {
    return List.generate(length, (int index) {
      return Container(
        color: Colors.grey[300],
        alignment: Alignment(0.0, 0.0),
        child: Text(
          'Item',
          style: TextStyle(fontSize: 18.0, color: Colors.red),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return GridView.extent(
      //和GridView.count类似
      maxCrossAxisExtent: 150.0, //在交叉轴上的最大尺寸
      crossAxisSpacing: 16.0, //添加一点边距
      mainAxisSpacing: 16.0, //对于网格视图crossAxis是垂直方向
      //scrollDirection: Axis.horizontal, //设置主轴
      children: _buildTitles(100),
    );
  }
}

按需生成视图项目

按gride=view.count或者gridview.extent生成的网格视图，他们的网格数量是固定的。可以用gridviewbuilder按需生成视图项目