点击、拖动和输入文本

许多小部件不仅显示信息，还会响应用户交互。这包括可以点击的按钮，以及用于输入文本的 TextField。

要测试这些交互，您需要在测试环境中模拟它们。为此，请使用 WidgetTester 库。

WidgetTester 提供了输入文本、点击和拖动的方法。

在许多情况下，用户交互会更新应用的 state。在测试环境中，当 state 发生变化时，Flutter 不会自动重建小部件。要确保在模拟用户交互后重建小部件树，请调用 WidgetTester 提供的 pump() 或 pumpAndSettle() 方法。此食谱使用以下步骤：

创建要测试的小部件。
在文本字段中输入文本。
确保点击按钮可以添加待办事项。
确保滑动以删除可以移除待办事项。

在此示例中，创建一个基本的待办事项应用，用于测试三个功能：

将文本输入 TextField。
点击 FloatingActionButton 将文本添加到待办事项列表。
滑动以删除列表中的项目。

为了将重点放在测试上，本食谱将不提供有关如何构建待办事项应用的详细指南。要了解有关此应用如何构建的更多信息，请参阅相关食谱：

dartclass TodoList extends StatefulWidget {
  const TodoList({super.key});

  @override
  State<TodoList> createState() => _TodoListState();
}

class _TodoListState extends State<TodoList> {
  static const _appTitle = 'Todo List';
  final todos = <String>[];
  final controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _appTitle,
      home: Scaffold(
        appBar: AppBar(title: const Text(_appTitle)),
        body: Column(
          children: [
            TextField(controller: controller),
            Expanded(
              child: ListView.builder(
                itemCount: todos.length,
                itemBuilder: (context, index) {
                  final todo = todos[index];

                  return Dismissible(
                    key: Key('$todo$index'),
                    onDismissed: (direction) => todos.removeAt(index),
                    background: Container(color: Colors.red),
                    child: ListTile(title: Text(todo)),
                  );
                },
              ),
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              todos.add(controller.text);
              controller.clear();
            });
          },
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

现在您已经有了一个待办事项应用，开始编写测试。首先，在 TextField 中输入文本。

通过以下方式完成此任务：

在测试环境中构建小部件。
使用 WidgetTester 中的 enterText() 方法。

darttestWidgets('Add and remove a todo', (tester) async {
  // Build the widget
  await tester.pumpWidget(const TodoList());

  // Enter 'hi' into the TextField.
  await tester.enterText(find.byType(TextField), 'hi');
});

在 TextField 中输入文本后，确保点击 FloatingActionButton 可以将项目添加到列表中。

这涉及三个步骤：

使用 tap() 方法点击添加按钮。
在 state 更改后使用 pump() 方法重建小部件。
确保列表项出现在屏幕上。

darttestWidgets('Add and remove a todo', (tester) async {
  // Enter text code...

  // Tap the add button.
  await tester.tap(find.byType(FloatingActionButton));

  // Rebuild the widget after the state has changed.
  await tester.pump();

  // Expect to find the item on screen.
  expect(find.text('hi'), findsOneWidget);
});

最后，确保执行滑动以删除待办事项的操作可以将其从列表中移除。这涉及三个步骤：

使用 drag() 方法执行滑动以删除操作。
使用 pumpAndSettle() 方法持续重建小部件树，直到删除动画完成。
确保该项目不再出现在屏幕上。

darttestWidgets('Add and remove a todo', (tester) async {
  // Enter text and add the item...

  // Swipe the item to dismiss it.
  await tester.drag(find.byType(Dismissible), const Offset(500, 0));

  // Build the widget until the dismiss animation ends.
  await tester.pumpAndSettle();

  // Ensure that the item is no longer on screen.
  expect(find.text('hi'), findsNothing);
});

dartimport 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  testWidgets('Add and remove a todo', (tester) async {
    // Build the widget.
    await tester.pumpWidget(const TodoList());

    // Enter 'hi' into the TextField.
    await tester.enterText(find.byType(TextField), 'hi');

    // Tap the add button.
    await tester.tap(find.byType(FloatingActionButton));

    // Rebuild the widget with the new item.
    await tester.pump();

    // Expect to find the item on screen.
    expect(find.text('hi'), findsOneWidget);

    // Swipe the item to dismiss it.
    await tester.drag(find.byType(Dismissible), const Offset(500, 0));

    // Build the widget until the dismiss animation ends.
    await tester.pumpAndSettle();

    // Ensure that the item is no longer on screen.
    expect(find.text('hi'), findsNothing);
  });
}

class TodoList extends StatefulWidget {
  const TodoList({super.key});

  @override
  State<TodoList> createState() => _TodoListState();
}

class _TodoListState extends State<TodoList> {
  static const _appTitle = 'Todo List';
  final todos = <String>[];
  final controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _appTitle,
      home: Scaffold(
        appBar: AppBar(title: const Text(_appTitle)),
        body: Column(
          children: [
            TextField(controller: controller),
            Expanded(
              child: ListView.builder(
                itemCount: todos.length,
                itemBuilder: (context, index) {
                  final todo = todos[index];

                  return Dismissible(
                    key: Key('$todo$index'),
                    onDismissed: (direction) => todos.removeAt(index),
                    background: Container(color: Colors.red),
                    child: ListTile(title: Text(todo)),
                  );
                },
              ),
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              todos.add(controller.text);
              controller.clear();
            });
          },
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

此页面内容有帮助吗？

感谢你的反馈！

提供详情

感谢你的反馈！请告诉我们如何改进。

提供详情

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面最后更新于 2025-02-12。查看源代码或报告问题。

点击、拖动和输入文本

1. 创建一个要测试的小部件

2. 在文本字段中输入文本

3. 确保点击按钮可以添加待办事项

4. 确保滑动以删除可以移除待办事项

完整示例