GridView 网格布局

GridView.count 静态网格布局

页面均分布局,对设置高度,宽度是无效的.但是可以通过childAspectRatio(宽度/高度的比例.)属性来配置宽高比例来控制显示效果.

通过循环一套数据,使用上面的属性来控制GridView效果:

import "package:flutter/material.dart";
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        title: 'belineApp',
        home: Scaffold(
          appBar: AppBar(
            title: Text('my app'),
          ),
          body: StateList()
        )
      )
    );
  }
}
class StateList extends StatelessWidget {
  @override
  List<Widget> _getListData() {
    List<Widget> list = new List();
    for(var i=0; i< 2000; i ++) {
      list.add(
        Container(
          alignment: Alignment.center,
          color:Colors.orange,
          child: Text('这是第${i}个盒子',
            textAlign: TextAlign.center,
          ),
        )
      );
    }
    return list;
  }
  Widget build(BuildContext context) {
    return GridView.count(
      padding: EdgeInsets.all(16), //- 距离页面边框的宽度
      crossAxisSpacing: 20.0, //- 水平子Widget 之间间距
      mainAxisSpacing: 20.0, //- 垂直子Widget 之间间距
      crossAxisCount: 4, //- 一行的Widget 数量
      children: _getListData(),
    );
  }
}

页面展现:

image.png

下面我们模拟一个真实的列表数据渲染到页面上注意的知识点:
1.Column 竖向布局方式
竖向布局虽然能够像html一样,竖向进行布局,但是这里采用的网格布局会限制成一个正方形,如果图片是长方形,会被拆切,所以需要用到childAspectRatio控制比例,竖向长方形进行显示
2.toList()
此处我们采用是模拟数据,通过map方法便利之后,获得的数据格式为:('****','****').所以我们要最后返回的时候调用toList()方法,才能够正确返回一个List
3.SizedBox
由于Text组件没有padding和margin属性,所以文字的上方,我们可以使用SizedBox组件撑开一定高度
4.decoration: BoxDecoration()
Container修饰功能,可以对Container添加很多属性,例如border边框
先把页面效果展示一下

image.png

代码如下:

import "package:flutter/material.dart";
import 'src/datalist.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        title: 'belineApp',
        home: Scaffold(
          appBar: AppBar(
            title: Text('my app'),
          ),
          body: StateList()
        )
      )
    );
  }
}
class StateList extends StatelessWidget {
  @override
  List<Widget> _getListData() {
    List<Widget> list = new List();
    var tempList = dataList.map((val) {
      return Container(
        child: Column (
          children: <Widget>[
            Image.network(val['picUrl']),
            SizedBox(height: 10),   //- Text组件是没有padding和margin属性的,所以可以使用SizedBox把文本顶下来
            Text(
              val['title'],
              textAlign: TextAlign.center, //- 文字居中
              style: TextStyle(  //- 设置样式
                fontSize: 14
              )
            )
          ],
        ),
        decoration: BoxDecoration( //- 修饰Container
          border: Border.all(   //- 设置边框
            color:Color.fromRGBO(233, 233, 233, 0.9),
            width: 1
          )
        ),
      );
    });
    return tempList.toList();
  }
  Widget build(BuildContext context) {
    return GridView.count(
      padding: EdgeInsets.all(16), //- 距离页面边框的宽度
      crossAxisSpacing: 20.0, //- 水平子Widget 之间间距
      mainAxisSpacing: 20.0, //- 垂直子Widget 之间间距
      crossAxisCount: 2, //- 一行的Widget 数量,
      childAspectRatio: 0.6,  //- 设置宽度和高度的比例
      children: _getListData(),
    );
  }
}

GridView.builder 动态网格布局

• 使用动态网格布局,GridView.builder下的itemBuilder需要通过访问下文context自动遍历数组内容,返回值要求是一个Widget所以,我们的_getListData函数无需再次遍历数组,只需要通过传入的index渲染对应的数据,返回一个Widget即可.
• 通过itemCount属性设置显示的条数
• GridView.builder是不能直接设置间距以及比例和一行的数量的,需要通过调用gridDelegate: SliverGridDelegateWithFixedCrossAxisCount()进行配置.
  最后呈现的效果如下:
  
  image.png

代码内容:

import "package:flutter/material.dart";
import 'src/datalist.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        title: 'belineApp',
        home: Scaffold(
          appBar: AppBar(
            title: Text('my app'),
          ),
          body: StateList()
        )
      )
    );
  }
}
class StateList extends StatelessWidget {
  Widget _getListData(context, index) {
    return Container(
        child: Column (
          children: <Widget>[
            Image.network(dataList[index]['picUrl']),
            SizedBox(height: 10),   //- Text组件是没有padding和margin属性的,所以可以使用SizedBox把文本顶下来
            Text(
              dataList[index]['title'],
              textAlign: TextAlign.center, //- 文字居中
              style: TextStyle(  //- 设置样式
                fontSize: 14
              )
            )
          ],
        ),
        decoration: BoxDecoration( //- 修饰Container
          border: Border.all(   //- 设置边框
            color:Color.fromRGBO(233, 233, 233, 0.9),
            width: 1
          )
        ),
      );
  }
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisSpacing: 20.0, //- 水平子Widget 之间间距
        mainAxisSpacing: 20.0, //- 垂直子Widget 之间间距
        crossAxisCount: 2, //- 一行的Widget 数量,
        childAspectRatio: 0.65,  //- 设置宽度和高度的比例
      ),
      itemCount: dataList.length,
      itemBuilder: _getListData
    );
  }
}

这样两种方式就介绍完了.下面提供页面中使用的引入数据:datalist.dart

List dataList= [
  {
    'id': 1,
    'title': '逃离比勒陀利亚 BD高清',
    'picUrl': 'https://maopu.tv/d/thumb/c7fdf27814c2968a48afeee047cc6cf1.jpg'
  },
  {
    'id': 2,
    'title': '公子多情 BD高清',
    'picUrl': 'https://maopu.tv/d/thumb/253a5b3fb4cee46f8410627c0e57d74c.jpg'
  },
  {
    'id': 3,
    'title': '布娃娃 BD高清',
    'picUrl': 'https://maopu.tv/d/thumb/489f4fa35ad58fb414c3bae1bc071d47.jpg'
  },
  {
    'id': 4,
    'title': '新咒怨(美版) BD高清',
    'picUrl': 'https://maopu.tv/d/thumb/68ee6e7c4415c2f1f14d54b93a623ce2.jpg'
  },
  {
    'id': 5,
    'title': '勇敢者游戏2：再战巅峰 BD',
    'picUrl': 'https://maopu.tv/d/thumb/0fe2c0e536079bcdcebc10e1e4c05685.jpg'
  },
  {
    'id': 6,
    'title': '1917：逆战救兵 BD高清',
    'picUrl': 'https://maopu.tv/d/thumb/224759a75c7ee82d16ae13f274beef67.jpg'
  },
  {
    'id': 7,
    'title': '漫画威龙之大话特务 BD高清',
    'picUrl': 'https://maopu.tv/d/thumb/8694144414306752f759c0d30bfd0323.jpg'
  },
  {
    'id': 8,
    'title': '霹雳娇娃 BD高清',
    'picUrl': 'https://maopu.tv/d/thumb/5c9f6f0c74681e0c9fc7408d9193f30a.jpg'
  },
];