美文网首页
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