如何在Flutter中将GridView.Builder内部的项目居中

时间:2020-05-21 00:59:50

标签: flutter grid

我有一个crossViewCount为6的GridView.Builder,当有12个项目时效果很好,但是如果项目为11个或更少或只是不均匀,它看起来就不会很好... 11 Items do not look so nice

这是现在的样子,现在只有11个项目了

这是我希望物品少时的样子

The items that are less should fall on the center

较少的项目应放在中心,这样,当它可能只是一个项目时,它不应显示在最左边,而应该像这样在中心... single item apear on the center < / p>

这是我的代码

GridView.builder(
              shrinkWrap: true,
              physics: BouncingScrollPhysics(),
              itemCount: staffs == null ? 0 : staffs.length,
              gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(
                  childAspectRatio: 1.0, crossAxisCount: 6),
              itemBuilder: (BuildContext context, int index) {
                return InkWell(
                    onTap: () {
                      showPinDialog(staffs[index]);
                    },

                    child: Container(
                      // padding: EdgeInsets.only(left: 40, right: 40),
                      margin:
                      EdgeInsets.only(right: 5, bottom: 5),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10.0),
                          border: Border.all(
                              color:
                              Colors.white)),
                      child: Column(
                        mainAxisAlignment:
                        MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Image.asset(
                              'assets/icons/black/user.png',
                              width: iconSize,
                              height: iconSize,
                              fit: BoxFit.contain
                          ),
                          Center(
                            child: Text(
                              '${staffs[index]['name'][0].toUpperCase()}${staffs[index]['name'].substring(1)}',
                              // staffs[index]['name'],
                              style: TextStyle(
                                fontSize: staffNameFontSize,
                                color: Color(0xff000000),
                                fontWeight: FontWeight.bold,

                              ),
                              overflow: TextOverflow.ellipsis,
                              maxLines: 2,
                            ),
                          ),
                        ],
                      ),
                    )
                );
              },
            )

0 个答案:

没有答案