Flutter中GridView按钮适配父容器：计算器UI按钮无法全显

我正在基于设计稿制作计算器UI，将屏幕分为两个Expanded容器，顶部用于输出，底部使用GridView展示按钮。期望所有按钮在底部区域完整显示且无滚动效果，但当前代码中GridView的最后一行需要滚动才能查看。

解决方法 #

GridView默认自带滚动特性，要实现按钮区域无滚动且完整显示，需做两处核心修改：

• 禁用GridView的滚动行为：添加physics: const NeverScrollableScrollPhysics()
• 让GridView自适应子组件总高度：设置shrinkWrap: true

同时可通过childAspectRatio调整按钮宽高比（设为1可让按钮呈现正方形，更贴合计算器布局）。

修改后的主布局代码 #

Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Column(
        children: [
          Expanded(child: Container(color: Colors.orange,)),
          Expanded(
            child: GridView.builder(
              physics: const NeverScrollableScrollPhysics(), // 禁止滚动
              shrinkWrap: true, // 自适应高度
              itemCount: buttons.length,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                childAspectRatio: 1, // 按钮宽高比设为1
              ),
              itemBuilder: (context, index) {
                return ButtonWidget(
                  color: Colors.grey,
                  ontap: () {},
                  caption: buttons[index].toString(),
                  textcolor: Colors.black,
                );
              },
            ),
          ),
        ],
      ),
    ),
  );
}

优化后的按钮组件代码（可选） #

class ButtonWidget extends StatelessWidget {
  final color;
  final textcolor;
  final String caption;
  final VoidCallback ontap;

  const ButtonWidget(
      {Key? key,
      required this.color,
      required this.ontap,
      required this.caption,
      required this.textcolor})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      // 用InkWell实现点击反馈，更符合Material设计规范
      child: InkWell(
        onTap: ontap,
        borderRadius: BorderRadius.circular(100),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.grey[400],
            borderRadius: BorderRadius.circular(100),
          ),
          child: Center(
              child: Text(
            caption.toString(),
            style: GoogleFonts.actor(fontSize: 30, fontWeight: FontWeight.bold),
          )),
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Irfan Ganatra