Flutter 基础知识 - GridView

网格布局 GridView 有多种用法

new GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    // 一行列的个数 
    crossAxisCount: 2,
    // 横向每一行的间距
    mainAxisSpacing: 8.0,
    // 竖向每一列的间距
    crossAxisSpacing: 8.0,
    // 每一个元素之间的宽高比
    childAspectRatio: 1.0
  ),
  children: <Widget>[
    new Image.network(
        "http://img5.mtime.cn/mg/2019/07/16/155712.83620923_285X160X4.jpg",
         // 图片的平铺方式
         fit: BoxFit.cover,
    ),
    new Image.network("http://img5.mtime.cn/mg/2019/07/16/155712.83620923_285X160X4.jpg"),
    new Image.network("http://img5.mtime.cn/mg/2019/07/16/155712.83620923_285X160X4.jpg"),
    new Image.network("http://img5.mtime.cn/mg/2019/07/16/155712.83620923_285X160X4.jpg"),
    new Image.network("http://img5.mtime.cn/mg/2019/07/16/155712.83620923_285X160X4.jpg"),
    new Image.network("http://img5.mtime.cn/mg/2019/07/16/155712.83620923_285X160X4.jpg"),
  ],
)

图片 fit 配置的各种值

BoxFit.fill 充满父容器
BoxFit.contain 尽可能大，保持图片分辨率
BoxFit.cover 充满容器，可能会被截断
BoxFit.none 图片居中显示，不改变分大小，可能会被截断
BoxFit.fitWidth 图片填满宽度，高度可能会被截断
BoxFit.fitHeight 图片填满高度，宽度可能会被截断
BoxFit.scaleDown 图片可以完整显示，但是可能不能填充满

`GridView.count`

new GridView.count(
    padding: const EdgeInsets.all(10.0),
    // 一行列的个数 
    crossAxisCount: 2,
    // 横向每一行的间距
    mainAxisSpacing: 8.0,
    // 竖向每一列的间距
    crossAxisSpacing: 8.0,
    // 每一个元素之间的宽高比
    childAspectRatio: 1.0,
    children: <Widget>[
        Container(
            child: new Image.network(
                "http://img5.mtime.cn/mg/2019/07/16/155712.83620923_285X160X4.jpg",
                fit: BoxFit.fitHeight
            ),
            color: Colors.pink
        ),
        Container(
            child: new Image.network(
                "http://img5.mtime.cn/mg/2019/07/16/155712.83620923_285X160X4.jpg",
                fit: BoxFit.fitHeight
            ),
            color: Colors.pink
        ),
        Container(
            child: new Image.network(
                "http://img5.mtime.cn/mg/2019/07/16/155712.83620923_285X160X4.jpg",
                fit: BoxFit.fitHeight
            ),
            color: Colors.pink
        ),
    ],
),

最后编辑于：2019.07.16 19:28:40