Jetpack Compose中如何实现自定义键盘输入建议？

核心思路 #

要实现自定义键盘输入建议，关键是通过TextField的输入监听接口拦截用户输入，根据输入状态生成包含目标后缀的建议列表，再将建议注入到键盘候选栏（或自定义候选下拉框）中。结合你已完成第一个后缀自动补全的情况，只需针对第二个后缀单独生成建议即可。

分平台实现示例 #

1. iOS（Swift）

利用UITextFieldDelegate和UITextInputAssistantItem配置自定义候选词：

class EmailTextFieldDelegate: NSObject, UITextFieldDelegate {
    private let targetSuffix = "@nauta.co.cu"
    
    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        guard let currentText = textField.text else { return true }
        let updatedText = (currentText as NSString).replacingCharacters(in: range, with: string)
        
        // 当用户输入@或已输入前缀时，生成第二个后缀的完整邮箱建议
        if updatedText.contains("@") {
            let prefix = updatedText.components(separatedBy: "@")[0]
            let fullSuggestion = prefix + targetSuffix
            
            // 清空原有候选组，添加新建议
            textField.inputAssistantItem.trailingBarButtonGroups = []
            let suggestionGroup = UIBarButtonItemGroup()
            let suggestButton = UIBarButtonItem(title: fullSuggestion, style: .plain, target: self, action: #selector(onSuggestionTap(_:)))
            suggestButton.setValue(textField, forKey: "boundTextField")
            suggestionGroup.barButtonItems.append(suggestButton)
            textField.inputAssistantItem.trailingBarButtonGroups = [suggestionGroup]
        } else {
            textField.inputAssistantItem.trailingBarButtonGroups = []
        }
        return true
    }
    
    @objc private func onSuggestionTap(_ sender: UIBarButtonItem) {
        guard let textField = sender.value(forKey: "boundTextField") as? UITextField else { return }
        textField.text = sender.title
    }
}

// 使用方式
let emailField = UITextField()
emailField.delegate = EmailTextFieldDelegate()

2. Android（Kotlin）

基于AutoCompleteTextView自定义建议逻辑：

class EmailSuggestionInput(context: Context, attrs: AttributeSet) : AutoCompleteTextView(context, attrs) {
    private val targetSuffix = "@nauta.co.cu"

    override fun performFiltering(text: CharSequence?, keyCode: Int) {
        text?.let { input ->
            val suggestions = if (input.contains("@")) {
                val prefix = input.split("@")[0]
                listOf(prefix + targetSuffix)
            } else {
                emptyList()
            }
            setAdapter(ArrayAdapter(context, android.R.layout.simple_dropdown_item_1line, suggestions))
            super.performFiltering(text, keyCode)
        }
    }

    override fun replaceText(text: CharSequence?) {
        super.replaceText(text)
    }
}

// 布局中引用
<com.yourpackage.EmailSuggestionInput
    android:id="@+id/emailInput"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="textEmailAddress"/>

3. Flutter

结合Autocomplete组件和TextEditingController实现：

class EmailInputWithSuggestion extends StatelessWidget {
    final String autoCompleteSuffix = "@nauta.con.cu";
    final String suggestSuffix = "@nauta.co.cu";

    @override
    Widget build(BuildContext context) {
        return Autocomplete<String>(
            optionsBuilder: (TextEditingValue value) {
                if (value.text.isEmpty || !value.text.contains("@")) {
                    return const Iterable.empty();
                }
                final prefix = value.text.split("@")[0];
                return [prefix + suggestSuffix];
            },
            onSelected: (String selection) {
                // 选中建议时填充输入框
                final controller = TextEditingController(text: selection);
                // 可根据需求调整光标位置
            },
            fieldViewBuilder: (context, controller, focusNode, onSubmit) {
                return TextField(
                    controller: controller,
                    focusNode: focusNode,
                    keyboardType: TextInputType.emailAddress,
                    decoration: const InputDecoration(labelText: "邮箱"),
                    // 保留已实现的第一个后缀自动补全逻辑
                    onChanged: (text) {
                        if (!text.contains("@") && text.isNotEmpty) {
                            controller.text = text + autoCompleteSuffix;
                            controller.selection = TextSelection.collapsed(offset: text.length);
                        }
                    },
                );
            },
        );
    }
}

注意事项 #

• 避免自动补全和建议逻辑冲突：比如当用户已触发第一个后缀的自动补全时，可跳过第二个后缀的建议展示。
• 不同平台的键盘建议API存在差异，需根据目标平台选择对应实现方式。
• 可根据用户输入的前缀动态生成精准建议，提升用户体验。

内容的提问来源于stack exchange，提问作者Lesly Cintra