美文网首页
flutter GridView 笔记

flutter GridView 笔记

作者: 笨的很想飞 | 来源:发表于2021-11-21 13:13 被阅读0次

1.示例

Simulator Screen Shot - iPhone 12 Pro Max - 2021-11-21 at 13.11.22.png

2.代码



import 'package:flutter/material.dart';

class MyGridView extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(
            'GridView'
        ),
      ),
      body: Center(

        child: GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, //每行3个
              mainAxisSpacing: 2.0, //垂直间距
              crossAxisSpacing: 2.0, //水平间距
              childAspectRatio: 0.7 //item 宽高比例
          ),
          children: <Widget>[
            new Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.cover),
            new Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover),
            new Image.network('http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',fit: BoxFit.cover),
            new Image.network('http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',fit: BoxFit.cover),
            new Image.network('http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',fit: BoxFit.cover),
            new Image.network('http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',fit: BoxFit.cover),
            new Image.network('http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',fit: BoxFit.cover),
            new Image.network('http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',fit: BoxFit.cover),
            new Image.network('http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',fit: BoxFit.cover),
          ],
        )
      ),

    );
  }
}






相关文章

网友评论

      本文标题:flutter GridView 笔记

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