Flutter Column嵌套SingleChildScrollView搭配Flexible文本过小及空白问题求解

问题原因梳理 #

第一版文本显示过小的原因 #

你给SingleChildScrollView外层套Flexible时，上层卡片Container写死了height: 225，同时用Positioned(top:200)固定了卡片位置。在不同尺寸设备上，225的高度扣除任务名称、短描述的固定高度后，留给长文本滚动区域的剩余高度被过度压缩，导致文本显示区域过小，看起来字号异常。

第二版出现多余空白的原因 #

主要有两个诱因：

• 你在短描述和长文本之间额外加了const SizedBox(height: 30)，加上短描述本身的bottom:30内边距，两段文本之间的总间距达到60，形成明显空白
• 布局中使用的Spacer会自动撑满顶部标题栏和下方白色卡片之间的所有剩余空间，图片展示区域高度不受控，产生多余的上下空隙
  

最优实现方案 #

直接采用Stack根布局实现图片在底、内容层叠在上的效果，避免固定高度适配问题，修改点如下：

1. 把第二版中的Spacer替换为固定高度的SizedBox，精准控制上方图片的露出高度，避免空白
2. 移除短描述下方额外的30高度占位，按需调整间距
3. 给白色圆角卡片添加负的顶部margin，实现卡片叠在图片上的效果，消除两层之间的空隙
4. 长文本滚动区域外层用Expanded直接撑满卡片剩余高度，无需写死容器高度

修改后核心代码示例 #

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: I10n.t('Playhouse'),
      centerTitle: true,
      automaticallyImplyLeading: false,
      elevation: 0,
      excludeHeaderSemantics: true,
    ),
    endDrawer: const ScrapBookDrawer(),
    body: Stack(
      children: <Widget>[
        // 背景图片层
        Crop(
          interactive: false,
          backgroundColor: Colors.white,
          dimColor: Colors.white,
          controller: CropController(),
          child: Image.memory(
            base64.decode(con.submodule['image']),
            fit: BoxFit.cover,
            width: double.infinity,
            height: double.infinity,
          ),
        ),
        SafeArea(
          child: Column(
            children: <Widget>[
              // 顶部子模块标题栏
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 8),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Flexible(
                      child: Text(
                        widget.subTask['subName'],
                        style: const TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 16,
                        ),
                      ),
                    ),
                    const Flexible(
                      child: Text(
                        'Submodule description',
                      ),
                    ),
                  ]
                ),
              ),
              // 固定图片露出高度，按需调整数值
              const SizedBox(height: 200),
              // 下方白色圆角卡片
              Expanded(
                child: Container(
                  // 负的顶部margin消除和图片的空隙，按需调整数值
                  margin: const EdgeInsets.only(top: -30),
                  decoration: const BoxDecoration(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(60),
                      topRight: Radius.circular(60),
                    ),
                    color: Colors.white
                  ),
                  child: Column(
                    children: <Widget>[
                      // 任务名称
                      Padding(
                        padding: const EdgeInsets.only(
                          top: 30,
                          bottom: 20,
                        ),
                        child: Text(
                          widget.subTask['name'],
                          style: const TextStyle(
                            fontSize: 26,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      // 短描述
                      Padding(
                        padding: const EdgeInsets.only(
                          top: 10,
                          bottom: 20,
                        ),
                        child: Text(widget.subTask['short_description']),
                      ),
                      // 长文本滚动区域，直接撑满剩余高度
                      Expanded(
                        child: SingleChildScrollView(
                          physics: const BouncingScrollPhysics(),
                          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                          child: Text(widget.subTask['long_description']),
                        ),
                      ),
                    ],
                  ),
                ),
              )
            ],
          ),
        )
      ],
    ),
  );
}

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