Flutter移动应用：视图（PageView，GridView）

PageView (page视图)

主要属性

1. pageSnapping : true / false 是否弹性判断，拉到少于一半就回弹。
2. reverse : true / false 是否倒置，数据源倒放。
3. scrollDirection : Axis.horizontal / Axis.vertical 滚动方向。
4. onPageChanged: (currentPage) => debugPrint('Page: $currentPage'), :页面切换到第几页会调用该回调。
5. controller: 页面属性 详细见代码里的注释.
6. children: [] 控件列表
7. PageView.builder 根据数据源的多少来创建页面

• 初始化方法1 ：直接创建 children: [] 控件列表

class PageViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return PageView(
      // pageSnapping: false, //是否弹性判断，拉到少于一半就回弹
      // reverse: true,//倒置，数据源倒放
      // scrollDirection: Axis.horizontal, //滚动方向
      onPageChanged: (currentPage) => debugPrint('Page: $currentPage'),
      controller: PageController(
        //页面属性
        initialPage: 1, //默认一开始显示第几个
        keepPage: false, //记录用户的滚到到哪个页面
        viewportFraction: 0.85, //页面占用可视视图的比例，根据滚动方向判断，如果是水平滚动就占用水平方向的 85%
      ),
      children: [
        //初始化页面
        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.grey[900],
          alignment: Alignment(0.0, 0.0),
          child: Text('TWO',
              style: TextStyle(fontSize: 32.0, color: Colors.white)),
        ),
        Container(
          color: Colors.blueGrey[900],
          alignment: Alignment(0.0, 0.0),
          child: Text('THREE',
              style: TextStyle(fontSize: 32.0, color: Colors.white)),
        ),
      ],
    );
  }
}

• 初始化方法2 PageView.builder 根据数据源的多少来创建页面

//数据源
class Post {
  const Post({
    this.title,
    this.author,
    this.imageUrl
  });

  final String title;
  final String author;
  final String imageUrl;
}

final List posts = [
  Post(
    title: 'Candy Shop',
    author: 'Mohamed Chahin',
    imageUrl: 'https://resources.ninghao.org/images/candy-shop.jpg',
  ),
  Post(
    title: 'Childhood in a picture',
    author: 'Mohamed Chahin',
    imageUrl: 'https://resources.ninghao.org/images/childhood-in-a-picture.jpg',
  ),
];

class PageViewBuilderDemo extends StatelessWidget {
//初始化方法 PageView.builder
  Widget _pageItemBuilder(BuildContext context, int index) {
    return Stack(
      children: [
        SizedBox.expand(
          child: Image.network(posts[index].imageUrl, fit: BoxFit.cover),
        ),
        Positioned(
          bottom: 8.0,
          left: 8.0,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(posts[index].title,
                  style: TextStyle(fontWeight: FontWeight.bold)),
              Text(posts[index].author),
            ],
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    // 根据数据源的多少来创建页面
    return PageView.builder(
      itemCount: posts.length,
      itemBuilder: _pageItemBuilder,
    );
  }
}

GirdView (网格视图)

• 初始化方法1 ：直接创建 children: [] 控件列表

class GridViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3, //交叉轴放3个
      mainAxisSpacing: 10,//主轴间隔10
      crossAxisSpacing: 10,//交叉轴间隔10
      children: [
        buildGridItem(),
        buildGridItem(),
        buildGridItem(),
        buildGridItem(),
        buildGridItem(),
        buildGridItem(),
      ],
    );
  }
}
buildGridItem() {
//创建网格 item
  return Container(
    color: Colors.grey[350],
    child: Text(
      'item',
      style: TextStyle(fontSize: 25, color: Colors.grey),
    ),
    alignment: Alignment.center,
  );
}

直接创建 未优化.png

优化一下代码,希望传入item个数来统一创建

//创建一个带 title的 item

buildGridItemWithText(String title) {
  return Container(
    color: Colors.grey[350],
    child: Text(
      title,
      style: TextStyle(fontSize: 25, color: Colors.grey),
    ),
    alignment: Alignment.center,
  );
}

//通过传入 length多少个来创建多少个 item

buildGridsItems(int length) {
  List _buildItemsList(int length) {
    return List.generate(length, (index) {
      return buildGridItemWithText('item$index');
    });
  }
  return _buildItemsList(length);
}

class GridViewDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3, //交叉轴放3个
      mainAxisSpacing: 10,//主轴间隔10
      crossAxisSpacing: 10,//交叉轴间隔10
      children:buildGridsItems(15),
    );
  }
}

通过length创建 item.png