Gridview Flutter - 宽间隙

Question

我有一个管理页面的以下代码，他/她可以在其中切换其他用户的权限 这是我拥有的 Gridview 的代码，但是，网格视图元素之间存在大量空白。

我认为问题出在 setHeight(context, 0.88) 上，它占用了 gridview idk 的每个部分的屏幕尺寸的 88%

我似乎无法弄清楚如何解决它:(

下面有一个img...注意每个部门都有重复的部分...所以销售部门与会计/财务等相同

SingleChildScrollView(
          primary: true,
          child: Column(
            children: [
              Divider(
                color: kLightGreyColor,
              ),
              SizedBox(
                height: setHeight(context, 0.88), //88%
                width: setWidth(context, 0.65), //65%
                child: ListView.builder(
                    itemCount: widget.company.departments.length,
                    itemBuilder: (BuildContext context, int i) {
                      List<String> functionalities = [
                        'Manage Clients',
                        'Manage Suppliers',
                        'Manage Products',
                        'Import Data',
                        'Manage Sheets',
                        'Manage Projects'
                      ];
                      List<IconData> iconData = [
                        CSheets.customer,
                        CSheets.supplier,
                        CSheets.product,
                        CSheets.customExcel,
                        CSheets.customCostSheet,
                        Icons.build,
                      ];
                      return Column(
                        children: [
                          CustomRegistrationTitle(
                              title: widget.company.departments.elementAt(i)),
                          SizedBox(
                              width: setWidth(context, 0.6),
                              child: GridView.count(
                                padding: EdgeInsets.zero,
                                shrinkWrap: true,
                                crossAxisCount: (setWidth(context, 0.01) > 8)
                                    ? 3
                                    : (setWidth(context, 0.01) < 6)
                                        ? 1
                                        : 2,
                                mainAxisSpacing: 0,
                                children: List.generate(
                                  functionalities.length,
                                  (index) {
                                    return SizedBox(
                                      child: Column(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: [
                                          Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.center,
                                            children: [
                                              AutoSizeText(
                                                functionalities
                                                    .elementAt(index),
                                                maxLines: 2,
                                                style:
                                                    kResponsiveTextOverpassFont(
                                                        context,
                                                        kDarkGreyColor),
                                              ),
                                              Transform.scale(
                                                scale: 0.7,
                                                child: CupertinoSwitch(
                                                    activeColor: kDarkBlueColor,
                                                    value:
                                                        widget.company
                                                                    .permissions[
                                                                widget.company
                                                                    .departments
                                                                    .elementAt(
                                                                        i)][
                                                            functionalities
                                                                .elementAt(
                                                                    index)],
                                                    onChanged: (value) {
                                                      setState(() {
                                                        p[widget
                                                            .company.departments
                                                            .elementAt(
                                                                i)]![functionalities
                                                            .elementAt(
                                                                index)] = value;
                                                      });
                                                      companyRef
                                                          .doc(globalCompanyId)
                                                          .update(
                                                              {'permissions': p});
                                                    }),
                                              ),
                                            ],
                                          ),
                                          Padding(
                                            padding: EdgeInsets.only(
                                                top: setHeight(context, 0.03)),
                                            child: Icon(
                                              iconData.elementAt(index),
                                              size: setWidth(context, 0.03),
                                              color: kDarkGreyColor,
                                            ),
                                          ),
                                        ],
                                      ),
                                    );
                                  },
                                ),
                              )),
                        ],
                      );
                    }),
              ),
            ],
          ),
        )

Answer 1

我认为它来自 Gridview.count。 默认情况下 gridview 将设置孩子的大小。 为了调试，您可以将孩子包裹在 gridview 内并设置颜色。 您将看到它们的默认大小。

//for debug, to see the  current size of gridview child
....
children: List.generate(
   functionalities.length,
   index) {
     return Container(
       color: Colors.amber,
       child: Column(
....

你会看到实际的高度和宽度。白色的 gab 实际上是剩余的未使用尺寸

---

要自定义大小，您必须在 gridview 上设置纵横比属性。

 GridView.count(
   //var size = MediaQuery.of(context).size;
   // double itemHeight = (size.height - kToolbarHeight - 24) / 2;
   // double itemWidth = size.width / 2;
   // this value that i usually use in mobile, idk for web size. you can try by your self
   childAspectRatio: itemHeight / itemWidth,
   children: []

现在你的gridview孩子应该改变尺寸。

Answer 2

将 childAspectRatio: 1.5 添加到 GridView.count 就可以了

比率越高，差距越小