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

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

Answer 4

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

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

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

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

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

Answer 5

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

当宽度超过时，Flutter TextFormField文本裁剪

5 个答案: