文本字段上的颤动滚动条

Question

我有全屏

TextField

，当用户添加更多行/文本时，它会变大。我想为用户添加滚动条以了解 TextField 的大小以及他在哪里。

这是我的屏幕和 TextField 的代码：

import 'package:flutter/material.dart';

class TextEditor extends StatefulWidget {
  TextEditor();
  @override
  _TextEditorState createState() => _TextEditorState();
}

class _TextEditorState extends State<TextEditor> {
  TextEditingController _editTextController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    var scaffold = Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () => _backButton(),
        ),
        title: Text("File name"),
      ),
      body: _buildTextEditor(),
      resizeToAvoidBottomInset: true,
    );
    return scaffold;
  }

  Widget _buildTextEditor() {
    return TextField(
      autofocus: true,
      keyboardType: TextInputType.multiline,
      maxLines: null,
      autocorrect: true,
      onChanged: (s) => {},
      decoration: InputDecoration(
        border: InputBorder.none,
        isDense: true,
      ),
    );
  }

  _backButton() {}
}

这就是我的

这就是我想要的，右边的滚动条

我找不到办法做到这一点，而且我不是 Flutter 专家，不知道如何靠自己做到这一点

Answer 1

幸运的是，

TextField

小部件接受滚动控制器。这可用于生成滚动条。请参阅下面的示例。

TextEditingController _editTextController = TextEditingController();

// Initialise a scroll controller.
ScrollController _scrollController = ScrollController();

然后，将其添加到

TextField

小部件并将此小部件包装在

Scrollbar

！

return Scrollbar(
  controller: _scrollController,
  isAlwaysShown: true,
  child: TextField(
    scrollController: _scrollController,
    autofocus: true,
    keyboardType: TextInputType.multiline,
    maxLines: null,
    autocorrect: true,
    onChanged: (s) => {},
    decoration: InputDecoration(
      border: InputBorder.none,
      isDense: true,
    ),
  ),
);

Answer 2

MediaQuery.removePadding(
    context: context,
    removeTop: true,
    removeBottom: true,
    child: Scrollbar(
      thumbVisibility: true,
      child: TextField( //If you want initial value use TextFormField
        maxLines: 4,
        minLines: 1,
        decoration: const InputDecoration(contentPadding: EdgeInsets.zero),
      ),
    ),
  );

经过多次尝试，这对我的情况有所帮助。

如果你想使用静态只读文本，用户 TextFormField with initialValue 和 readOnly true.

Answer 3

步骤 1) 为 TextField 和滚动条初始化一个 TextEditing Controller 和 ScrollController。

TextEditingController _editTextController = TextEditingController();
ScrollController _scrollController = ScrollController();

步骤 2) 创建 TextField/ 和 Scrollbar 小部件。

Scrollbar(
  controller: _scrollController,
  child: TextField(
    scrollController: _scrollController,
    autofocus: true,
    keyboardType: TextInputType.multiline,
    maxLines: 3,
    onChanged: (s) => {},
  ),
);

这将创建一个 3 行大小的 TextField。一旦用户输入超过 3 行。将出现滚动条。请注意，我使用 TextFieldForm 而不是 TextField 测试了此代码，但我将其更改为 TextField 以满足您的需求。