Flutter学习

Flutter-GridView(UICollectionVie

2019-04-01  本文已影响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,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

属性介绍

上一篇下一篇

猜你喜欢

热点阅读