Flutter TextFormField 文本在宽度超过时裁剪

Question

我在 Flutter 应用程序搜索字段中使用 TextFormField。当我输入大于 textformfield 宽度的文本时，输入的文本被裁剪到一半，完全不可见。请找到我下面的代码和附加的图像，以便更好地理解问题。

TextFormField(
      focusNode: focusNode,
      controller: textController,
      decoration: InputDecoration(
        border: InputBorder.none,
        icon: Icon(
          Icons.search,
        ),
        hintText: AppStrings.searchCatHint,
        hintStyle: TextStyle(
            fontSize: 17,),
      ),
      autovalidate: true,
      autocorrect: false,
      autofocus: true,
    );

问题屏幕：

我在另一个问题中也看到了类似的问题，但没有提供解决方案。 Similar issue link

根据@CarlosSR 建议正确显示文本。但是对齐问题如下。

Answer 1

用容器包装 textformfield：

不会出现错误：

Container(
            color: Colors.black12,
            width: 280,
            height: 45,
            child: TextFormField(
              decoration: InputDecoration(
                border: InputBorder.none,
                icon: Icon(
                  Icons.search,
                ),
                hintStyle: TextStyle(
                  fontSize: 17,),
              ),
              autovalidate: true,
              autocorrect: false,
              autofocus: true,
            ),
          ),

错误是填充我猜你是否正在使用：

Container(
            color: Colors.black12,
            width: 280,
            height: 45,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextFormField(
                decoration: InputDecoration(
                  border: InputBorder.none,
                  icon: Icon(
                    Icons.search,
                  ),
                  hintStyle: TextStyle(
                    fontSize: 17,),
                ),
                autovalidate: true,
                autocorrect: false,
                autofocus: true,
              ),
            ),
          ),

Answer 2

这样您就只能在水平轴上滚动小部件，另外还可以添加填充以使文本位于您想要的位置。另一方面，我建议您检查对齐小部件。

SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
      focusNode: focusNode,
      controller: textController,
      decoration: InputDecoration(
        border: InputBorder.none,
        icon: Icon(
          Icons.search,
        ),
        hintText: AppStrings.searchCatHint,
        hintStyle: TextStyle(
            fontSize: 17,),
      ),
      autovalidate: true,
      autocorrect: false,
      autofocus: true,
    ),
),
),

Answer 3

我也恰好有 issue.The 我注意到的事情，当我在某个硬编码高度的容器中有一个文本字段时，您可能会遇到这个 issue.Try 删除容器的高度或只需删除文本字段底部 padding.This 会有帮助。

Answer 4

我找到了问题的解决方案。

问题描述：输入新文字时，旧文字向左移动没有问题。

解决方案：我已使用容器包装为我的 TextFormField 指定了高度。代码如下所示。

Container(
height:40, 
child: TextFormFiled(...),
);

这对我有用。非常感谢您的所有回复。

Answer 5

此问题的解决方案是使用 CupertinoTextField 小部件。你可以阅读它 here.

Flutter TextFormField 文本在宽度超过时裁剪

Flutter TextFormField text crops when width exceeds

flutter

flutter-layout

flutter-text