像这样如何在卡内制作图像布局？

Question

我收到了来自api调用的图像列表，我需要像在此示例上一样布置这些图像，我已经实现了此逻辑，但是我认为这是多余的，并且可以轻松完成，而无需硬编码哪个项目需要是第一个，最后一个，等等。我认为小部件树可能更少。我如何改善此代码？

我的成就

        List<Widget> _listImages() {
            List<Widget> imagesList = [];
            for (int i = 0; i < images.length; i++) {
              imagesList.add(
             Expanded(
              child: Padding(
                padding: const EdgeInsets.all(2.0),
                child: GestureDetector(
                  onTap: () {
                    open(context);
                  },
                  child: child: NetworkImage(images[i]),
                ),
              ),
            );
              );
            }
            return imagesList;
          }
    Widget build(BuildContext context) {
    return Card(...
          Column(//Image layout
                children: [
                            Row(
                              children: [
                                _listImages().first,
                              ],
                            ),
                            Container(
                              height: 110,
                              child: Row(
                                children: [
                                  Expanded(
                                    flex: 2,
                                    child: Row(
                                      children: _listImages().getRange(1, 3).toList(),
                                    ),
                                  ),
                                  Expanded(
                                    child: Stack(children: [
                                      Row(
                                        children: [
                                          _listImages().elementAt(3),
                                        ],
                                      ),
                                      IgnorePointer(
                                        child: Padding(
                                          padding: const EdgeInsets.all(2.0),
                                          child: Container(
                                            color: Colors.black54,
                                            child: Center(
                                              child: Text(
                                                '+ ${_listImages().length - 3}',
                                                textAlign: TextAlign.center,
                                                style: TextStyle(
                                                    color: Colors.white,
                                                    fontSize: 22,
                                                    fontWeight: FontWeight.w500),
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                                    ]),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        )
....
}

Answer 1

您可以尝试Gridview。您可以使用主轴间距和横轴间距来更改网格图块之间的距离。

https://www.geeksforgeeks.org/flutter-gridview/