You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter:SingleChildScrollView文本像素溢出,实现固定高度可滚动

解决Flutter文本像素溢出并实现固定高度滚动区域

要解决文本像素溢出问题,同时实现固定高度的可滚动文本区域,只需对原代码做以下调整:

  • 给滚动容器设置固定高度,用SizedBox限制高度为100
  • 移除不必要的Stack组件,简化层级
  • 确保SingleChildScrollView能正确包裹文本,内容超出时自动滚动

修改后的代码如下:

var _httpData = Builder(builder: (BuildContext context) {
  return Expanded(
    child: StreamBuilder<String>(
      stream: RepositoryHttp().getHttpData.dataFromHttp(),
      builder: (context, dataSnapshot) {
        if (dataSnapshot.hasData) {
          return Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            mainAxisSize: MainAxisSize.min,
            children: [
              // 用SizedBox固定高度为100
              SizedBox(
                height: 100,
                child: SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  padding: EdgeInsets.all(10),
                  // 直接放置Text,移除多余Stack
                  child: Text(
                    dataSnapshot.data!,
                    style: TextStyle(color: Colors.white, fontSize: 18),
                  ),
                ),
              )
            ],
          );
        } else {
          return Column(
            children: [
              Text(Strings.noUpdateData),
            ],
          );
        }
      },
    ),
  );
});

内容的提问来源于stack exchange,提问作者Robban13

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.24 16:22:10