PageView滚动视图

使用PageView.builder方式构造视图

class PageViewBuilderDemo extends StatelessWidget {
  // 定义PageView的item项
  Widget _pageItemBuilder(BuildContext context, int index) {
    return Stack(
      children: <Widget>[
        SizedBox.expand(// expand让SizeBox的尺寸可以占满所有可用空间
          child: Image.network(items[index].imageUrl, fit: BoxFit.cover,),
        ),
        Positioned(
          bottom: 8.0,
          left: 8.0,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(items[index].title, style: TextStyle(fontWeight: FontWeight.bold),),
              Text(items[index].subTitle),
            ],
          )
        ),
      ],
    );
  }
  // 使用PageView.builder方式构造视图
  @override
  Widget build(BuildContext context) {
    return PageView.builder(itemCount: items.length, itemBuilder: _pageItemBuilder,);
  }
}

直接添加在PageView的children里面添加简单的滚动视图

class PageViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PageView(
//      pageSnapping: false, // 设置是否有分页效果
//      reverse: true, // 设置视图顺序是否颠倒
      scrollDirection: Axis.horizontal, // 设置滚动方向，默认是水平方向
      // 显示当前页面的回调
      onPageChanged: (currentPage) => debugPrint('Page : $currentPage'),
      controller: PageController(
        initialPage: 0, // 控制初始显示的页面，默认为0
        // 默认PageView会记住用户滚动到哪个页面，如果不想记住就设置此属性为false，默认为true
        keepPage: false,
//        viewportFraction: 0.9, // 设置视图占用可视口的比例。默认为1即100%
      ),

      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.green,
          alignment: Alignment(0.0, 0.0),
          child:  Text('TWO', style:  TextStyle(fontSize: 32.0, color: Colors.white),),
        ),
        Container(
          color: Colors.orange,
          alignment: Alignment(0.0, 0.0),
          child:  Text('THREE', style:  TextStyle(fontSize: 32.0, color: Colors.white),),
        ),
      ],
    );
  }
}

GridView网格视图

使用GridView.count构造网格视图

class GridViewCountDemo {
  // 定义网格列表项集合
  List<Widget> _buildTiles(int length) {
    return List.generate(length, (int index){
      return Container(
        color: Colors.grey[300],
        alignment: Alignment(0, 0),
        child: Text('Item', style: TextStyle(fontSize: 18.0, color: Colors.grey),),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3, // 设置在交叉轴上每一行显示的数量
      crossAxisSpacing: 15.0, // 设置交叉轴边距
      mainAxisSpacing: 10.0, // 设置主轴边距
      scrollDirection: Axis.vertical, // 设置滚动方向，默认为垂直方向
      children: _buildTiles(100),
    );
  }
}

使用GridView.extent构造网格视图

class GridViewExtentDemo extends StatelessWidget {
  // 定义网格列表项集合
  List<Widget> _buildTiles(int length) {
    return List.generate(length, (int index){
      return Container(
        color: Colors.grey[300],
        alignment: Alignment(0, 0),
        child: Text('Item', style: TextStyle(fontSize: 18.0, color: Colors.grey),),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      maxCrossAxisExtent: 100.0, // 网格视图item在交叉轴上的最大尺寸
      crossAxisSpacing: 15.0, // 设置交叉轴边距
      mainAxisSpacing: 10.0, // 设置主轴边距
      scrollDirection: Axis.vertical, // 设置滚动方向，默认为垂直方向
      children: _buildTiles(100),
    );
  }
}

使用GridView.builder构造网格视图

class GridViewBuilderDemo extends StatelessWidget {
  // 定义GridView的item
  Widget _gridItemBuilder(BuildContext context, int index) {
    return Container(
      child: Image.network(items[index].imageUrl, fit: BoxFit.cover,),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: items.length,
      itemBuilder: _gridItemBuilder,
      // 控制网格视图item的显示，也可用SliverGridDelegateWithMaxCrossAxisExtent
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3, // 交叉轴显示的个数
        crossAxisSpacing: 10, // 交叉轴间距
        mainAxisSpacing: 10, // 主轴间距
      ),
    );
  }
}