Flutter文字输入居中利器：TextField对焦妙招！

2023-10-12 09:29:07

在 Flutter 中巧妙实现 TextField 输入居中和自动对焦

导言

TextField 是 Flutter 应用程序中至关重要的控件，它允许用户输入文本。为了增强用户体验，有时需要将 TextField 中的文本内容居中对齐并将其光标自动移动到输入内容的末尾。本指南将深入探讨如何使用简单的技巧在 Flutter 中实现这些效果，提升应用程序的视觉美感和易用性。

TextField 内容居中

1. 设置 TextAlign

将 TextField 的 textAlign 属性设置为 TextAlign.center，即可将文本内容居中对齐。

2. 调整 ContentPadding

修改 TextField 的 contentPadding 属性，为文本内容在顶部和底部预留适当的空间，使其在输入框内居中显示。

自动对焦到内容末尾

1. 引入 FocusNode 和 TextEditingController

使用 FocusNode 控制 TextField 的焦点，并使用 TextEditingController 管理文本内容。

2. 在 initState 中移动焦点

在 initState 方法中，使用 _focusNode.requestFocus() 将焦点移至 TextField。

3. 设置光标位置

设置 _textController.selection 为 TextSelection.fromPosition(TextPosition(offset: _textController.text.length))，将光标移动到输入内容的末尾。

代码示例

final FocusNode _focusNode = FocusNode();
final TextEditingController _textController = TextEditingController();

@override
void initState() {
  super.initState();
  _focusNode.requestFocus();
  _textController.selection = TextSelection.fromPosition(
      TextPosition(offset: _textController.text.length));
}

TextField(
  focusNode: _focusNode,
  controller: _textController,
  textAlign: TextAlign.center,
  contentPadding: EdgeInsets.symmetric(vertical: 16.0),
  decoration: InputDecoration(
    border: OutlineInputBorder(),
  ),
);