flutter_platform_widgets中PlatformTextFormField浮动图标显示异常
问题根因
flutter_platform_widgets的PlatformTextFormField在Cupertino样式下默认的焦点浮层绘制优先级高于普通组件,加上你当前页面的SingleChildScrollView没有配置强制裁剪,滚动时超出视口的内容不会被自动截断,才会出现浮动输入标识滑到AppBar上层不被遮挡的问题。
之前尝试的拖拽收起键盘方案完全没必要:当前页面本身内容高度足够一屏展示,加滚动视图只是为了避免键盘弹出时的像素溢出,为了个小图标牺牲正常交互逻辑得不偿失。
可选方案(二选一即可)
方案1:直接移除浮动输入标识
改动最小,不需要调整页面结构,直接关闭输入框的悬浮焦点提示即可。
在CupertinoTextFormFieldData配置中追加参数,关闭默认的浮层显示:
cupertino: (_, __) => CupertinoTextFormFieldData( textInputAction: TextInputAction.next, focusNode: _focusNode, // 关闭Cupertino输入框默认获焦时的前缀悬浮效果 prefixMode: OverlayVisibilityMode.never, decoration: BoxDecoration( color: CupertinoColors.extraLightBackgroundGray, borderRadius: BorderRadius.circular(10.0), ), ),
如果你说的浮动图标是Row里自己写的左侧leading图标(比如邮箱/锁形icon),直接给图标加焦点判断,输入框失焦时自动隐藏即可。另外你原代码里Button组件下方多打了一个多余逗号,删掉即可避免语法格式警告。
方案2:保留浮动标识,让滚动时内容正常被AppBar遮挡
不需要改输入框逻辑,只要调整滚动视图和Scaffold的层级配置即可:
- 给
SingleChildScrollView加上强制裁剪配置,超出滚动视口的内容直接截断:
SingleChildScrollView( // 不要开拖拽收起键盘的配置,保留原有注释即可 clipBehavior: Clip.hardEdge, // 新增该行 child: Column( // 原有子组件保持不变 ), )
- 检查外层Scaffold配置,确保没有开启
extendBodyBehindAppBar: true,同时给AppBar设置大于0的elevation值,保证AppBar绘制层级在页面body内容之上:
Scaffold( // 若有该行配置直接删除,或设为false // extendBodyBehindAppBar: true, appBar: AppBar( elevation: 2, // 保证AppBar层级高于body内容 // 其余AppBar配置不变 ), // 其余页面配置不变 )
改完后滚动页面时,滑到AppBar下方的所有内容(包括浮动输入标识)都会被正常遮挡,完全不影响键盘弹出时的防溢出适配,也不会改变原有交互逻辑。
内容的提问来源于stack exchange,提问作者ClarenceHD
相关产品推荐
相关产品推荐

