Flutter Windows：如果将 TextField 放在 AlertDialog 中，则它不允许空间

Posted 2023-02-23

【中文标题】Flutter Windows：如果将 TextField 放在 AlertDialog 中，则它不允许空间

【英文标题】：Flutter Windows : TextField does not allow space if it is placed inside AlertDialog

【发布时间】：2021-06-13 22:32:59

【问题描述】：

一个小时前，当我将 TextField 放在 AlertDialog 中时，我发现了一个奇怪的行为，它不允许输入空间，否则它的行为正常这是我的代码：

//=================Flutter Doctor -v [√] Flutter (Channel stable, 2.0.2, on Microsoft Windows [Version 10.0.18363.1316], locale en-US) • Flutter 2.0.2 版，位于 C:\Flutter\flutter-latest • 框架修订版 8962f6dc68（5 天前），2021-03-11 13:22:20 -0800 • 引擎修订版 5d8bf811b3 • Dart 版本 2.12.1

[√] android 工具链 - 为 Android 设备开发（Android SDK 版本 29.0.3） • Android SDK 位于 C:\Users\user\AppData\Local\Android\sdk • 平台 android-30，构建工具 29.0.3 • Java 二进制文件位于：C:\Program Files\Android\Android Studio\jre\bin\java • Java 版本 OpenJDK 运行时环境（内部版本 1.8.0_202-release-1483-b03） • 接受所有 Android 许可证。

[√] Chrome - 为网络开发 • C:\Users\user\AppData\Local\Google\Chrome\Application\chrome.exe 中的 Chrome

[√] Visual Studio - 为 Windows 开发（Visual Studio Community 2019 16.9.0） • C:\Program Files (x86)\Microsoft Visual Studio\2019\Community 中的 Visual Studio • Visual Studio Community 2019 版本 16.9.31025.194 • Windows 10 SDK 版本 10.0.19041.0

[√] Android Studio（3.5版） • C:\Program Files\Android\Android Studio 中的 Android Studio • Flutter 插件版本 42.1.1 • Dart 插件版本 191.8593 • Java 版 OpenJDK 运行时环境（内部版本 1.8.0_202-release-1483-b03）

[√] IntelliJ IDEA 社区版（2020.2 版） • IntelliJ 位于 C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2020.2.1 • Flutter 插件可以从以下位置安装： https://plugins.jetbrains.com/plugin/9212-flutter • Dart 插件可以从以下位置安装： https://plugins.jetbrains.com/plugin/6351-dart

[√] VS 代码（版本 1.54.3） • C:\Users\user\AppData\Local\Programs\Microsoft VS 代码中的 VS 代码 • Flutter 扩展版本 3.20.0

[√] 已连接设备（3 个可用） • Windows（桌面） • windows • windows-x64 • Microsoft Windows [版本 10.0.18363.1316] • Chrome（网络） • chrome • web-javascript • Google Chrome 89.0.4389.82 • Edge（网络） • edge • web-javascript • Microsoft Edge 89.0.774.54

• 未发现任何问题！

//======AppTextField widget


import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class AppTextField extends StatefulWidget 
  final String caption;
  final dynamic initialValue;
  final dynamic Function(String) onSubmitted;
  final bool readOnly;
  const AppTextField(
      Key key,
      this.caption,
      this.onSubmitted,
      this.initialValue,
      this.readOnly = false)
      : super(key: key);

  @override
  _AppTextFieldState createState() => _AppTextFieldState();


