Flutter开发(四)——GridView组件

GridView,顾名思义就是我们用来做网格的,通常我们用来做相册,或者网格状的展示栏 

 

上码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: 'roadkiller',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('roadkiller'),
        ),
        body:GridView(
            padding: new EdgeInsets.all(3.0),//学过前端好理解吧
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount:2,//一行放几幅图片
                mainAxisSpacing: 2.0,//行距
                crossAxisSpacing: 2.0,//列距
                childAspectRatio: 0.75//图片宽高比,因为海报一般长:宽是4:3嘛所以我搞的是这样
          ),
          children: <Widget>[
            new Image.network('https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3246509238,1077330305&fm=58&s=DFD513C6886286D432620FBC0300301F'),
            new Image.network('https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2512763846,3067531314&fm=58&s=9102AEFBD3A7E4EE4437527303008074'),
            new Image.network('https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2585813656,2994285865&fm=58&s=C5649A468F378ECC266911AC03008012'),
            new Image.network('https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3351456143,3085413485&fm=58&s=0CC0F804845BBFCE320951990300C082'),
            new Image.network('https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=581555814,2183385336&fm=58&s=2740D94FDE3283DC1259A91301008092'),
            new Image.network('https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3527165871,1016449403&fm=58&s=787B20C402B38BC456651C8D0300E088'),
            new Image.network('https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2801239214,2575519245&fm=58'),
            new Image.network('https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3895436776,1493313546&fm=58&s=C115C730589647FF5E89F0C5030070A1'),
            new Image.network('https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3343253172,1276100043&fm=58&s=9DB5109B1C1247F56898AFCA03005037'),
            new Image.network('https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1588364103,2036988885&fm=58&s=DFDDA844965203D4CFA4599303008099'),
          ],
        )
      ),
    );
  }
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值