1回答

CrazyCodeBoy

2024-01-16

在Flutter中，实现输入框间焦点传递的一种常见方法是使用`FocusNode`和`TextField`的`onSubmitted`属性。这里是一个简单的示例步骤：

1. **定义FocusNodes**：为每个输入框定义一个`FocusNode`。

2. **设置TextField的FocusNode**：将`FocusNode`分别设置给每个`TextField`。

3. **使用onSubmitted传递焦点**：在第一个`TextField`的`onSubmitted`属性中，写一个方法来将焦点传递到下一个`FocusNode`。

下面是一个基本的代码示例：

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FocusDemo(),
    );
  }
}

class FocusDemo extends StatefulWidget {
  @override
  _FocusDemoState createState() => _FocusDemoState();
}

class _FocusDemoState extends State<FocusDemo> {
  // 定义FocusNodes
  final FocusNode _focusNodeFirst = FocusNode();
  final FocusNode _focusNodeSecond = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Focus Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            // 第一个输入框
            TextField(
              autofocus: true,
              focusNode: _focusNodeFirst,
              onSubmitted: (String value) {
                // 当点击确认后，焦点传递到第二个输入框
                FocusScope.of(context).requestFocus(_focusNodeSecond);
              },
              decoration: InputDecoration(
                labelText: 'First Input',
              ),
            ),
            // 第二个输入框
            TextField(
              focusNode: _focusNodeSecond,
              decoration: InputDecoration(
                labelText: 'Second Input',
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 释放FocusNodes
    _focusNodeFirst.dispose();
    _focusNodeSecond.dispose();
    super.dispose();
  }
}
```

这个示例中，当第一个输入框的内容被提交（如用户按下键盘上的确认键）时，焦点会自动传递到第二个输入框。记得在不需要时释放`FocusNode`资源。

1

0