英文:
how to scroll the screen with textfield gets focus when the keyboard open
问题
我有一个Flutter应用程序，并创建了一个表单屏幕来获取用户详细信息。在表单屏幕上，当用户点击文本字段并获得焦点时，键盘会打开，需要滚动文本字段，以便用户可以看到他正在输入的内容。
英文:
I have flutter app and created form screen to get user details. In the form screen when user tap the textfield and it gets focus then keyboard opens need to scroll the textfield user want to seen what he is typing.
答案1
得分: 5
要在文本字段获得焦点时滚动到它，您需要使用Scrollable.ensureVisible方法。以下是演示如何使用它的一些代码。希望这有所帮助！
class TextFieldVisibility extends StatefulWidget {
const TextFieldVisibility({Key? key}) : super(key: key);
@override
State<TextFieldVisibility> createState() => TextFieldVisibilityState();
}
class TextFieldVisibilityState extends State<TextFieldVisibility> {
final _key1 = GlobalKey<State<StatefulWidget>>();
final _key2 = GlobalKey<State<StatefulWidget>>();
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
Container(
color: Colors.orange,
height: 1000,
),
TextField(
key: _key1,
onTap: () {
ensureVisibleOnTextArea(textfieldKey: _key1);
},
),
TextField(
key: _key2,
onTap: () {
ensureVisibleOnTextArea(textfieldKey: _key2);
},
)
],
),
));
}
Future<void> ensureVisibleOnTextArea(
{required GlobalKey textfieldKey}) async {
final keyContext = textfieldKey.currentContext;
if (keyContext != null) {
await Future.delayed(const Duration(milliseconds: 500)).then(
(value) => Scrollable.ensureVisible(
keyContext,
duration: const Duration(milliseconds: 200),
curve: Curves.decelerate,
),
);
// 如果第一个不起作用，可以尝试以下可选部分
// await Future.delayed(const Duration(milliseconds: 500)).then(
// (value) => Scrollable.ensureVisible(
// keyContext,
// duration: const Duration(milliseconds: 200),
// curve: Curves.decelerate,
// ),
// );
}
}
}
祝好！
英文:
To scroll to the text field when it receives focus, you need to use the Scrollable.ensureVisible method. Here is some code to show you how to use it. I hope it helps!
Regards.
class TextFieldVisibility extends StatefulWidget {
const TextFieldVisibility({Key? key}) : super(key: key);
@override
State<TextFieldVisibility> createState() => TextFieldVisibilityState();
}
class TextFieldVisibilityState extends State<TextFieldVisibility> {
final _key1 = GlobalKey<State<StatefulWidget>>();
final _key2 = GlobalKey<State<StatefulWidget>>();
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
Container(
color: Colors.orange,
height: 1000,
),
TextField(
key: _key1,
onTap: () {
ensureVisibleOnTextArea(textfieldKey: _key1);
},
),
TextField(
key: _key2,
onTap: () {
ensureVisibleOnTextArea(textfieldKey: _key2);
},
)
],
),
));
}
Future<void> ensureVisibleOnTextArea(
{required GlobalKey textfieldKey}) async {
final keyContext = textfieldKey.currentContext;
if (keyContext != null) {
await Future.delayed(const Duration(milliseconds: 500)).then(
(value) => Scrollable.ensureVisible(
keyContext,
duration: const Duration(milliseconds: 200),
curve: Curves.decelerate,
),
);
// Optional if doesnt work with the first
// await Future.delayed(const Duration(milliseconds: 500)).then(
// (value) => Scrollable.ensureVisible(
// keyContext,
// duration: const Duration(milliseconds: 200),
// curve: Curves.decelerate,
// ),
// );
}
}
}
答案2
得分: 0
将您的列部件包装在SingleChildScrollView中。
示例:
Scaffold(
body: SingleChildScrollView(
child: Column(
children:[
TextField(),
TextField()
],
),
)
),
英文:
Wrap you Column Widget with SingleChildScrollView
Example:
Scaffold(
body: SingleChildScrollView(
child: Column(
children:[
TextField(),
TextField()
],
),
)
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论