美文网首页Flutter学习
Flutter-GridView(UICollectionVie

Flutter-GridView(UICollectionVie

作者: 今晚月色 | 来源:发表于2019-04-01 18:50 被阅读0次
    Flutter

    GridView类似于iOS中的UICollectionView,等于把UICollectionViewLayout集成在一起。与ListView类似里面的children可以是任意的Widget, 这个就是简单的用法,代码仅供参考!

    void main() => runApp(WudanCollectionView());
    
    class WudanCollectionView extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: "Class Name",
          home: Scaffold(
            appBar: AppBar(title: Text("CollectionView"),),
            body: Center(
              child: GridView.count(
                padding: EdgeInsets.all(10),    // 内边距
                scrollDirection: Axis.vertical, // 滚动方向
                crossAxisSpacing: 10,           // 列间距
                crossAxisCount: 3,              // 每行的个数(Axis.vertic == 横向三个, Axis.horizontal == 竖方向三个)
                mainAxisSpacing: 10,            // 行间距
                children: <Widget>[
                  new Container(
                    color: Colors.lightBlue,
                  ),
                  new Container(
                    color: Colors.lightGreen,
                  ),
                  new Container(
                    color: Colors.red,
                  ),
                  new Container(
                    color: Colors.orange,
                  ),
                  new Image.network(
                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554110093883&di=9db9b92f1e6ee0396b574a093cc987d6&imgtype=0&src=http://n.sinaimg.cn/sinacn20/151/w2048h1303/20180429/37c0-fzvpatr1915813.jpg",
                    fit: BoxFit.cover,
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }
    

    属性介绍

    • padding:内边距
    • scrollDirection:滚动方向
    • crossAxisSpacing:列间距
    • mainAxisSpacing:行间距
    • crossAxisCount: 每行的个数(Axis.vertic == 横向三个, Axis.horizontal == 竖方向三个)
    • children:子视图数组


      示例图

    相关文章

      网友评论

        本文标题:Flutter-GridView(UICollectionVie

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