Flutter使用advanced_page_turn时Scaffold body内容真机不显示求助

修复方案 #

• 添加强制尺寸约束
  真机Release模式下布局约束校验比模拟器Debug模式严格，AdvancedPageTurn没有获取到明确的尺寸约束时会无法完成渲染，导致灰屏。你只需要在SafeArea的子节点位置加一层SizedBox.expand，强制组件撑满可用区域即可。
• 校验资源配置
  确认pubspec.yaml中已经正确声明images/bg.jpg的资源路径，真机不会读取开发环境缓存的资源，路径配置错误会导致背景图加载失败，呈现出类似灰屏的效果。
• 排查版本兼容
  如果以上操作无效，升级advanced_page_turn到最新发布版本，排查是否是组件旧版本和你当前使用的Flutter稳定版存在渲染API兼容问题。

修正后的核心代码 #

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('App Title', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontFamily: 'oswald'),),
      centerTitle: true,
      flexibleSpace: Image(
        image: AssetImage('images/bg.jpg'),
        fit: BoxFit.cover,
      ),
    ),
    backgroundColor: Colors.grey[200],
    body: SafeArea(
      // 新增SizedBox.expand强制撑满父布局
      child: SizedBox.expand(
        child: AdvancedPageTurn(
          key: _controller,
          initialIndex: 0,
          children: [
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(image: AssetImage('images/bg.jpg'), fit: BoxFit.cover),
              ),
              padding: EdgeInsets.all(25.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Title 1', style: TextStyle(fontSize: 28.0, height: 1.8, fontWeight: FontWeight.bold, color: Colors.white, fontFamily: 'oswald'), textAlign: TextAlign.center,),
                ],
              ),
            ),
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(image: AssetImage('images/bg.jpg'), fit: BoxFit.cover),
              ),
              padding: EdgeInsets.all(25.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Title 2', style: TextStyle(fontSize: 28.0, height: 1.8, fontWeight: FontWeight.bold, color: Colors.white, fontFamily: 'oswald'), textAlign: TextAlign.center,),
                ],
              ),
            ),
          ],
        ),
      )
    ),
  );
}

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