Flutter GridView如何实现item居底部显示，顶部按item数量动态留白

实现方案 #

你不需要手动计算顶部padding，只要通过组件自带属性调整即可实现需求，修改点如下：

• 给GridView.builder外层包裹Align组件，设置对齐规则为底部居中，让整个GridView内容始终靠屏幕底部显示
• 给GridView.builder新增shrinkWrap: true属性，让GridView高度跟随实际内容尺寸自适应，不会默认占满父容器高度
• 调整原有的padding配置，把对称垂直padding改为仅底部保留30px间距，避免顶部出现多余空白

修改后完整代码 #

class className extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            ImageFiltered(
                //code here
                ),
            Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Colors.black38,
            ),
            // 新增Align包裹GridView
            Align(
              alignment: Alignment.bottomCenter,
              child: GridView.builder(
                primary: false,
                shrinkWrap: true, // 新增shrinkWrap属性
                reverse: false,
                // 修改padding配置
                padding: const EdgeInsets.only(
                  left: 10,
                  right: 10,
                  bottom: 30,
                ),
                itemBuilder: (context, index) {
                  return InkWell(
                    onTap: () {
                      //code
                    },
                    child: CustomWidget(
                      title: toolkitStore.getLabel(toolKit),
                      icon: ImageIcon(
                        AssetImage(
                            'assets/images/abcd.png'),
                        size: 48,
                        color: kWhiteColor,
                      ),
                    ),
                  );
                },
                itemCount: getCount().length,
                gridDelegate:
                    SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

效果说明 #

修改后不管item总数是3个、6个还是更多，GridView都会自动计算内容总高度，始终贴合屏幕底部显示：内容不满一屏时整体沉底，内容超出一屏时依然保留滚动能力，不影响正常交互。

内容的提问来源于stack exchange，提问作者Humayun Kabir