Как переместить содержимое вверх, когда отображается виртуальная клавиатура

#flutter

Вопрос:

Я создал простой проект, иллюстрирующий мою проблему.

 import 'package:flutter/material.dart';  void main() {  runApp(const MyApp()); }  class MyApp extends StatelessWidget {  const MyApp({Key? key}) : super(key: key);  @override  Widget build(BuildContext context) {  return MaterialApp(  title: 'Flutter Demo',  theme: ThemeData(  primarySwatch: Colors.blue,  ),  home: const MyHomePage(),  );  } }  class MyHomePage extends StatelessWidget {  const MyHomePage({Key? key}) : super(key: key);   // method call to show the modal  showModal(BuildContext context) {  showDialog(  context: context,  builder: (BuildContext context) {  // This will call the class Modal  return const MyModal();  },  );  }   @override  Widget build(BuildContext context) {  return Scaffold(  body: Center(  child: ElevatedButton(  onPressed: () =gt; showModal(context),  child: const Text('Click To Show Modal'),  ),  ),  );  } }  class MyModal extends StatelessWidget {  const MyModal({Key? key}) : super(key: key);   @override  Widget build(BuildContext context) {  // This get the screen height and width  final size = MediaQuery.of(context).size;  return Dialog(  child: Scaffold(  body: SizedBox(  height: size.height,  width: size.width,  child: Column(  children: const [  // This sizebox will simulate the space the header takes  SizedBox(  height: 400,  ),  TextField(  obscureText: true,  decoration: InputDecoration(  border: OutlineInputBorder(),  labelText: 'Password',  ),  )  ],  ),  ),  ),  );  } }  

Ответ №1:

В MyModal , вы можете попробовать обернуть SizedBox внутри SingleChildScrollView .

 class MyModal extends StatelessWidget {  const MyModal({Key? key}) : super(key: key);   @override  Widget build(BuildContext context) {  // This get the screen height and width  final size = MediaQuery.of(context).size;  return Dialog(  child: Scaffold(  body: SingleChildScrollView( // lt;lt;lt;lt;lt; HERE  child: SizedBox(  height: size.height,  width: size.width,  child: Column(  children: const [  // This sizebox will simulate the space the header takes  SizedBox(  height: 400,  ),  TextField(  obscureText: true,  decoration: InputDecoration(  border: OutlineInputBorder(),  labelText: 'Password',  ),  )  ],  ),  ),  ),  ),  );  } }  

Комментарии:

1. спасибо @rickimaru, но как заставить контент автоматически перемещаться вверх при keyboard появлении?

2. @Canada2000 Он должен автоматически прокручиваться вверх при появлении клавиатуры. Вы протестировали фрагмент кода?

3. Это не работает для меня. Клавиатура находится над вводом текста

4. @Millenial2020 Правда? Странно, с моей стороны это автоматически прокручивается. Вы что-нибудь изменили в коде?