Question

我实现了一个将maxLines属性设置为3的TextFormField。一旦用户以第四行开头，我怎么能让TextFormField向下滚动？此时光标不再可见，直到用户手动向下滚动。有没有办法自动执行此操作？

此行为实际上是在＆text;文本字段中的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。

Answer 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的帮助来获取小部件排序和正确的小部件以使其正常工作。

Answer 2

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

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,
                    ),
                  ),
                ),
              );

Answer 3

在最新的flutter 1.20.4中，当该文本字段具有最大高度时，它将滚动。

NTSTATUS SpoofSerialNumber(char* serialNumber)
{
    //RtlSecureZeroMemory
    if (!HWIDGenerated)
    {
        HWIDGenerated = 1;

如果您在Raw或column内使用Textfield，请将其包装在Container( constraints: BoxConstraints(maxHeight: 200), child: TextField( maxLines: null, ....... ) )小部件中

Answer 4

只需使用 TextFormField() 小部件并设置 minLines= 和 maxLines= 。缺少的东西在这里滚动指示器。

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

Answer 5

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

Answer 6

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

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

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

6 个答案: