使用 Flutter 的 Pintrest 风格板

Question

所以我想在我的应用程序中显示 Pinterest 样式板，但没有

StaggeredGridList

，而是通过普通、容器和行/列小部件。

这是一张图片：

所以一开始，我尝试使用

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
                                        )
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              )
            ],
          )

非常感谢！！

Answer 1

对那些关注这个问题的人的快速回答，您可以使用类似这个包的东西来实现相同的结果flutter_staggered_grid_view

你的代码基本上应该是这样的

StaggeredGrid.count(
  crossAxisCount: 4,
  mainAxisSpacing: 4,
  crossAxisSpacing: 4,
  children: const [
    StaggeredGridTile.count(
      crossAxisCellCount: 2,
      mainAxisCellCount: 2,
      child: Tile(index: 0),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 2,
      mainAxisCellCount: 1,
      child: Tile(index: 1),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      child: Tile(index: 2),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      child: Tile(index: 3),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 4,
      mainAxisCellCount: 2,
      child: Tile(index: 4),
    ),
  ],
);