class _AppTextFieldState extends State<AppTextField> 
  TextEditingController _textEditingController;

  TextStyle _captionStyle = TextStyle(fontSize: 17);
  TextStyle _textStyle = TextStyle(fontSize: 17);

  String get value => _textEditingController.text;

  @override
  void initState() 
    super.initState();

    this._textEditingController = TextEditingController();
    this._textEditingController.text = this.widget.initialValue != null
        ? this.widget.initialValue.toString()
        : "";
  

  @override
  Widget build(BuildContext context) 
    return TextField(
      textInputAction: TextInputAction.none,
      readOnly: this.widget.readOnly,
      enableInteractiveSelection: true,
      cursorHeight: 30,
      onEditingComplete: () 
        int u = 9;
      ,
      onChanged: (v) 
        // if (this.widget.onSubmitted != null) 
        //   var val = this.widget.onSubmitted(v);
        //   if (val != null) this._textEditingController.text = val.toString();
        // 
      ,
      style: _textStyle,
      controller: _textEditingController,
      decoration: InputDecoration(
          isDense: true,
          contentPadding: EdgeInsets.all(15.0),
          labelText: this.widget.caption,
          floatingLabelBehavior: FloatingLabelBehavior.always,
          border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10),
              borderSide: BorderSide(color: Colors.green, width: 1.0))),
    );
  

  @override
  void dispose() 
    this._textEditingController.dispose();
    super.dispose();
  



//======the I use AppTextField widget inside AlertDialog like this :

import 'package:animate_do/animate_do.dart';
import 'package:flutter/material.dart';
import 'package:flutter_desktop/Views/App-Widgets/AppTextField.dart';
import 'package:flutter_desktop/Views/Room/Notification-Dialog.dart';
import 'package:flutter_desktop/Views/states/Message-State.dart';
import 'package:provider/provider.dart';

import 'Chat/ChatMessage.dart';

class SendNotificationDialog extends StatefulWidget 
  @override
  _SendNotificationDialogState createState() => _SendNotificationDialogState();


class _SendNotificationDialogState extends State<SendNotificationDialog> 
  String _message = "";
  @override
  Widget build(BuildContext context) 
    return AlertDialog(
      elevation: 10,
      titleTextStyle: TextStyle(
          fontSize: 20, fontWeight: FontWeight.bold, color: Colors.black),
      title: Text("رسالة تنبيه"),
      content: Builder(
        builder: (context) => _createBody(context),
      ),
      actions: [
        MaterialButton(
          onPressed: () 
            Navigator.pop(context);

            var messageState =
                Provider.of<MessageState>(context, listen: false);

            messageState.addMessage(_message, MessageType.NOTIFICATION);

            Navigator.push(
                context,
                PageRouteBuilder(
                    barrierDismissible: true,
                    opaque: false,
                    pageBuilder: (_, __, ___) => NotificationDialog(
                          userName: "Yousel : ",
                          notification: _message,
                        )));
          ,
          child: Text("موافق"),
        ),
        MaterialButton(
          onPressed: () 
            Navigator.pop(context);
          ,
          child: Text("إلغاء"),
        ),
      ],
    );
  

  _createBody(BuildContext context) 
    return Container(
      width: 500,
      height: 100,
      child: ListTile(
        autofocus: true,
        title: AppTextField(
          initialValue: _message,
          onSubmitted: (v) 
            _message = v;
            return _message;
          ,
          caption: "أدخل النص الذى سوف يشاهده الجميع",
        ),
      ),
    );
  



//=======Then I push SendNotificationDialog page :

 Navigator.push(
        context,
        PageRouteBuilder(
            barrierDismissible: true,
            opaque: false,
            transitionDuration: Duration(milliseconds: 500),
            transitionsBuilder:
                (context, firstAnimation, secondAnimation, child) 
              firstAnimation = CurvedAnimation(
                  parent: firstAnimation, curve: Curves.fastLinearToSlowEaseIn);

              return ScaleTransition(
                scale: firstAnimation,
                child: child,
              );
            ,
            pageBuilder: (_, __, ___) 
              return SendNotificationDialog();
            ));

【参考方案1】：

问题解决了，当我将TextField包装在ListTile小部件中时出现问题，它与AlertDialog包装无关，我在删除ListTile时测试它表现正常，否则我拒绝空格字符，谢谢朋友。

【讨论】：

你是对的，当文本字段被包裹在listtile中时，空格是不允许的