一套代码,在iOS
手机上运行不存在键盘遮挡问题,在Android
手机上运行则存在。以下是解决键盘遮挡问题的示例代码:
import 'dart:io';
import 'package:flutter/material.dart';
class TestStf extends StatefulWidget {
const TestStf({super.key});
@override
State<TestStf> createState() => _TestStfState();
}
class _TestStfState extends State<TestStf> {
final ScrollController _scrollController = ScrollController();
//焦点1
final FocusNode _focusNode1 = FocusNode();
//焦点2
final FocusNode _focusNode2 = FocusNode();
@override
void initState() {
super.initState();
_scrollController.addListener(() {
//滚动的距离
print("滚动的距离:${_scrollController.offset}");
//可滚动的最大距离
print("可滚动的最大距离:${_scrollController.position.maxScrollExtent}");
});
//焦点1监听
_focusNode1.addListener(() {
_jumpTo();
});
//焦点2监听
_focusNode2.addListener(() {
_jumpTo();
});
}
_jumpTo() {
//不加延迟执行,代码执行jumpTo或animateTo代码会报错
Future.delayed(const Duration(seconds: 1), () {
if (Platform.isAndroid) {
double offset = _scrollController.position.maxScrollExtent;
//可以结合_scrollController.position.maxScrollExtent即可滚动的最大距离,计算想滚动到指定的位置
// _scrollController.jumpTo(offset);
_scrollController.animateTo(offset,
duration: const Duration(milliseconds: 200), curve: Curves.ease);
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter键盘遮挡问题的适配"),
),
body: ListView(
controller: _scrollController,
children: [
const SizedBox(
height: 100,
),
TextField(
focusNode: _focusNode1,
decoration: const InputDecoration(
border: UnderlineInputBorder(),
hintText: "请输入内容1",
),
),
const SizedBox(
height: 600,
),
TextField(
focusNode: _focusNode2,
decoration: const InputDecoration(
border: UnderlineInputBorder(),
hintText: "请输入内容2",
),
)
],
),
);
}
}
网友评论