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
相关产品推荐
相关产品推荐

