Flutter GridView 布局

Question

为了详细说明，我想要一个在横轴上有两个项目的 gridview 构建器。问题是我希望最后一项位于中间，如第一张图片所示。我找不到办法。

我对此做了一些研究。但我找不到办法做到这一点。这是我的代码和我现在的 UI。

GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 0.5,
          crossAxisSpacing: 20,
          mainAxisSpacing: 20,
        ),
        itemCount: 3,
        itemBuilder: (BuildContext context, int index) {
          return Column(
            children: [
              GestureDetector(
                onTap: (() => {
          
                    }),
                child: SizedBox(
                  width: 160,
                  height: 300,
                  child: Stack(
                    children: [
                      Positioned(
                        child: Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color: Colors.white,
                            image: DecorationImage(
                              image: AssetImage(
                                  bgImagePath ?? themeLists[index]),
                              fit: BoxFit.cover,
                            ),
                          ),
                        ),
                      ),
                       Positioned(
                              top: 20,
                              left: 0,
                              right: 90,
                              child: Transform.rotate(
                                  angle: -math.pi / 4,
                                  child: Container(
                                    decoration: BoxDecoration(
                                        color: const Color(0xffD1D1D1),
                                        borderRadius:
                                            BorderRadius.circular(10)),
                                    width: 180,
                                    height: 20,
                                    child:
                                        const Center(child: Text("OWNED")),
                                  )))
                        
                    ],
                  ),
                ),
              ),
              const Text("100 points"),
            ],
          );
        },
      ),

Answer 1

至于 UI 你可以使用 Wrap 和 alignment:WrapAlignment.center,。对于 constraints，我使用 LayoutBuilder。如果您使用 spacing 最小化子项的宽度。

return LayoutBuilder(
  builder: (context, constraints) {
    return Wrap(
      alignment: WrapAlignment.center,
      spacing: 12,
      runSpacing: 12,
      children: List.generate(
        3,
        (index) => Container(
          width: constraints.maxWidth / 2 - 12,
          height: constraints.maxHeight / 2 - 12,
          alignment: Alignment.center,
          color: index.isEven ? Colors.green : Colors.red,
          child: Text(index.toString()),
        ),
      ),
    );
  },
);

对于简单的情况，您也可以使用带列的内行。

return LayoutBuilder(
  builder: (context, constraints) {
    return Column(children: [
      Row(
        children: [
          Container(
            width: constraints.maxWidth / 2,
            height: constraints.maxHeight / 2,
            color: Colors.red,
          ),
          Container(
            width: constraints.maxWidth / 2,
            height: constraints.maxHeight / 2,
            color: Colors.green,
          ),
        ],
      ),
      Container(
        width: constraints.maxWidth / 2,
        height: constraints.maxHeight / 2,
        color: Colors.orange,
      ),
    ]);
  },
);

Flutter GridView 布局

Flutter GridView Layout

flutter

user-interface

gridview