FlutterGridView布局

詳細地說，我想要一個在交叉軸上有兩個專案的 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"),
            ],
          );
        },
      ),

uj5u.com熱心網友回復：

至于 UI，您可以

對于簡單的情況，您還可以將 A 內行與 Column 一起使用。

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減少小部件之間的空間

下一篇：根據條件將值列印到螢屏上