[Flutter]SingleChildScrollView( reverse: true)で表示位置を一番上から表示させる
テキスト入力時にキーボードによってテキスト部分が隠れてしまうための対策をしたら、次は画面表示の初期値が一番下になってしまったのでその対策
return Scaffold(
body: SingleChildScrollView(
reverse: true,
child: Form(
...
reverse: trueの部分によって初期位置が下から始まってしまう。
ここで対策としてuseEffect内で一番上までスクロールする様にしている。
まずSingleChildScrollView内にcontrollerを加える
return Scaffold(
body: SingleChildScrollView(
controller: _scrollController,
reverse: true,
child: Form(
...
@override
Widget build(BuildContext context) {
final ScrollController _scrollController = ScrollController();
useEffect(() {
_scrollController.jumpTo(0.0);
return () {
_scrollController.dispose();
};
}, []);
これだと_scrollControllerがセットされる前に関数が実行されてエラー?
addPostFrameCallback()は中身がウィジェットのビルドが完了した時に、実行されるみたいです。
useEffect(() {
WidgetsBinding.instance.addPostFrameCallback((_) {
_scrollController.jumpTo(_scrollController.position.maxScrollExtent);
});
return () {
_scrollController.dispose();
};
}, []);
これで上手くいった。
この記事が気に入ったらサポートをしてみませんか?