Flutter CupertinoTextField双击唤起剪切粘贴弹窗尺寸错误文字被截断

问题原因 #

该问题是Flutter中CupertinoTextField组件的已知兼容性bug，当配置了自定义字体、maxLines为null的多行输入属性时，系统计算文本选择弹窗（剪切/复制/粘贴菜单）的尺寸时会遗漏自定义字体的宽高参数，导致菜单尺寸计算错误，内部文字被截断。

修复方案 #

• 方案1：补充strutStyle配置，强制统一文本行高基准，修正尺寸计算偏差
  在CupertinoTextField组件的参数中新增以下配置即可：

  strutStyle: StrutStyle(
    fontSize: 20,
    height: 1.2,
    forceStrutHeight: true,
  ),
  

• 方案2：自定义上下文菜单构建器，覆盖默认菜单的尺寸约束
  在CupertinoTextField组件的参数中新增contextMenuBuilder配置：

  contextMenuBuilder: (context, editableTextState) {
    return CupertinoAdaptiveTextSelectionToolbar(
      anchors: editableTextState.contextMenuAnchors,
      children: editableTextState.contextMenuButtonItems
          .map((item) => CupertinoTextSelectionToolbarButton.buttonItem(buttonItem: item))
          .toList(),
    );
  },
  

• 方案3（兜底方案）：如果必须保留多行输入属性，可将CupertinoTextField替换为带Cupertino主题的Material TextField，兼容性更好，替换后完整代码如下：

  Theme(
    data: ThemeData(
      cupertinoOverrideTheme: CupertinoThemeData(
        primaryColor: Theme.of(context).accentColor,
      ),
    ),
    child: Padding(
      padding: const EdgeInsets.only(left: 12.0),
      child: TextField(
        textCapitalization: TextCapitalization.words,
        focusNode: titleFocus,
        autofocus: true,
        controller: titleController,
        keyboardType: TextInputType.multiline,
        maxLines: null,
        cursorColor: Theme.of(context).cursorColor,
        onSubmitted: (text) {
          titleFocus.unfocus();
          FocusScope.of(context).requestFocus(contentFocus);
        },
        textInputAction: TextInputAction.next,
        style: GoogleFonts.roboto(
          textStyle: TextStyle(
            fontSize: 20,
            color: Theme.of(context).accentColor,
            fontWeight: FontWeight.w700,
          ),
        ),
        decoration: InputDecoration(
          hintText: "Sermon Title",
          hintStyle: TextStyle(
            color: Colors.grey.shade400,
            fontSize: 20,
            fontFamily: 'Helvetica Neue',
            fontWeight: FontWeight.w500,
          ),
          border: InputBorder.none,
          contentPadding: EdgeInsets.zero,
        ),
      ),
    ),
  )
  

内容的提问来源于stack exchange，提问作者Tom Galland