Flutter 阻止键盘在对话框中点击时隐藏 TextField

Question

我有一个包含 TextField 的 Dialog，当我点击列表下方的字段之一时，键盘弹出，导致 Dialog 调整大小并点击TextField 不再可见。我希望将点击的 TextField 滚动进去查看。

到目前为止，我尝试了以下方法，但没有成功：

确保 android 清单未将应用声明为全屏（例如）。
将基架添加到对话框并更改 resizeToAvoidBottomInset 值。
使用 MediaQuery 在键盘可见时添加额外的底部填充。

演示该问题的应用示例：

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(
      home: Scaffold(
        body: Center(
          child: Builder(
            builder: (context) => TextButton(
              child: const Text("Open dialog"),
              onPressed: () {
                showDialog(context: context, builder: (_) => _dialog());
              },
            ),
          ),
        ),
      ),
    );
  }

  Widget _dialog() {
    return Dialog(
      child: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(height: 200, color: Colors.red),
            const TextField(decoration: InputDecoration(hintText: 'TF 1')),
            const TextField(decoration: InputDecoration(hintText: 'TF 2')),
            const TextField(decoration: InputDecoration(hintText: 'TF 3')),
            const TextField(decoration: InputDecoration(hintText: 'TF 4')),
            const TextField(decoration: InputDecoration(hintText: 'TF 5')),
            const TextField(decoration: InputDecoration(hintText: 'TF 6')),
            const TextField(decoration: InputDecoration(hintText: 'TF 7')),
            Container(height: 200, color: Colors.blue),
          ],
        ),
      ),
    );
  }
}

Answer 1

为此，您需要删除 SingleChildScrollView。此外，您可以尝试使用 isDense:true 使 TextFields 更苗条。如果它没有帮助，您可以将对话框创建为新屏幕。

Answer 2

看来我终于自己找到了解决办法。正如我在问题中提到的，我已经尝试将 Scaffold 添加到 Dialog 但没有成功，但是我将 Scaffold 放在中 Dialog。我现在尝试将 Dialog 放在 Scaffold 中，问题就解决了。一个副作用是 Dialog 不再可忽略，但这可以通过将 Scaffold 包装在 GestureDetector 中并手动忽略来解决。完整的工作代码现在是：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Builder(
            builder: (context) => TextButton(
              child: const Text("Open dialog"),
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) => _dialog(context),
                  barrierDismissible: true,
                );
              },
            ),
          ),
        ),
      ),
    );
  }

  Widget _dialog(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.of(context).pop();
      },
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Dialog(
          child: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(height: 200, color: Colors.red),
                const TextField(decoration: InputDecoration(hintText: 'TF 1')),
                const TextField(decoration: InputDecoration(hintText: 'TF 2')),
                const TextField(decoration: InputDecoration(hintText: 'TF 3')),
                const TextField(decoration: InputDecoration(hintText: 'TF 4')),
                const TextField(decoration: InputDecoration(hintText: 'TF 5')),
                const TextField(decoration: InputDecoration(hintText: 'TF 6')),
                const TextField(decoration: InputDecoration(hintText: 'TF 7')),
                Container(height: 200, color: Colors.blue),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Flutter 阻止键盘在对话框中点击时隐藏 TextField

Flutter prevent keyboard from hiding TextField on tap in Dialog

flutter

flutter-layout