使用SingleChildScrollView修复像素溢出却出现白屏问题求助

嘿，我一眼就揪出问题所在了！你在SingleChildScrollView内部的Column里用了Flexible组件，这正是屏幕空白的根源。

问题原因 #

Flexible（包括同类的Expanded）是用来在有确定尺寸约束的父容器中分配剩余空间的，但SingleChildScrollView的特性就是允许子组件无限延伸，它不会给子组件提供固定的高度约束。这时候Flexible失去了计算空间的依据，导致它包裹的子组件无法正确渲染，最终就变成了空白屏幕。

修复方案 #

把Flexible替换成能明确控制尺寸的组件就行，比如用SizedBox结合屏幕高度比例来实现类似的占比效果，或者直接去掉Flexible，让子组件自适应高度。下面是两种可行的修改方案：

方案1：保留比例布局（替代flex效果）

Widget build(BuildContext context) { 
  SizeConfig().init(context); 
  final screenHeight = MediaQuery.of(context).size.height;
  return Scaffold( 
    appBar: buildAppBar(), 
    body: SingleChildScrollView( 
      child: Column( 
        crossAxisAlignment: CrossAxisAlignment.center, 
        children: <Widget>[ 
          // 用屏幕高度的50%替代flex:5
          SizedBox(
            height: screenHeight * 0.5,
            child: Textselamatdatang(),
          ), 
          // 用屏幕高度的40%替代flex:4
          SizedBox(
            height: screenHeight * 0.4,
            child: Container( 
              child: Column( 
                children: <Widget>[ 
                  Loginformcontrainer(), 
                  SizedBox(height: 30,), 
                  Loginbutton() 
                ], 
              ), 
            ),
          ) 
        ], 
      ), 
    ), 
  ); 
}

方案2：自适应高度（更简单的实现）

如果不需要严格的比例限制，直接去掉Flexible即可，让子组件根据自身内容自适应高度，SingleChildScrollView会自动处理滚动：

Widget build(BuildContext context) { 
  SizeConfig().init(context); 
  return Scaffold( 
    appBar: buildAppBar(), 
    body: SingleChildScrollView( 
      child: Column( 
        crossAxisAlignment: CrossAxisAlignment.center, 
        children: <Widget>[ 
          Textselamatdatang(), 
          Container( 
            child: Column( 
              children: <Widget>[ 
                Loginformcontrainer(), 
                SizedBox(height: 30,), 
                Loginbutton() 
              ], 
            ), 
          ) 
        ], 
      ), 
    ), 
  ); 
}

这样修改后，既能解决像素溢出问题，界面也不会再空白啦！

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