Flutter页面底部溢出Infinity像素，套SingleChildScrollView报布局错误如何解决

错误原因 #

• 直接使用Column作为Scaffold的body子组件时，Column默认高度等于当前屏幕的可用高度，当内部子组件总高度超出这个值时，就会触发底部Infinity像素溢出报错。
• 将Column套入SingleChildScrollView后，滚动组件的垂直布局空间是无限的，此时你代码中没有明确高度约束的第二个PhotoView组件会尝试填充父容器的所有可用高度，等于要获取无限高度，就触发了布局时的RenderFlex无限尺寸报错。

修复方案 #

只需要给无高度约束的PhotoView添加明确的尺寸约束即可，比如用AspectRatio设置宽高比，或者用SizedBox指定固定高度，再将整个Column套入SingleChildScrollView实现页面滚动，修改后的完整代码如下：

class MyWidgetApiDetails extends StatelessWidget {
  final Emp emp;
  const MyWidgetApiDetails({Key key, @required this.emp}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DETAILS EMP'),
      ),
      // 外层套SingleChildScrollView支持整页滚动
      body: SingleChildScrollView(
        child: Column(
          children: [
            Hero(
                tag: emp.empno,
                child: AspectRatio(
                    aspectRatio: 16 / 9,
                    child: Image.network(emp.image))
            ),
            Container(
              height: 20,
              width: 100,
              child: PhotoView(
                imageProvider: AssetImage("assets/images/map.jpg"),
              ),
            ),
            // 给无约束的PhotoView添加宽高比约束，也可替换为SizedBox指定固定高度
            AspectRatio(
              aspectRatio: 16/9,
              child: PhotoView(
                imageProvider: NetworkImage(emp.image),
              ),
            ),
            SizedBox(
              height: 20,
            ),
            Text(
              emp.empno.toString(),
              style: TextStyle(fontSize: 15, fontWeight: FontWeight.normal),
            ),
            SizedBox(
              height: 20,
            ),
            Text(
              emp.ename,
              style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
            )
          ],
        ),
      ),
    );
  }
}

如果不需要固定宽高比，也可以根据屏幕尺寸动态设置高度，示例如下：

SizedBox(
  // 设置为屏幕可用高度的40%，可根据需求调整比例
  height: MediaQuery.of(context).size.height * 0.4,
  child: PhotoView(
    imageProvider: NetworkImage(emp.image),
  ),
)

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