如何移除ToolbarPosition.custom下HtmlEditor输入框的白色线条?
问题说明
使用html_editor_enhanced包进行Flutter开发时,将HtmlToolbarOptions的toolbarPosition参数设置为ToolbarPosition.custom后,编辑器文本输入框下方会出现一条多余的白色线条,需要移除该线条。
问题效果如下:
当前实现代码:
HtmlEditor( controller: notifier.titleController, htmlEditorOptions: HtmlEditorOptions( hint: 'Title', shouldEnsureVisible: true, androidUseHybridComposition: false, autoAdjustHeight: true), htmlToolbarOptions: HtmlToolbarOptions( toolbarPosition: ToolbarPosition.custom, ), callbacks: Callbacks(onInit: () { notifier.titleController.setFocus(); }, onFocus: () { notifier.setFocus(true); }, onChangeContent: (val) { notifier.setHeight(); }), otherOptions: OtherOptions( height: 60, decoration: BoxDecoration(color: noteColor)), )
问题原因
当toolbarPosition设置为ToolbarPosition.custom时,组件不会渲染内置的默认工具栏,但工具栏与编辑区域之间默认的1px分隔线不会自动隐藏,这条分隔线就是多余白线的来源。
解决方法
- 在
HtmlToolbarOptions配置中添加toolbarSeparatorColor: Colors.transparent,直接隐藏默认分隔线,这是解决该问题的核心配置。 - 如果完成上述配置后仍存在细微白线残留,在
OtherOptions的BoxDecoration中添加border: Border.all(width: 0, color: Colors.transparent),覆盖组件自带的默认边框样式,即可完全消除多余线条。
修改后的核心配置参考:
htmlToolbarOptions: HtmlToolbarOptions( toolbarPosition: ToolbarPosition.custom, // 隐藏编辑区与工具栏之间的默认分隔线 toolbarSeparatorColor: Colors.transparent, ), otherOptions: OtherOptions( height: 60, decoration: BoxDecoration( color: noteColor, // 覆盖组件默认边框,消除边缘残留线条 border: Border.all(width: 0, color: Colors.transparent), ), ),
内容的提问来源于stack exchange,提问作者Adnan Turgay Aydın
相关产品推荐
相关产品推荐

