美文网首页
Flutter - GridView(5)

Flutter - GridView(5)

作者: iixzp | 来源:发表于2020-05-13 22:06 被阅读0次
Simulator Screen Shot - iPhone SE (2nd generation) - 2020-05-13 at 22.04.11.png Simulator Screen Shot - iPhone SE (2nd generation) - 2020-05-13 at 22.05.20.png
import 'package:flutter/material.dart';

void main () {
  runApp(myApp());
}

class myApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'GridView',
      home: Scaffold(
        appBar: AppBar(
          title: Text('我是导航栏'),
        ),
        body: GridView.count(
          padding: EdgeInsets.fromLTRB(10, 20, 10, 30), // GridView 的外边距
          crossAxisSpacing: 10.0,  // 每格横向间隔
          mainAxisSpacing: 30,  // 每格纵向间隔
          crossAxisCount: 3,  // 有几列
          childAspectRatio:0.8, // 宽高比
          // scrollDirection: Axis.horizontal, // 纵横向
          children: <Widget>[
            Image.network('https://i0.hdslb.com/bfs/sycp/creative_img/202005/326e264bf254a9d9983712ed5bdd7926.jpg',fit: BoxFit.cover,),
            Image.network("https://i0.hdslb.com/bfs/archive/a36b455619b07da7157544d84f76eeb039d5d8e6.jpg@336w_190h.jpg",fit: BoxFit.cover,),
            Image.network("https://i1.hdslb.com/bfs/archive/4d6fa50c19a34c9c647449654a238015a8cefa5f.jpg@336w_190h.jpg",fit: BoxFit.cover,),
            Image.network("https://i2.hdslb.com/bfs/archive/6411ba2693ed69ee88b6b9c7f9b67aa3cbe4a171.jpg@336w_190h.jpg",fit: BoxFit.cover,),
            Image.network("https://i1.hdslb.com/bfs/archive/ee3459bf8319d22ad49d9dadac89c2adddd8251f.jpg@336w_190h.jpg",fit: BoxFit.cover,),
            Image.network("https://i2.hdslb.com/bfs/archive/6411ba2693ed69ee88b6b9c7f9b67aa3cbe4a171.jpg@336w_190h.jpg",fit: BoxFit.cover,),
          ],
        )
      )
    );
  }
}

相关文章

网友评论

      本文标题:Flutter - GridView(5)

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