Flutter-Quill 编辑器无法在可滚动表单中工作

Question

我想将我的 QuillEditor 放在我的表单中，而不是放在我的应用程序的专用页面上。

我尝试在 SingleChildScrollView 中使用 Column 和使用 ListView 小部件，但结果是一样的:

• 由于没有文字，编辑器很小，我希望它被“展开”(我知道它不能在卷轴中展开，但你明白了)；
• 文本的溢出不会使页面相应地滚动，因此用户看不到他们正在输入的内容。

这是一些代码:

return Scaffold(
  appBar: AppBar(
    title: Text("Reply form"),
    actions: [
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.send),
        tooltip: "Send",
      )
    ],
  ),
  body: SafeArea(
    child: Form(
      child: ListView(
        children: [
          Text("From: test@my.org"),
          SizedBox(height: 8),
          chipInputField(
            label: "To",
            onChanged: (List<Object?> o) {},
            initialValue: ["first@email.it"],
          ),
          chipInputField(
            label: "Cc",
            onChanged: (List<Object?> o) {},
            initialValue: ["second@email.it"],
          ),
          chipInputField(
            label: "Bcc",
            onChanged: (List<Object?> o) {},
            initialValue: ["third@email.it"],
          ),
          QuillEditor(
            controller: quillController,
            scrollable: true,
            scrollController: ScrollController(),
            focusNode: FocusNode(),
            padding: EdgeInsets.all(5),
            autoFocus: true,
            readOnly: false,
            expands: false,
            placeholder: "compose_email",
          ),
          QuillToolbar.basic(
            controller: quillController,
            showUnderLineButton: false,
            showStrikeThrough: false,
            showColorButton: false,
            showBackgroundColorButton: false,
            showListCheck: false,
            showIndent: false,
          ),
        ],
      ),
    ),
  ),
);

第一个问题:写邮件部分在应用页面内部没有展开

第二个问题:只要我写一些文字，小部件就不会滚动

编辑:我使用的是 Flutter 2.2.3 和 flutter_quill: 1.3.3

Answer 1

因此，在多次尝试解决这个问题之后，我意识到以下几点，并想出了一个可能对您有所帮助的解决方案。

maxlines: null ListView 中的 textField 将自动滚动 listView 没有问题，但由于某些原因，flutter_quill 有一些问题

现在我的工作如下(完整代码将在底部):

1. 首先我们在具有这种形式的小部件的状态类中定义了几个变量

final quill.QuillController quillController = quill.QuillController.basic();
final FocusNode editorFocusNode = FocusNode();
bool isToolBarVisible = true;

您已经定义了 Controller ，但对于其他 2 个属性，您将需要它们根据焦点节点显示/隐藏工具栏。

1. 我们不使用简单的 ListView，而是使用 customScrollView，这使我们可以创建更复杂的 ListView ，它使用 slivers(sliver 是一个可滚动的小部件，您可以了解更多信息 about it)

Form(
          child: CustomScrollView(
            slivers: [
              SliverAppBar(
                pinned: true,
                toolbarHeight: isToolBarVisible ? 50 : 0,
                title:
                    Visibility(visible: isToolBarVisible, child: getToolBar()),
              ),
              SliverToBoxAdapter(
                child: Column(
                  children: getTextFields(),
                ),
              ),
              SliverFillRemaining(
                hasScrollBody: true,
                child: getEditor(),
              ),
            ],
          ),

使用 sliver app bar 我们可以固定 quill 工具栏，使用 sliver to box 适配器我们可以添加普通的文本字段，然后我们使用 sliverFillRemaining 扩展 quill 编辑器。

这里是子函数:

 Widget getToolBar() {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: quill.QuillToolbar.basic(
        controller: quillController,
        showUnderLineButton: false,
        showStrikeThrough: false,
        showColorButton: false,
        showBackgroundColorButton: false,
        showListCheck: false,
        showIndent: false,
      ),
    );
  }

  List<Widget> getTextFields() {
    return [
      Text("From: test@my.org"),
      SizedBox(height: 8),
      TextField(
        decoration: InputDecoration(labelText: "To"),
      ),
      TextField(
        decoration: InputDecoration(labelText: "Cc"),
      ),
      TextField(
        decoration: InputDecoration(labelText: "Bcc"),
      ),
    ];
  }

  Widget getEditor() {
    return QuillEditor(
      controller: quillController,
      scrollable: true,
      scrollController: ScrollController(),
      focusNode: editorFocusNode,
      padding: EdgeInsets.all(5),
      autoFocus: true,
      readOnly: false,
      expands: false,
      placeholder: "compose_email",
    );
  }

用您的 chipInputField 替换普通的 textField

最后是完整的代码:

import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.dart' as quill;
import 'package:flutter_quill/widgets/editor.dart';

class FlutterQuillForm extends StatefulWidget {
  @override
  _FlutterQuillFormState createState() => _FlutterQuillFormState();
}

class _FlutterQuillFormState extends State<FlutterQuillForm> {
  final quill.QuillController quillController = quill.QuillController.basic();
  final FocusNode editorFocusNode = FocusNode();
  bool isToolBarVisible = true;
  @override
  void initState() {
    editorFocusNode.addListener(() {
      setState(() {
        isToolBarVisible = editorFocusNode.hasFocus;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Reply form"),
        actions: [
          IconButton(
            onPressed: () {},
            icon: Icon(Icons.send),
            tooltip: "Send",
          )
        ],
      ),
      body: SafeArea(
        child: Form(
          child: CustomScrollView(
            slivers: [
              SliverAppBar(
                pinned: true,
                toolbarHeight: isToolBarVisible ? 50 : 0,
                title:
                    Visibility(visible: isToolBarVisible, child: getToolBar()),
              ),
              SliverToBoxAdapter(
                child: Column(
                  children: getTextFields(),
                ),
              ),
              SliverFillRemaining(
                hasScrollBody: true,
                child: getEditor(),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget getToolBar() {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: quill.QuillToolbar.basic(
        controller: quillController,
        showUnderLineButton: false,
        showStrikeThrough: false,
        showColorButton: false,
        showBackgroundColorButton: false,
        showListCheck: false,
        showIndent: false,
      ),
    );
  }

  List<Widget> getTextFields() {
    return [
      Text("From: test@my.org"),
      SizedBox(height: 8),
      TextField(
        decoration: InputDecoration(labelText: "To"),
      ),
      TextField(
        decoration: InputDecoration(labelText: "Cc"),
      ),
      TextField(
        decoration: InputDecoration(labelText: "Bcc"),
      ),
    ];
  }

  Widget getEditor() {
    return QuillEditor(
      controller: quillController,
      scrollable: true,
      scrollController: ScrollController(),
      focusNode: editorFocusNode,
      padding: EdgeInsets.all(5),
      autoFocus: true,
      readOnly: false,
      expands: false,
      placeholder: "compose_email",
    );
  }

  @override
  void dispose() {
    super.dispose();
    quillController.dispose();
  }
}

在焦点节点监听器中，我们可以设置工具栏的状态为可见或不可见，不要忘记配置 Controller 和焦点节点。

截图: