Flutter是否存在Widget默认高度参数?如何实现自适应高度展开面板
Flutter可展开面板高度适配问题解答
Flutter 根本没有Container.default.height这类可以直接取组件默认自适应高度的静态属性。组件的自适应高度是布局阶段父子组件协商后动态算出来的,不是容器自带的固定常量——只要你把Container的height参数设为null,容器就会自动适配子组件的实际高度,也就是你要的“只占子组件所需空间”的效果。
要做从0平滑展开到内容实际高度的面板,完全不需要手动算文本高度,两个方案就能搞定:
- 优先用官方自带的
ExpansionTile
这是官方专门做可展开面板的组件,默认自带平滑展开收起动画,自动适配内容高度,根本不用自己维护高度变量。把问题文本塞到title位,答案放到children列表里就行,图标、样式都能自定义,不用重复造轮子。 - 要完全自定义交互就用
AnimatedSize
要是觉得ExpansionTile的默认样式不符合需求,用AnimatedSize就能自动做尺寸过渡动画,只需要存一个是否展开的布尔状态就行,不用管具体高度是多少,参考代码:
bool _isExpanded = false; Column( children: [ Container( child: InkWell( onTap: () { setState(() { _isExpanded = !_isExpanded; }); }, child: Text(theQuestion), ), ), AnimatedSize( duration: const Duration(milliseconds: 300), curve: Curves.easeInOut, child: Container( // 收起时高度0,展开时height为null自动适配内容高度 height: _isExpanded ? null : 0, width: double.infinity, // 一定要加裁剪,不然高度为0的时候文字会漏出来 clipBehavior: Clip.hardEdge, padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), child: Text(theAnswer), ), ), ], )
别用固定高度值凑,不同答案长度、不同系统字体缩放比例、不同屏幕尺寸下,固定高度要么溢出要么留空白,维护成本极高。
内容的提问来源于stack exchange,提问作者Emre Turan
相关产品推荐
相关产品推荐

