Flutter – 管理表单输入焦点

在本文中，我们将看到如何在Flutter管理表单输入焦点。当一个TextField 小部件被选中并接受输入时，它被称为具有焦点。用户只需点击它就可以将焦点转移到TextField 。

假设我们有一个消息应用程序，当用户导航到消息屏幕时，我们可以将焦点设置到我们键入消息的TextField 。这允许我们的用户在屏幕可见时立即开始输入消息，而无需手动点击TextField 。

Note: We need to manage the lifecycle of focus nodes using a
      State object as focus nodes are long-lived objects.

一旦TextField可见，我们就可以使用autofocus属性将注意力集中在它上。它具有以下语法：

句法：

TextField(
  autofocus: true,
);

我们还可以使用focusNode属性关注按钮点击上的文本字段。它包括三个步骤：

第 1 步：创建一个FocusNode 。

以下语法可用于聚焦节点：

句法：

FocusNode gfgFocusNode;
 @override
  void initState() {
    super.initState();
    gfgFocusNode = FocusNode();

第 2 步：将FocusNode传递给TextField。

您可以将@override 装饰器与小部件构建器一起使用来传递焦点节点，如下所示。

@override
  Widget build(BuildContext context) {
    return TextField(
      focusNode: gfgFocusNode,
    );
  }

第 3 步：使用requestFocus()将焦点放在按钮点击时的TextField上。

requestFocous()方法可用于在点击表单时将焦点放在TextField 上，如下所示：

onPressed: () => gfgFocusNode.requestFocus()

例子：

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("GFG | Input Focus"),
          backgroundColor: Color.fromRGBO(15, 157, 88, 1),
        ),
        body: InputForm(),
      ),
    );
  }
}
  
// Defining a custom Form widget
class InputForm extends StatefulWidget {
  @override
  _InputFormState createState() => _InputFormState();
}
  
// Defining a corresponding State class
// This class holds data related to the InputForm
class _InputFormState extends State {
    
  // Defining the focus node
  FocusNode focusNode1;
  FocusNode focusNode2;
  
  @override
  void initState() {
    super.initState();
      
    // To manage the lifecycle, creating focus nodes in
    // the initState method
    focusNode1 = FocusNode();
    focusNode2 = FocusNode();
  }
  
  // Called when the object is removed
  // from the tree permanently
  @override
  void dispose() {
      
    // Clean up the focus nodes
    // when the form is disposed
    focusNode1.dispose();
    focusNode2.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        children: [
          TextField(
              
            // The first TextField is focused
            // on as soon as the app starts
            autofocus: true,
            focusNode: focusNode1,
            decoration: InputDecoration(
              labelText: "First",
              labelStyle: TextStyle(fontSize: 25.0),
            ),
          ),
          SizedBox(
            height: 50.0,
          ),
          TextField(
              
            // The second TextField is focused
            // on when a user taps the second button
            focusNode: focusNode2,
            decoration: InputDecoration(
              labelText: "Second",
              labelStyle: TextStyle(fontSize: 25.0),
            ),
          ),
          SizedBox(
            height: 150.0,
          ),
          RaisedButton(
            onPressed: () {
              // When the button is pressed,
              // give focus to the first TextField
              // using focusNode1.
              focusNode1.requestFocus();
            },
            color: Color.fromRGBO(15, 157, 88, 1),
            textColor: Colors.white,
            child: Text(
              "Focus on First Text Field",
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ),
          SizedBox(
            height: 50.0,
          ),
          RaisedButton(
            onPressed: () {
              // When the button is pressed,
              // give focus to the second
              // TextField using focusNode2.
              focusNode2.requestFocus();
            },
            color: Color.fromRGBO(15, 157, 88, 1),
            child: Text(
              "Focus on Second Text Field",
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          )
        ],
      ),
    );
  }
}

输出：