使用Flutter的Pintrest-style板

oogrdqng  于 2023-10-22  发布在  Flutter
关注(0)|答案(1)|浏览(89)

所以我想在我的应用程序中显示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
                                        )
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              )
            ],
          )

非常感谢!!**

ttp71kqs

ttp71kqs1#

您可以使用类似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),
    ),
  ],
);

相关问题