5.Flutter学习之GridView组件

学习自：
Dart Flutter教程_Dart Flutter入门实战****-2019年新出.

GridView网格布局方法参数介绍。

名称	类型	说明
scrollDirection	Axis	滚动方法
padding	EdgeInsetsGeometry	内边距
reverse	bool	组件反向排序
crossAxisSpacing	double	垂直子Widget之间的排序
mainAxisSpacing	double	水平子Widget之间的排序
crossAxisCount	int	一行的Widget数量
childAspectRatio	double	子Widget宽高比例
children	``	<Widget>[]
gridDelegate	SliverGridDelegateWithFixedCrossAxisCount（常用）SliverGridDelegateWithMaxCrossAxisExtent(不常用)	控制布局主要用在GridView.builder里面

注意我们不可改变Container的高度，但我们可以通过childAspectRatio来调整高度。

初试GridView

void main() => runApp(GridApp());

class GridApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GridView的使用'),
        ),
        body: GridViewTest(),
      ),
    );
  }
}


class GridViewTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisSpacing: 20.0,//竖向之间的间距
      mainAxisSpacing: 20.0,  //主轴(横向)之间的间距
        childAspectRatio:0.7,
      padding: EdgeInsets.all(20),
      crossAxisCount: 2, //一行存在几个Widget
      children: _getData(),
    );
  }

  List<Widget> _getData() {
    List<Widget> list = new List<Widget>();
    for (int i = 0; i < 20; i++) {
      list.add(Container(
        color: Colors.red,
        alignment: Alignment.center,
        child: Text(
          '这是第$i个',
          style: TextStyle(color: Colors.amber, fontSize: 20),
        ),
      ));
    }
    return list;
  }
}

将json数据展示到GridView中

我们使用上章中的listData.dart中的数据进行操作。

void main() => runApp(GridApp());

class GridApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('json数据展示GridView'),
        ),
        body: NetGridViewTest(),
      ),
    );
  }
}

class NetGridViewTest extends StatelessWidget {
  List<Widget> _getData() {
    var data = listData.map((value) {
      return Container(
        child: Column(		//相当于垂直的LinearLayout
          children: <Widget>[
            Image.network(
              value['imageUrl'],
            ),
            SizedBox(     
              height: 30,
            ),
            Text(
              value['title'],
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
        decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
      );
    });
    return data.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      mainAxisSpacing: 10,
      crossAxisSpacing: 10,
      padding: EdgeInsets.all(10),
      children: this._getData(),
    );
  }
}

效果展示如下：

GridView.builder加载数据

void main() => runApp(GridApp());

class GridApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('json数据展示GridView'),
        ),
        body: NetGridViewBuilder(),
      ),
    );
  }
}

class NetGridViewBuilder extends StatelessWidget {
  Widget _getData(context,index) {
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(
              listData[index]['imageUrl'],
            ),
            SizedBox(
              height: 30,
            ),
            Text(
              listData[index]['title'],
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
        decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
      );


  }
  
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( //相当于控制器
          crossAxisCount: 2,
          mainAxisSpacing: 10,
          crossAxisSpacing: 10,
        ) ,
        itemCount: 2,
        itemBuilder: _getData,
    );
  }
}

GridView的学习结束，有什么不对的地方，麻烦大家提出。