如何使用 flutter 中的 API 數據實現此設計？

Question

如何使用 flutter 中的 API 數據實現此設計？ 我只需要第一行就可以這樣顯示。

[

我使用 flutter_staggered_grid_view package 來顯示這樣的圖像。

StaggeredGridView.countBuilder(
        shrinkWrap: true,
        // physics: NeverScrollableScrollPhysics(),
        primary: false,
        padding: EdgeInsets.all(10),
        itemCount: postModal.follower.length,
        crossAxisCount: 4,
        staggeredTileBuilder: (int index) =>
            StaggeredTile.count(1, index.isEven ? 2 : 3),
        mainAxisSpacing: 2.0,
        crossAxisSpacing: 2.0,

        itemBuilder: (BuildContext context, int index) {
          return Container();
        },
      )

Answer 1

您還可以使用Expanded小部件，利用它們的 flex 功能來實現如下目的：

當您拉伸它們時，它們會以靈活的方式表現； 您可以使用子Container小部件並設置它們的DecorationImage屬性以將圖像設置為背景圖像。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(30),
        child: ClipRRect(
            borderRadius: BorderRadius.circular(30),
            child: Column(children: [
              Expanded(
                  flex: 2,
                  child: Row(children: [
                    Expanded(flex: 2, child: Container(color: Colors.blueAccent)),
                    Expanded(child: Column(children: [
                      Expanded(child: Container(color: Colors.yellow)),
                      Expanded(child: Container(color: Colors.brown)),
                    ]))
                  ])),
              Expanded(
                  child: Row(children: [
                    Expanded(child: Container(color: Colors.red)),
                    Expanded(child: Container(color: Colors.purple)),
                    Expanded(child: Container(color: Colors.pink))
              ]))
            ])));
  }
}