如何在 TextFormField 的左上角开始文本答案

【问题标题】：How to start text in the left top corner in TextFormField如何在 TextFormField 的左上角开始文本
【发布时间】：2021-06-05 22:05:25
【问题描述】：

我有 TextFormField，我增加了这个字段的高度。我想从左上角开始文本并使该文本在行尾中断。因此，如果有人会放很多文本，那么字段将有 X 行，而不仅仅是一个。

现在的样子：

它应该是什么样子

代码：

 TextFormField(
                      controller: contentController,
                      decoration: InputDecoration(
                        contentPadding: new EdgeInsets.symmetric(
                            vertical: MediaQuery.of(context).size.height * .10,
                            horizontal: 10.0),
                        border: OutlineInputBorder(),
                        hintText: 'Treść',
                        fillColor: Color(0xffffffff),
                        filled: true,
                        prefixIcon: Icon(Icons.topic_rounded),
                      ),
                      validator: (value) {
                        if (value == null || value.isEmpty) {
                          return ErrorMessages.NO_CONTENT_MESSAGE;
                        }
                      },
                    ),

【问题讨论】：

标签： flutter dart

【解决方案1】：

你可以做一些事情：

您可以将maxLines: desiredNumberOfLines 和textAlignVertical: TextAlignVertical.top, 添加到您的TextFormField 并用Padding 包裹您的前缀图标，如下所示：

TextFormField(
  textAlignVertical: TextAlignVertical.top,
  decoration: InputDecoration(
    prefixIcon: Padding(
      padding: const EdgeInsets.only(bottom: 70.0),
      child: Icon(
        Icons.topic_rounded,
      ),
    ),
   ...
  ),
  maxLines: 5,
 ...
),

您可以用SizedBox 小部件包装您的TextFormField 并将expands: true 添加到文本字段，您还必须将minLines 和minLines 设置为null，否则会出现错误。图标对齐方式可以与前面的示例相同，使用Padding 小部件包裹图标，或者您可以以其他方式进行，如本示例所示。它是通过使用前缀参数而不是 prefixIcon 来完成的，如下所示：

SizedBox(
  height: 200,
  child: TextFormField(
    textAlignVertical: TextAlignVertical.top,
    expands: true,
    maxLines: null,
    minLines: null,
    decoration: InputDecoration(
      prefix: Icon(
        Icons.topic_rounded,
      ),
      ...
    ),
   ...
  ),
)

选择最适合您的文本和图标对齐方法的组合。

【讨论】：

这就是我对第一个示例的看法：link。您可能需要调整这些值以获得所需的结果。您能否提供更多关于那里不适合您的信息？
另外，我的TextFormField 与您在图片中提供的外观可能存在一些差异，因为我删除了一些与问题无关的样式代码。
没关系，试错法我实现了我想要的，但是不需要`textAlignVertical：TextAlignVertical.top，`。它不会改变任何东西。

【解决方案2】：

您需要指定prefix 图标的高度，默认情况下它将位于中心。但是要让它在顶部，您需要添加Container()，您将在其中添加这样的图标。

          TextFormField(
              minLines: 4,
              keyboardType: TextInputType.multiline,
              maxLines: 4,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Treść',
                fillColor: Color(0xffffffff),
                filled: true,
                prefixIcon: Container(
                  width: 20,
                  height: 100,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Icon(Icons.topic_rounded),
                      ),
                      Container(),
                    ],
                  ),
                ),
                prefixIconConstraints: BoxConstraints(
                  minWidth: 35,
                  minHeight: 0,
                ),
              ),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return "error";
                }
                return null;
              },
            )

看起来像这样

【讨论】：

如果我制作了例如 height: 150 那么文字会下降。我怎样才能让它像在屏幕上一样（图标在左边，文本在右边，在同一行）？我已经删除了 exmpty 容器，但它仍然像在屏幕上一样工作，所以似乎没有必要。
似乎prefixIconConstrainets也没有必要。