如何在 Flutter 中实现此卡片视图设计

Question

我想让卡片的第二列略微不均匀，我该如何实现。 这是我想要的输出：

Answer 1

你可以这样使用GridView.builder

GridView.builder(
  padding: EdgeInsets.only(left: 20, right: 20),
  shrinkWrap: true,
  physics: NeverScrollableScrollPhysics(),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 20,
    mainAxisSpacing: 8,
    childAspectRatio: 0.7,
  ),
  itemCount: 10,
  itemBuilder: (context, index) {
    return Padding(
      padding: (index % 2) == 0 ? EdgeInsets.only(bottom: 15) : EdgeInsets.only(top: 15),
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
        child: Container(
          decoration: BoxDecoration(
            color: (index % 2) == 0 ? Colors.red : Colors.green,
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      ),
    );
  },
);

Answer 2

一种方法是在一行中添加两列：

Row(
  children: [
    Expanded(
      child: Column(
        children: [
          CardWidget(/*...*/),
          CardWidget(/*...*/),
          CardWidget(/*...*/),
          CardWidget(/*...*/),
        ],
      ),
    ),
    Expanded(
      child: Column(
        children: [
          const SizedBox(
            height: 50,
          ),
          CardWidget(/*...*/),
          CardWidget(/*...*/),
          CardWidget(/*...*/),
          CardWidget(/*...*/),
        ],
      ),
    ),
  ],
);