使用 EditableText 进行 Flutter

Question

我正在尝试弄清楚如何在 Flutter 中使用 TextEditor。

我有“卡片编辑器”（基本上我希望能够处理相当于一段文本的内容）

new EditableText(
                    autofocus: true,
                    maxLines: null,
                    backgroundCursorColor: Colors.amber,
                    cursorColor: Colors.green,
                    style: TextStyle(),
                    focusNode:  FocusNode(),
                    controller: controller,
                    onSubmitted: (val) {
                      _addCard(val);
                      Navigator.pop(context);
                    },
                  )

我根据 TextField 的示例进行了改编。

但我有几个问题。

首先，我打字时它似乎没有显示任何内容。光标移动，但看不到任何文本。当没有明确的样式时这是默认的吗？

其次，如何触发提交？对于文本字段，CR / Enter 按钮可以执行此操作。显然，我明白为什么您不一定希望使用 EditableText 但我应该做什么？

第三，我需要能够将默认文本放入此小部件中。我尝试向 EditableText 添加“值”属性，但这似乎不正确。有什么方法可以做到这一点？

Answer 1

• 来自 TextField 类 - 材质库 - Dart API :

  EditableText，这是 TextField 核心的原始文本编辑控件。 EditableText 小部件很少直接使用，除非您正在实现完全不同的设计语言，例如 Cupertino。

• 这里是 TextField 的示例，来自我的应用程序 使用非安全休息 api 的 flutter listview CRUD 应用程序

  class _TaskEditPageWidgetState extends State<TaskEditPageWidget> {
  TextEditingController _noteController;
  
  @override
  void initState() {
      super.initState();
      _noteController = TextEditingController.fromValue(
      TextEditingValue(
          text: widget.taskOpj.note,
      ),
      );
  }
  
  @override
  void dispose() {
      _noteController.dispose();
      super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
      return Scaffold(
      appBar: _appBar(),
      body: _body(),
      );
  }
  
  Widget _appBar() {
      return AppBar(
      title: new Text("Edit Task"),
      actions: <Widget>[
          new IconButton(
          icon: new Icon(Icons.save),
          onPressed: _save,
          ),
      ],
      );
  }
  
  Widget _body() {
      return SingleChildScrollView(
      child: Column(
          children: <Widget>[
          Text("Note:"),
          TextField(
              decoration: InputDecoration(border: InputBorder.none),
              autofocus: true,
              keyboardType: TextInputType.multiline,
              maxLines: null,
              controller: _noteController),
          ],
      ),
      );
  }
  
  Future _save() async {
      widget.taskOpj.note = _noteController.text;
      await Tasks.updateTask(widget.taskOpj);
      widget.notifyParent();
      Navigator.pop(context);
  }
  }
  

Answer 2

为此有一个 EditableText 类。使用以下代码：

EditableText(
              maxLines: 60,
              onTapOutside: (tapOutside) {
                focusNode.unfocus();
                print('Tapped outside: $tapOutside');
              },
              style: kStoryContentTextStyle,
              controller: editingController!,
              cursorColor: Colors.white,
              backgroundCursorColor: Colors.black,
              focusNode: focusNode,
            ),

焦点节点可以使用 unfocus() 取消编辑。 控制器将在 editController.text 下包含编辑后的文本。 EditableText 可以嵌入到另一个小部件中。 光标颜色是编辑时光标的颜色。

Answer 3

只需添加这一行：

style: TextStyle(
  decorationThickness: 0.001,
),