Flutter web中具有不同接受率的交错网格视图图块

Question

我正在尝试使用交错网格视图在 Flutter 中实现以下网格布局

但我无法更改接受率。 网格的高度取决于宽度。

这是我正在使用的代码

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<LoginController>(
      builder: (controller) => Container(
        color: AppColors.doveGray,
        padding: const EdgeInsets.fromLTRB(100, 20, 100, 20),
        child: Scaffold(
          appBar: const CustomAppBar(isPhone: false),
          backgroundColor: AppColors.doveGray,
          body: Container(
            height: MediaQuery.of(context).size.height * .75,
            child: GridView.custom(
              shrinkWrap: true,
              gridDelegate: SliverQuiltedGridDelegate(
                crossAxisCount: 4,
                mainAxisSpacing: 20,
                crossAxisSpacing: 20,
                repeatPattern: QuiltedGridRepeatPattern.mirrored,
                pattern: [
                  QuiltedGridTile(2, 1),
                  QuiltedGridTile(1, 1),
                  QuiltedGridTile(1, 1),
                  QuiltedGridTile(1, 1),
                  QuiltedGridTile(1, 1),
                  QuiltedGridTile(1, 1),
                  QuiltedGridTile(1, 1),
                  QuiltedGridTile(1, 1),
                  QuiltedGridTile(1, 1),
                ],
              ),
              childrenDelegate: SliverChildBuilderDelegate(
                  (context, index) => HomeTileWidget(),
                  childCount: 9),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

crossAxisCount:9将主导 UI。 根据需要改变sh值

const sh = 2;
return Scaffold(
  body: GridView.custom(
    gridDelegate: SliverQuiltedGridDelegate(
      crossAxisCount: 9,
      mainAxisSpacing: 20,
      crossAxisSpacing: 20,
      repeatPattern: QuiltedGridRepeatPattern.mirrored,
      pattern: [
        QuiltedGridTile(sh * 2, 3),
        QuiltedGridTile(sh, 3),
        QuiltedGridTile(sh, 3), //topE
        
        QuiltedGridTile(sh, 3),
        QuiltedGridTile(sh, 3),

        QuiltedGridTile(sh, 3),
        QuiltedGridTile(sh, 2),
        QuiltedGridTile(sh, 2),
        QuiltedGridTile(sh, 2),
      ],
    ),

玩装饰。