如何在TextField中输入文本后显示小吃栏?

Question

我有一个文本字段。我需要一个零食条出现后，用户已经完成输入文字后300毫秒。Snackbar应该出现在屏幕中间。如何在用户停止在文本框中输入后300毫秒才出现小吃栏?我的代码:

final textController = TextEditingController();
....
child: TextField(
controller: textController,
onChanged: (value) {},
)

Answer 1

与其他答案类似，但会在用户停止输入后显示，而不是在用户提交TextField时显示:

Timer? t;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: TextField(
onChanged: (v) {
t?.cancel();
t = Timer(const Duration(milliseconds: 300), () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('im a snackbar'),
),
);
});
},
),
),
);
}

Answer 2

请检查以下代码，看看是否有帮助。

import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(const SnackBarDemo());
class SnackBarDemo extends StatelessWidget {
const SnackBarDemo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'SnackBar Demo',
home: Scaffold(
appBar: AppBar(
title: const Text('SnackBar Demo'),
),
body: const SnackBarPage(),
),
);
}
}
class SnackBarPage extends StatelessWidget {
const SnackBarPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Center(
child: TextField(
onEditingComplete: () {
final snackBar = SnackBar(
content: const Text('Yay! A SnackBar!'),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
// Some code to undo the change.
},
),
);
Timer(Duration(milliseconds: 300), () {
ScaffoldMessenger.of(context).showSnackBar(snackBar);
});
},
),
),
);
}
}