Flutter 基础控件之GridView 瀑布流

2020-08-21  本文已影响0人  繁华乱世沧桑了谁的容颜
class MyGridVuew extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
  // color: Colors.lightBlue,
  child: GridView(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 4, //列数
      mainAxisSpacing: 2.0, //行间距
      crossAxisSpacing: 2.0, //列间距
      childAspectRatio: 0.8, //宽高比 宽相对于高的倍数
    ),
    children: <Widget>[
      new Image.network(
        'http://img31.mtime.cn/mt/2014/03/07/123549.37376649_96X128.jpg',
        fit: BoxFit.cover,
      ),
      new Image.network(
          'http://img31.mtime.cn/mt/2014/01/06/105446.89493583_96X128.jpg',
          fit: BoxFit.cover),
      new Image.network(
          'http://img31.mtime.cn/mt/2014/06/17/145457.44209161_96X128.jpg',
          fit: BoxFit.cover),
      new Image.network(
          'http://img31.mtime.cn/mt/2013/11/29/102947.25583478_96X128.jpg',
          fit: BoxFit.cover),
      new Image.network(
          'http://img31.mtime.cn/mt/2016/07/28/145303.88789702_96X128.jpg',
          fit: BoxFit.cover),
      new Image.network(
          'http://img31.mtime.cn/mt/2013/11/20/172527.42989246_96X128.jpg',
          fit: BoxFit.cover),
      new Image.network(
          'http://img31.mtime.cn/mt/2014/09/12/102734.13658001_96X128.jpg',
          fit: BoxFit.cover),
    ],
  ),
);
}
}

效果如下:


效果图
上一篇 下一篇

猜你喜欢

热点阅读