美文网首页
Flutter 基础控件之GridView 瀑布流

Flutter 基础控件之GridView 瀑布流

作者: 繁华乱世沧桑了谁的容颜 | 来源:发表于2020-08-21 10:27 被阅读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),
    ],
  ),
);
}
}

效果如下:


效果图

相关文章

网友评论

      本文标题:Flutter 基础控件之GridView 瀑布流

      本文链接:https://www.haomeiwen.com/subject/oxlsjktx.html