grid_view_app

练习目的 Flutter 应用

入门

本项目是 Flutter 应用程序的起点。

基本网格视图 UI 图片

# GridView Widget 

GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 10,
        crossAxisSpacing: 5,
      ),
      itemCount: _imgList.length,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          height: 100,
          margin: EdgeInsets.zero,
          color: Colors.greenAccent,
          child: Image(
            image: NetworkImage(_imgList[index]),
            height: double.infinity,
            width: double.infinity,
            fit: BoxFit.cover,
          ),
        );
      },

    )

交错网格视图 UI 图片

# MasonryGridView Widget 

MasonryGridView.count(
      crossAxisCount: 2,
      mainAxisSpacing: 10,
      crossAxisSpacing: 5,
      itemCount: _imgList.length,
      itemBuilder: (context,index){
        var _height = Random().nextInt(200) + 150;
        return Card(
          shadowColor: Colors.lightGreenAccent.withOpacity(0.7),
          elevation: (Random().nextInt(20)+10).toDouble(),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15.0),

          ),
          child: Padding(
            padding:  EdgeInsets.all(8.0),
            child: Image(
              image: NetworkImage(_imgList[index]),
              height: _height.toDouble(),
              fit: BoxFit.cover,
            ),
          ),
        );
      },
    );

Sliver 网格视图 UI 图片

# SliverGrid

CustomScrollView(
      slivers: [
          SliverGrid(
              delegate: SliverChildBuilderDelegate(
                  (context,index){
                    return ClipRRect(
                      borderRadius: BorderRadius.circular(25),
                        child: Image(
                          image: NetworkImage(_imgList[index]),
                          height: double.infinity,
                          width: double.infinity,
                          fit: BoxFit.cover,
                        ),
                    );
                  },
                childCount: _imgList.length,
              ),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  crossAxisSpacing: 7,
                mainAxisSpacing: 10,
              ),
          ),
      ],
    )

如果您这是您的第一个 Flutter 项目，这里有一些入门资源

如需获取 Flutter 入门帮助，请参阅我们的
在线文档，其中提供教程，
示例、移动开发指南和完整的 API 参考。

GitHub

查看 Github