如何在Flutter中使用GridView.Builder居中显示元素

Question

我有一个crossAxisCount为6的GridView.Builder，当有12个项目时它运行良好，但如果项目少于11个或不均匀时，它看起来就不那么好了... 现在它看起来不太好，只有11个项目。

当项目较少时，我希望它看起来像这样。

物品较少的应该居中，这样当只有一个物品时，它不应该显示在最左边，而应该像这样居中...

这是我的代码

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,
                            ),
                          ),
                        ],
                      ),
                    )
                );
              },
            )

- Hussein Haule

---

这可能会有所帮助：https://dev59.com/irbna4cB1Zd3GeqPZVc1#57955465 - undefined

Answer 1

GridView似乎没有针对其项的对齐属性。对于这种情况的解决方法是使用ListView，并使用Wrap来帮助行居中对齐。在这个帖子中演示了一个示例。

- Omatt