flutter实现网格列表

flutter实现网格列表

1. 简单实现网格列表

import 'package:flutter/material.dart';
import 'list_data.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('网格列表！')),
        body: HomeGridView(),
      ),
    );
  }
}

class HomeGridView extends StatelessWidget {

  List<Widget> _getListData(){
    List<Widget> tempList = new List();
    for(var i=0; i<20; i++){
      tempList.add(Container(
        alignment: Alignment.center,
        color: Colors.deepOrange,
        child: Text("这是第$i个文本列表！"),
      ));
    }
    return tempList;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: GridView.count(
        crossAxisCount: 2, //控制有几列Widget
        mainAxisSpacing: 20.0, //水平子Widget之间的距离
        crossAxisSpacing: 20.0, //处置子Widget之间的距离
        padding: EdgeInsets.all(10), //控制Widget距页面之间的距离
        children: this._getListData()
      ),
    );
  }
}

2. 读取已经写好的列表中数据，方法一

import 'package:flutter/material.dart';
import 'list_data.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('网格列表！')),
        body: HomeGridView(),
      ),
    );
  }
}

class HomeGridView extends StatelessWidget {

  List<Widget> _getListData(){
    var tempList = listData.map((value){
      return Container(
        child: Column(
          children: [
            Image.network(value['imageUrl']),
            SizedBox(
              height: 10,
            ),//用来调节文字和图片之间距离的，因为Text组件中不带padding属性
            Text(
              value['title'],
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.blue,
                fontSize: 15
              ),
            )
          ],
        ),
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.yellow,
            width: 1
          ),
        ),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: GridView.count(
        crossAxisCount: 2, //控制有几列Widget
        mainAxisSpacing: 20.0, //水平子Widget之间的距离
        crossAxisSpacing: 20.0, //处置子Widget之间的距离
        padding: EdgeInsets.all(10), //控制Widget距页面之间的距离
        children: this._getListData()
      ),
    );
  }
}

3. 方法二：

import 'package:flutter/material.dart';
import 'list_data.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('网格列表！')),
        body: HomeGridView(),
      ),
    );
  }
}

class HomeGridView extends StatelessWidget {

  Widget _getListData(context, index){
      return Container(
        child: Column(
          children: [
            Image.network(listData[index]['imageUrl']),
            SizedBox(
              height: 10,
            ),//用来调节文字和图片之间距离的，因为Text组件中不带padding属性
            Text(
              listData[index]['title'],
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.blue,
                fontSize: 15
              ),
            )
          ],
        ),
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.yellow,
            width: 1
          ),
        ),
      );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          mainAxisSpacing: 15,
          crossAxisSpacing: 15,
          crossAxisCount: 2
        ),
        itemCount: listData.length,
        itemBuilder: this._getListData
    );
  }
}

总结：

方法一和方法二的不同之处在于，方法一是先把数组中的值赋值给tempList，然后tempList再把值给到GridCount，而方法二是直接把值给返回了过去