dart Flutter:如何在文本字段文本中间插入文本

icnyk63a  于 2023-01-10  发布在  Flutter
关注(0)|答案(4)|浏览(288)

我在flutter中有一个文本字段和一个表情符号选择器按钮。在选择一个表情符号时,我需要将其插入到当前光标位置。我如何实现这一点?目前使用TextEditingController时,我只能附加表情符号。我无法获得当前光标偏移。

emojiPicker() {
    return EmojiPicker(
      rows: 3,
      columns: 7,
      recommendKeywords: null,
      indicatorColor: flujoAccentColor,
      onEmojiSelected: (emoji, category) {
        print(emoji);
        _messageInputController.text =
            _messageInputController.text + emoji.emoji;
     }
    );
  }
x9ybnkn6

x9ybnkn61#

1.使用_txtController.selection获取选择(或光标位置)。
1.用所选表情替换所选内容。
1.然后固定控制器的选择(或光标位置

import 'package:emoji_picker/emoji_picker.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: HomePage()));
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  TextEditingController _messageInputController;

  @override
  void initState() {
    _messageInputController = TextEditingController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Demo"),
      ),
      body: SafeArea(
        child: Column(
          children: <Widget>[
            EmojiPicker(
              rows: 3,
              columns: 7,
              recommendKeywords: null,
              indicatorColor: Colors.red,
              onEmojiSelected: (emoji, category) {
                String text = _messageInputController.text;
                TextSelection textSelection = _messageInputController.selection;
                String newText = text.replaceRange(
                    textSelection.start, textSelection.end, emoji.emoji);
                final emojiLength = emoji.emoji.length;
                _messageInputController.text = newText;
                _messageInputController.selection = textSelection.copyWith(
                  baseOffset: textSelection.start + emojiLength,
                  extentOffset: textSelection.start + emojiLength,
                );
              },
            ),
            TextField(
              controller: _messageInputController,
            ),
          ],
        ),
      ),
    );
  }
}

有了这个你不仅可以插入选定的表情在光标位置,但也可以取代一些选定的文本

polkgigr

polkgigr2#

这是对CrazyLazyCat答案的一个小小修改。

void _insertText(String inserted) {
  final text = _controller.text;
  final selection = _controller.selection;
  final newText = text.replaceRange(selection.start, selection.end, inserted);
  _controller.value = TextEditingValue(
    text: newText,
    selection: TextSelection.collapsed(offset: selection.baseOffset + inserted.length),
  );
}
    • 备注**:
  • _controller是一个TextEditingController
  • 如果同时更改文本和选择,则应使用TextEditingValue,而不是单独更改它们(因为它们各自触发更新)。
  • 一般来说,如果您插入一些内容,您希望光标出现在其后,然后插入,因此TextSelection.collapsed具有调整后的索引。
nc1teljy

nc1teljy3#

除了text.replaceRange,我还有另一个解决方案。
您需要的是:

TextEditingController _tec;

String youWillAddtoTEC = "your emoji or your clipboard data or else";

String beforeCursorPositionAtTEC = tec.selection.textBefore(tec.text);

String afterCursorPositionAtTEC = tec.selection.textAfter(tec.text);

String result = beforeCursorPositionAtTEC + youWillAddtoTEC + afterCursorPositionAtTEC;

然后将结果添加到tec或您需要的任何小部件中:

tec.text = result;

对于选择或光标位置与上述相同,但如果您需要将光标放置在"youWillAddToTEC"之后,您可以这样做:

tec.selection = TextSelection.collapsed(offset: tec.selection.start + youWillAddtoTEC.lenght);
fwzugrvs

fwzugrvs4#

如果你想用一个新的字符串替换选中的文本字段,我发现下面的方法很有用。

void replaceTextSelectionWith(TextEditingController textEditingController, Function(String selection) getReplaceString)
{
  final text = textEditingController.text;
  final selection = textEditingController.selection;
  final replaceText = getReplaceString(selection.textInside(text)) as String;
  final newText = text.replaceRange(selection.start, selection.end, replaceText);

  textEditingController.value =
      TextEditingValue(text: newText, selection: TextSelection.collapsed(offset: selection.start + replaceText.length));
}

像这样使用它

replaceTextSelectionWith(textEditingController, (selection) => '**$selection**');

相关问题