Flutter 图像容器，图像彼此相邻

Question

我正在尝试制作一个主页并创建这个图像容器，其中包含三个并排的图像。我试过这样做：

Container(
     height: 100.0,
     width: 150.0,
     child: Row(
         children:[
             Image(image: AssetImage('')),
         Column(
         children:[
             Image(image: AssetImage('')), 
             Image(image: AssetImage('')), 
             ],
            ),
          ],
        ), 
      ),

我得到的是这样的

而我要的是这个

虽然结果不是这样的。关于如何重新创建我的 figma 图像有什么想法吗？

Answer 1

在您的 Image 小部件上，提供 height 和 weight 并使用 fit: BoxFit.cover, 以获得更好的视图，然后就可以了。

您的精品容器将是

 Container(
              height: 100.0,
              width: 150.0 + 4, //for padding
              color: Colors.green,
              child: Row(
                children: [
                  Padding(
                    // for rounded border
                    padding: const EdgeInsets.only(right: 2.0),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(12),
                      child: const Image(
                        image: AssetImage('assets/images/p7_image_asset.jpeg'),
                        width: 150 / 2,
                        height: 100.0,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  Column(
                    children: [
                      Padding(
                        // space between items
                        padding: const EdgeInsets.only(left: 2.0, bottom: 2),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(12),
                          child: Image(
                            image:
                                AssetImage('assets/images/p8_image_asset.jpeg'),
                            fit: BoxFit.cover,
                            height: 100 / 2 - 2, //-2 for padding
                            width: 150 / 2,
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(left: 2.0, top: 2),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(12),
                          child: Image(
                            image:
                                AssetImage('assets/images/p9_image_asset.jpeg'),
                            fit: BoxFit.cover,
                            height: 100 / 2 - 2, //-2 for padding
                            width: 150 / 2,
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),

我会鼓励去flutter.dev and learn about these widgets. If you are wanting GridView checkflutter_staggered_grid_view

Flutter 图像容器，图像彼此相邻

Flutter image container, images next to each other

containers

flutter

flutter-layout