Flutter GridView

GridView.count

for循环

class HomeContext extends StatelessWidget {

  List<Widget> _getData() {
    List<Widget> list = new List();
    for(var i=0;i<20;i++){
      list.add(Container(
        alignment: Alignment.center,
        child: Text('第$i条数据'),
        color: Colors.deepPurpleAccent,
        height: 5000,//在GridView设置无效，要用childAspectRatio
      ));
    }
    return list;

  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.count(
      crossAxisSpacing: 20,//Widget之间的左右间距
      mainAxisSpacing:10,//上下间距
      padding: EdgeInsets.all(10),
      crossAxisCount: 2,//每一行Widget的数量
      children: this._getData(),
      childAspectRatio: 0.8,//宽度和高度的比例
    );
  }
}

map循环ListView实现

class HomeContext extends StatelessWidget {

  List<Widget> _getData() {
    return listData.map((value){
      return Container(
        child: ListView(
          children: <Widget>[
            ListTile(
              title: Text(value['title']),
              subtitle: Text(value['author']),
              leading: Image.network(value['imgUrl']),
            )
          ],
        ),
      );
    }).toList();


  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.count(
      padding: EdgeInsets.all(10),
      crossAxisCount: 2,//每一行Widget的数量
      children: this._getData(),
    );
  }
}

Column实现

class HomeContext extends StatelessWidget {

  List<Widget> _getData() {
    return listData.map((value){
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(value['imgUrl'],
            height: 240,),
            SizedBox(height: 10),//让下方文字与上方多十间距
            Text(value['title'],
            style: TextStyle(
              fontSize: 15
            ),),
          ],
        ),
        decoration: BoxDecoration(
          border: Border.all(//设置边框
            color: Colors.black26,
            width: 1
          )
        ),
      );
    }).toList();


  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.count(
      padding: EdgeInsets.all(10),
      crossAxisSpacing: 10,
      crossAxisCount: 2,//每一行Widget的数量
      children: this._getData(),
      childAspectRatio: 0.6,
    );
  }
}

GridView.builder实现相同效果

class HomeContext extends StatelessWidget {

Widget _getData(context,index) {

      return Container(
        child: Column(
          children: <Widget>[
            Image.network(listData[index]['imgUrl'],
            height: 240,),
            SizedBox(height: 10),//让下方文字与上方多十间距
            Text(listData[index]['title'],
            style: TextStyle(
              fontSize: 15
            ),),
          ],
        ),
        decoration: BoxDecoration(
          border: Border.all(//设置边框
            color: Colors.black26,
            width: 1
          )
        ),
      );


  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        padding: EdgeInsets.all(10),
        child:GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisSpacing: 10,
          crossAxisCount: 2,//每一行Widget的数量
          childAspectRatio: 0.6),
        itemCount: listData.length,
        itemBuilder: this._getData)
    );
  }
}