扩展 maxLines 属性时自动滚动多行 TextFormField答案

【问题标题】：Automatically scroll multiline TextFormField when it extends the maxLines attribute扩展 maxLines 属性时自动滚动多行 TextFormField
【发布时间】：2017-09-06 23:28:23
【问题描述】：

我正在实现一个将 maxLines 属性设置为 3 的 TextFormField。一旦用户从第四行开始，如何使 TextFormField 向下滚动？目前光标是不可见的，直到用户手动向下滚动。有没有办法自动执行此操作？

这种行为实际上在“文本字段”示例中的 flutter_gallery 应用程序中具有特色。只需在“实时故事”输入中键入一个长文本，直到它到达第四行。
我的代码的重要部分实际上如下所示：

import 'package:flutter/material.dart';

class TextFormFieldDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Form(
        child: new TextFormField(
          maxLines: 3,
        ),
      ),
    );
  }
}

到目前为止，我还没有找到解决此问题的方法。
此问题同时影响 iOS 和 android。

【问题讨论】：

PS：这也会影响单行文本字段。一旦到达行尾，人们会期望文本向左滚动，但事实并非如此。

标签： textfield autoscroll flutter

【解决方案1】：

我们的团队通过嵌套一些现有的小部件来实现这一点：

// create the illusion of a beautifully scrolling text box
return new Container(
    color: Colors.gray,
  padding: new EdgeInsets.all(7.0),

  child: new ConstrainedBox(
    constraints: new BoxConstraints(
      minWidth: _contextWidth(),
      maxWidth: _contextWidth(),
      minHeight: AppMeasurements.isLandscapePhone(context) ? 25.0 : 25.0,
      maxHeight: 55.0,
    ),

    child: new SingleChildScrollView(
      scrollDirection: Axis.vertical,
      reverse: true,

        // here's the actual text box
        child: new TextField(
          keyboardType: TextInputType.multiline,
          maxLines: null, //grow automatically
          focusNode: mrFocus,
          controller: _textController,
          onSubmitted: currentIsComposing ? _handleSubmitted : null,
          decoration: new InputDecoration.collapsed(
            hintText: ''Please enter a lot of text',
          ),
        ),
        // ends the actual text box

      ),
    ),
  );
}

我们得到了Darky 的帮助，以获取小部件排序和正确的小部件以使其正常工作。

【讨论】：

maxLInes=null 太棒了
美丽的黑客
有没有人为 CupertinoTextBox 运行过这个？尽管 MaxLines=null 也应该创建一个不断增长的字段，但没有显示滚动条

【解决方案2】：

这似乎是 Flutter 框架中缺少的功能，我已经提交了一个错误来解决它：https://github.com/flutter/flutter/issues/9365

【讨论】：

【解决方案3】：

您可以使用BoxConstraints 并设置您的TextField 的maxHeight

Container(
  constraints: BoxConstraints(maxHeight: 100),
  child: SingleChildScrollView(
    child: TextField(
      maxLines: null,
    ),
  ),
);

【讨论】：

【解决方案4】：

使用最新的flutter 1.20.4，此文本字段将在达到最大高度时滚动。

       Container(
          constraints: BoxConstraints(maxHeight: 200),
             child: TextField(
                maxLines: null,
                 .......
                )
            )

如果您在 Raw 或列中使用 Textfield，请将其包装在 Expanded 小部件中

【讨论】：

【解决方案5】：

我让它像这样工作。希望对您有所帮助！

return new Card(
                shape: RoundedRectangleBorder(
                 side: BorderSide(
                   color: Colors.deepPurpleAccent,
                   width: 1
                 ),
                  borderRadius: BorderRadius.circular(3)
                ),
                child: Container(
                  height: 50,
                  child: SingleChildScrollView(
                    child: TextField(
                      maxLines: null,
                    ),
                  ),
                ),
              );

【讨论】：

【解决方案6】：

只需使用 TextFormField() 小部件并设置 minLines= 和 maxLines= 。缺少的就是滚动指示器。

 TextFormField(
                    minLines: 3,
                    maxLines: 3,
                    key: _messageValueKey,
                    decoration: _inputDecoration,
                  ),

【讨论】：

【解决方案7】：

只需将 'reverse: true' 添加到您的 Scrollable Widget，如下所示：

    Widget build(BuildContext context) {
      return Container(
        width: MediaQuery.of(context).size.width,
        height: 130.0,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.purpleAccent),
        ),
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          reverse: true,
          child: Text(
            '$message',
            maxLines: 2,
            style: TextStyle(fontSize: 30),
          ),
        ),
      );
    }
  }

【讨论】：