Flutter中rflutter_alert内SingleChildScrollView发布版失效求助

我用rflutter_alert实现了一个带文本和确认按钮的弹窗，文本嵌套在SingleChildScrollView里实现垂直滚动。调试模式下（模拟器、安卓真机都测过）完全正常，但Google Play发布版里这个弹窗出问题：文本区域只显示一个灰色长框，看不到任何文字。其他没加滚动视图的rflutter_alert弹窗在发布版里是好的。想问下滚动视图在发布版需要权限吗？还是调试和发布版有别的差异？

相关代码：

// Alert to display roster message
_onAlertShowRosterNotes(context, String rosterMsg) {
  var alertStyle = AlertStyle(
    isCloseButton: false,
  );
  Alert(
    context: context,
    style: alertStyle,
    title: 'Roster Message',
    content: Column(
      children: <Widget>[
        Container(
          margin: const EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 0.0),
          padding: const EdgeInsets.fromLTRB(6.0, 3.0, 6.0, 3.0),
          height: 280.0,
          width: 230,
          decoration: BoxDecoration(
          border: Border.all(
            color: kMainColor,
            width: 0.5,
          ),
          ),
          child: Expanded(
            child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Text(rosterMsg,
                style: TextStyle(
                color: kBodyText,
                fontWeight: FontWeight.normal,
                fontSize: 16.0,
                ),
              ),
            ),
          ),
        ),
      ],
    ),
    buttons: [
      DialogButton(
        child: Text('OK', style: TextStyle(color: Colors.white, fontSize: 20)),
        color: kMainColor,
        onPressed: () {
          Navigator.pop(context, false);
        },
      ),
    ],
  ).show();
}

问题原因及解决方案 #

1. 布局层级错误（核心问题） #

你在Container直接嵌套了Expanded，但Expanded只能用在Row/Column/Flex这类弹性布局的子节点里，直接放在Container里会导致布局约束异常。调试模式下Flutter会宽容这种错误，但发布版的编译优化会让这种布局问题直接表现为内容不渲染。

修复后的代码：移除多余的Expanded，让SingleChildScrollView直接作为Container的子节点：

// Alert to display roster message
_onAlertShowRosterNotes(context, String rosterMsg) {
  var alertStyle = AlertStyle(
    isCloseButton: false,
  );
  Alert(
    context: context,
    style: alertStyle,
    title: 'Roster Message',
    content: Column(
      children: <Widget>[
        Container(
          margin: const EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 0.0),
          padding: const EdgeInsets.fromLTRB(6.0, 3.0, 6.0, 3.0),
          height: 280.0,
          width: 230,
          decoration: BoxDecoration(
            border: Border.all(
              color: kMainColor,
              width: 0.5,
            ),
          ),
          // 移除多余的Expanded
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Text(rosterMsg,
              style: TextStyle(
                color: kBodyText,
                fontWeight: FontWeight.normal,
                fontSize: 16.0,
              ),
            ),
          ),
        ),
      ],
    ),
    buttons: [
      DialogButton(
        child: Text('OK', style: TextStyle(color: Colors.white, fontSize: 20)),
        color: kMainColor,
        onPressed: () {
          Navigator.pop(context, false);
        },
      ),
    ],
  ).show();
}

2. 发布版编译优化的影响 #

调试模式下Flutter会保留很多调试检查和容错机制，布局的小错误可能不会暴露；但发布版开启了--release模式的优化（比如树摇、约束严格检查），这类不符合布局规则的代码就会触发渲染异常。

3. 关于权限问题 #

滚动视图（SingleChildScrollView）不需要任何系统权限，这个问题和权限无关。

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