表格交互实用教程 | 焦点和文本框

当一个文本框(输入框)被选中并接受输入时,被称为获得了“焦点”。通常情况下,用户能够通过点击文本框以使其聚焦,开发人员也可以使用本文所描述的方法来让文本框得到焦点。

管理焦点是一种直观地创建表单流程的基本方法。例如,假设我们有一个带有文本框的搜索页面。当用户导航到搜索页面时,我们可以聚焦文本框的搜索项。这将允许用户在搜索页面可见时能够立即开始输入,而无需手动点击文本框。

在本文中,我们将学习如何聚焦到文本框上,以及点击按钮时聚焦文本框。

一旦文本框可见,就将其聚焦

为了在文本框可见时将其聚焦,我们可以使用 autofocus 属性。

TextField(

  autofocus: true,

);

有关处理输入和创建文本框的更多信息,请参阅 实用教程的 Forms 部分。

Forms 链接:https://flutter-io.cn/docs/cookbook#forms

点击按钮时聚焦文本框

我们也可能需要在之后的某个时间点聚焦特定的文本框,而不是立即聚焦它。在这个例子中,我们将看到在用户按下按钮后如何聚焦文本框。在实际开发中,您还可能需要聚焦特定的文本框以响应 api 调用或错误校验。

步骤

  1. 创建一个 FocusNode

  2. 将 FocusNode 传递给 TextField

  3. 通过点击按钮聚焦 TextField

1. 创建一个 FocusNode

首先,我们需要创建一个 FocusNode。我们将使用 FocusNode 来识别 Flutter 的“focus tree”中的特定的 TextField。这将允许我们能够在接下来的步骤中聚焦 TextField

由于 focus node 是长寿命对象,我们需要使用 State 类来管理生命周期。为此,需要在 State 类的 initState 方法中创建 FocusNode 实例,并在 dispose 方法中清除它们。

// Define a custom Form widget.

class MyCustomForm extends StatefulWidget {

  @override

  _MyCustomFormState createState() => _MyCustomFormState();

}



// Define a corresponding State class.

// This class holds data related to the form.

class _MyCustomFormState extends State<MyCustomForm> {

  // Define the focus node. To manage the lifecycle, create the FocusNode in

  // the initState method, and clean it up in the dispose method.

  FocusNode myFocusNode;



  @override

  void initState() {

    super.initState();



    myFocusNode = FocusNode();

  }



  @override

  void dispose() {

    // Clean up the focus node when the Form is disposed.

    myFocusNode.dispose();



    super.dispose();

  }



  @override

  Widget build(BuildContext context) {

    // Fill this out in the next step.

  }

}

2. 将 FocusNode 传递给 TextField

现在已经有了 FocusNode,我们可以将这个 TextField 传递给 build() 方法。

class _MyCustomFormState extends State<MyCustomForm> {

  // Code to create the Focus node...



  @override

  Widget build(BuildContext context) {

    return TextField(

      focusNode: myFocusNode,

    );

  }

}

3. 通过点击按钮聚焦 TextField

最后,当用户点击 floating action button 时,我们将要聚焦文本框!为此我们将要使用 requestFocus 方法来完成此操作。

FloatingActionButton(

  // When the button is pressed, give focus to the text field using

  // myFocusNode.

  onPressed: () => FocusScope.of(context).requestFocus(myFocusNode),

);

完整样例

import 'package:flutter/material.dart';



void main() => runApp(MyApp());



class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Text Field Focus',

      home: MyCustomForm(),

    );

  }

}



// Define a custom Form widget.

class MyCustomForm extends StatefulWidget {

  @override

  _MyCustomFormState createState() => _MyCustomFormState();

}



// Define a corresponding State class.

// This class holds data related to the form.

class _MyCustomFormState extends State<MyCustomForm> {

  // Define the focus node. To manage the lifecycle, create the FocusNode in

  // the initState method, and clean it up in the dispose method.

  FocusNode myFocusNode;



  @override

  void initState() {

    super.initState();



    myFocusNode = FocusNode();

  }



  @override

  void dispose() {

    // Clean up the focus node when the Form is disposed.

    myFocusNode.dispose();



    super.dispose();

  }



  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Text Field Focus'),

      ),

      body: Padding(

        padding: const EdgeInsets.all(16.0),

        child: Column(

          children: [

            // The first text field is focused on as soon as the app starts.

            TextField(

              autofocus: true,

            ),

            // The second text field is focused on when a user taps the

            // FloatingActionButton.

            TextField(

              focusNode: myFocusNode,

            ),

          ],

        ),

      ),

      floatingActionButton: FloatingActionButton(

        // When the button is pressed,

        // give focus to the text field using myFocusNode.

        onPressed: () => FocusScope.of(context).requestFocus(myFocusNode),

        tooltip: 'Focus Second Text Field',

        child: Icon(Icons.edit),

      ), // This trailing comma makes auto-formatting nicer for build methods.

    );

  }

}

最多阅读

在Flutter中添加资源和图片 1年以前  |  1933次阅读
发布Flutter开发的iOS程序 1年以前  |  1350次阅读
Flutter Widget框架概述 1年以前  |  1183次阅读
在Flutter中发起HTTP网络请求 1年以前  |  1130次阅读
JSON和序列化 1年以前  |  1063次阅读
使用Inspector检查用户界面 1年以前  |  1045次阅读
Flutter框架概览 1年以前  |  994次阅读
Flutter的手势GestureDetector分析详解 8月以前  |  976次阅读
为Flutter应用程序添加交互 1年以前  |  964次阅读
使用自定义字体 1年以前  |  962次阅读
Flutter插件详解及其发布插件 8月以前  |  930次阅读
处理文本输入 1年以前  |  845次阅读
发布Flutter开发的Android程序 1年以前  |  770次阅读
使用包来开发Flutter应用 1年以前  |  768次阅读
Flutter 状态管理指南之 Provider 9月以前  |  764次阅读
编写国际化Flutter App 1年以前  |  749次阅读
Dart 语法预览 1年以前  |  724次阅读
使用平台通道编写平台特定的代码 1年以前  |  716次阅读
Flutter路由详解 8月以前  |  665次阅读