flutter - 使用 Flutter 的 Pintrest 样式板

Question

所以我想在我的应用程序中显示一个 Pinterest 样式板，但没有StaggeredGridList，而是通过普通的 Container 和 Row/Column 小部件。

这是一张图片：

所以一开始，我尝试使用Expanded制作高度较高的容器，一个占据高度，另一个占据宽度，但是当你想要图片彼此下方时，这种方法不起作用。因此，请在下面发布您的代码作为答案。

我的代码：

          Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(left: 20, right: 20, top: 15, bottom: 12),
                // parent container housing all other widgets
                child: Container(
                  height: 220,
                  child: Column(
                    children: [
                      // both the pics and colours
                      Expanded(
                        child: Row( // row
                          children: [
                            // vertical pic
                            Container( // first child
                              width: 180, // give it a width, it takes up the height of parent since it is wrapped with an expanded widget
                              decoration: BoxDecoration(
                                  color: Colors.blue,
                                  borderRadius: BorderRadius.circular(
                                    15.0,
                                  ),
                                  image: DecorationImage(
                                      image: NetworkImage(storiesList[0]),
                                      fit: BoxFit.fill
                                  )
                              ),
                            ),

                            // spacing between vertical pic and horizontal pic
                            SizedBox( // second child
                              width: 12,
                            ),

                            // banner pic and colours
                            Expanded( // thrid child [consists a column with children ]
                              child: Column(
                                children: [
                                  // banner pic
                                  Container(
                                    height: 165, // give it a height, it takes up the width of parent since it is wrapped with an expanded widget
                                    decoration: BoxDecoration(
                                        color: Colors.blue,
                                        borderRadius: BorderRadius.circular(
                                          15.0,
                                        ),
                                        image: DecorationImage(
                                            image: NetworkImage(storiesList[1]),
                                            fit: BoxFit.fitWidth
                                        )
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              )
            ],
          )

非常感谢！！

标签： flutterlayoutwidgetflutter-layouthybrid-mobile-app