Question

当键盘打开时，我的屏幕上有一个 TextField，它显示溢出错误，并且由于此问题，键盘正在自动关闭。

我的代码

Scaffold(
      backgroundColor: Color(0xfff3f2f8),
      body: Form(
        key: formKey,
        child: Container(
          child: Column(
            children: <Widget>[
              SizedBox(
                height: Height * 0.175,
              ),
              Container(
                  width: MediaQuery.of(context).size.width * 0.7,
                  child: Image.asset('images/splash-logo.png')),
              SizedBox(
                height: Height * 0.025,
              ),
              Text(
                'Please enter your phone number',
                style: TextStyle(fontFamily: 'PoppinsMedium', fontSize: 18),
              ),
              Spacer(),
              SingleChildScrollView(
                child: ClipShadowPath(
                  shadow: Shadow(blurRadius: 10.0, color: Colors.grey),
                  clipper: RoundedDiagonalPathClipper(),
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(30.0)),
                      color: Colors.white,
                    ),
                    child: Column(
                      children: [
                        SizedBox(
                          height: Height * 0.125,
                        ),
                        Align(
                            alignment: Alignment.bottomLeft,
                            child: Padding(
                              padding: const EdgeInsets.only(left: 13),
                              child: Text(
                                'Phone Number',
                                style: TextStyle(
                                    fontFamily: 'PoppinsBold', fontSize: 20),
                              ),
                            )),
                        Align(
                          alignment: Alignment.center,
                          child: Container(
                            width: MediaQuery.of(context).size.width * 0.9,
                            child: InternationalPhoneNumberInput(
                              onInputChanged: (PhoneNumber number) {
                                setState(() {
                                  TypePhoneNumber = number.phoneNumber;
                                });
                              },
                              onInputValidated: (bool value) {
                                if (!value) {
                                  setState(() {
                                    numberValidate = false;
                                  });
                                }
                                if (value) {
                                  setState(() {
                                    numberValidate = true;
                                  });
                                }
                              },
                              selectorConfig: SelectorConfig(
                                selectorType:
                                    PhoneInputSelectorType.BOTTOM_SHEET,
                              ),
                              ignoreBlank: false,
                              autoValidateMode: AutovalidateMode.disabled,
                              selectorTextStyle: TextStyle(color: Colors.black),
                              initialValue: number,
                              textFieldController: controller,
                              formatInput: false,
                              keyboardType: TextInputType.numberWithOptions(
                                  signed: true, decimal: true),
                              onSaved: (PhoneNumber number) {
                                print('On Saved: $number');
                              },
                            ),
                          ),
                        ),
                        SizedBox(
                          height: Height * 0.06,
                        ),
                        Align(
                          alignment: Alignment.bottomLeft,
                          child: MaterialButton(
                            onPressed: () async {},
                            child: Padding(
                              padding: const EdgeInsets.only(bottom: 25),
                              child: Container(
                                height: Height * 0.07,
                                width: Width * 0.6,
                                decoration: BoxDecoration(
                                  color: Color(0xffef1334),
                                  borderRadius: BorderRadius.only(
                                      topLeft: Radius.circular(25),
                                      topRight: Radius.circular(25),
                                      bottomLeft: Radius.circular(25),
                                      bottomRight: Radius.circular(25)),
                                ),
                                child: Center(
                                    child: Text(
                                  'Register',
                                  style: TextStyle(
                                      fontSize: 15,
                                      fontWeight: FontWeight.bold,
                                      fontFamily: 'PoppinsRegular',
                                      color: Colors.white),
                                )),
                              ),
                            ),
                          ),
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Container(
                              width: 10,
                            ),
                            Image.asset(
                              'images/cutLogo.png',
                              width: 120,
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );

如果我用 SingleChildScrollView 将 Form 内的主 Column 包裹起来，我的整个显示就会消失。我也尝试在剪刀中添加 SingleChild 但它也不起作用

Answer 1

在 Scaffold 中使用 this 属性或使用可滚动小部件包装。例如：SingleChildScrollView()

Answer 2

我的项目中有类似的问题，请尝试：

return Scaffold(
      backgroundColor: Color(0xfff3f2f8),
      body: LayoutBuilder(
        builder: (context, constraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(minWidth: constraints.maxWidth, minHeight: constraints.maxHeight),
              child: Form(
                key: formKey,
                child: IntrinsicHeight(
                  child: Column(...

键盘打开时颤动屏幕溢出

2 个答案: