宽度超过时 Flutter TextFormField 文本裁剪答案

【问题标题】：Flutter TextFormField text crops when width exceeds宽度超过时 Flutter TextFormField 文本裁剪
【发布时间】：2020-07-31 23:15:08
【问题描述】：

我将 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 建议正确显示文本。但对齐问题如下。

【问题讨论】：

你试过设置TextFormField(maxLines: 1)吗？它似乎是在第二行添加你的额外文本
@CarlosSR 是的，我试过了，但没用。
如果将 TextFormField 包装在 SingleChildScrollView(scrollDirection: Axis.horizontal child: TextFormField( maxLines:1, ...)) 中会怎样
这很好，如果我们输入新字母，整个文本应该向左移动。但不知道怎么做。
@CarlosSR 我会试试你的方法。

标签： flutter flutter-layout flutter-text

【解决方案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,
              ),
            ),
          ),

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我也碰巧遇到了确切的问题。我注意到，当我在某个硬编码高度的容器中有一个文本字段时，您可能会遇到此问题。尝试删除容器的高度或仅删除文本字段底部填充.这会有所帮助。

【讨论】：

嗨 Rutvik 和 Vinay，问题已解决。我在问题的评论部分提到的解决方案。感谢您的关注。

【解决方案4】：

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

问题描述：输入新文本时，旧文本应该向左移动，没有任何问题。

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

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

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

【讨论】：

【解决方案5】：

解决方案是使用CupertinoTextField 小部件。你可以阅读它here。

【讨论】：