Flutter防止鍵盤在Dialog中點擊隱藏TextField

我有一個Dialog包含TextFields，當我點擊串列下方的欄位之一時，鍵盤會彈出，導致Dialog調整大小并且點擊TextField的不再可見。我希望點擊TextField滾動查看。

到目前為止，我已經嘗試了以下但沒有運氣：

• 確保 android manifest 沒有將應用宣告為全屏（例如https://stackoverflow.com/a/62131025/2086746）。
• 將 Scaffold 添加到 Dialog 并更改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),
          ],
        ),
      ),
    );
  }
}

uj5u.com熱心網友回復：

看來我終于自己找到了解決方案。正如我在我的問題提到我已經嘗試添加Scaffold到Dialog沒有成功，但是我將在Scaffold 里面的Dialog。我現在嘗試將其Dialog放在里面Scaffold，問題解決了。一個副作用Dialog是 不再可消除，但這可以通過將 包裹Scaffold在 a 中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),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

uj5u.com熱心網友回復：

為此，您需要洗掉SingleChildScrollView. 此外，您可以嘗試TextField使用isDense:true. 如果它沒有幫助，您可以將對話框創建為新螢屏。

標籤：扑 颤振布局

上一篇：在Flutter中的文本欄位小部件上傳遞資料和接收

下一篇：每次添加新的TextBlock時如何生成新的TextEditingController