Windows平台Column内水平SingleChildScrollView无法滚动问题
问题更新
经核验,该问题仅在Windows平台出现,Android与macOS平台运行表现正常。
问题描述
Row组件内容无法滚动,已完成两项配置:
- 将Column的
crossAxisAlignment属性设置为CrossAxisAlignment.stretch - 将
SingleChildScrollView的scrollDirection属性设置为Axis.horizontal
排查是否存在遗漏配置。
复现代码
return Scaffold( appBar: AppBar( // 从MyHomePage对象取值作为AppBar标题,该对象由App.build方法创建 title: Text(widget.title), ), body: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ SingleChildScrollView( scrollDirection: Axis.horizontal, child: Row(children: [ Text(' lis sdf sd fsd fsdf ifje fsiduhf iushdf sdf '), ElevatedButton( onPressed: () {}, child: Text(' lis sdf sd fsd fsdf ifje fsiduhf iushdf sdf ')), Text(' lis sdf sd fsd fsdf ifje fsiduhf iushdf sdf ') ]), ) ], ), );
运行效果

解决方案
这不是配置遗漏,是Flutter Windows桌面端的渲染约束兼容问题:
Column设置CrossAxisAlignment.stretch时,会向子组件传递「水平方向撑满可用宽度」的强约束,Windows端的SingleChildScrollView接收到该约束后,会强制内部Row的最大宽度等于可用屏幕宽度,超出的内容被直接截断,无法触发水平滚动,Android和macOS端无此异常表现。
修复只需要给水平滚动的SingleChildScrollView明确指定垂直方向的尺寸即可,最简单的写法是在外层套一层固定高度的SizedBox:
body: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ // 给水平滚动区域明确高度 SizedBox( height: 56, child: SingleChildScrollView( scrollDirection: Axis.horizontal, child: Row(children: [ Text(' lis sdf sd fsd fsdf ifje fsiduhf iushdf sdf '), ElevatedButton( onPressed: () {}, child: Text(' lis sdf sd fsd fsdf ifje fsiduhf iushdf sdf ')), Text(' lis sdf sd fsd fsdf ifje fsiduhf iushdf sdf ') ]), ), ) ], );
如果不想写死高度,也可以给SingleChildScrollView添加constraints: BoxConstraints()解除父级传递的不当约束,再套一层IntrinsicHeight让组件自动适配子组件高度即可。
内容的提问来源于stack exchange,提问作者Hammerhead
相关产品推荐
相关产品推荐

