You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何移除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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.29 15:01:06