ios - iOS 中 Flutter TextFormField 随机跳转到上一个字段

Question

这是其不良行为的 GIF 链接

我在此页面的表单中有 2 个 TextFormField（用户名和 PIN）。但在 iOS 中，当我在填写用户名字段后按 PIN 字段时，它会立即跳回用户名字段。

另一件要记住的事情，我一开始在整个背景中有一个 GestureDetector，它的功能是当用户在字段和按钮之外点击时隐藏键盘。所以我尝试将 GestureDetector 分离到 Form 的上方和下方，因为我认为 GestureDetector 重叠是原因。显然，它不能解决任何问题。

body: SingleChildScrollView(
          child: Form(
            key: _formKey,
            child: Padding(
              padding: EdgeInsets.all(15),
              child: AutofillGroup(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    GestureDetector(
                      onTap: () => unfocus(context),
                      child: Container(
                        color: Theme.of(context).scaffoldBackgroundColor,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              'Login',
                              style: Theme.of(context).textTheme.subtitle1.copyWith(
                                fontSize: 20,
                              ),
                            ),
                            SizedBox(height: 10),
                            Text(
                              args.fromPurchase ? 'Please enter your NIK and PIN to purchase' : 'Please enter your NIK and PIN',
                              style: Theme.of(context).textTheme.bodyText2.copyWith(
                                fontSize: 15,
                              ),
                            ),
                            SizedBox(height: _showNotice ? 30 : 15),
                            Container(
                              height: _showNotice ? null : 0,
                              padding: EdgeInsets.all(5),
                              decoration: BoxDecoration(
                                color: _noticeError ? aLightRed : aLightGreen,
                                borderRadius: BorderRadius.circular(15)
                              ),
                              child: Row(
                                children: [
                                  IconButton(
                                    splashRadius: 5,
                                    padding: EdgeInsets.all(0),
                                    icon: Icon(
                                      Icons.cancel,
                                      size: _showNotice ? 20 : 0,
                                      color: _noticeError ? aRed : aGreen,
                                    ),
                                    onPressed: () => _onClose(),
                                  ),
                                  Expanded(
                                    child: Text(
                                      _noticeError ? _errorText.capitalizeFirstofEach : 'We have sent a new PIN to your email.',
                                      maxLines: 2,
                                      style: Theme.of(context).textTheme.bodyText1.copyWith(
                                        fontSize: 15,
                                        color: _noticeError ? aRed : aGreen,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            SizedBox(height: _showNotice ? 20 : 15),
                            Text(
                              'NIK',
                              style: Theme.of(context).textTheme.bodyText1.copyWith(
                                fontSize: 15,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    SizedBox(height: 10),
                    TextFormField(
                      keyboardType: TextInputType.number,
                      controller: _userNikController,
                      maxLength: 16,
                      autofillHints: [AutofillHints.username],
                      onChanged: (_) => setState((){}),
                      inputFormatters: [
                        FilteringTextInputFormatter.allow(RegExp("[0-9]")),
                      ],
                      style: Theme.of(context).textTheme.bodyText1,
                      decoration: InputDecoration(
                        counterText: '',
                        contentPadding: EdgeInsets.all(15),
                        fillColor: Colors.grey[50],
                        filled: true,
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: BorderSide(color: aBorderColor.withAlpha(75)),
                        ),
                        hintText: 'Please enter your NIK',
                        hintStyle: Theme.of(context).textTheme.bodyText2.copyWith(
                          fontSize: 15,
                          color: aLightTextColor.withAlpha(175),
                        ),
                      ),
                    ),
                    SizedBox(height: 20),
                    Text(
                      'PIN',
                      style: Theme.of(context).textTheme.bodyText1.copyWith(
                        fontSize: 15,
                      ),
                    ),
                    SizedBox(height: 10),
                    TextFormField(
                      keyboardType: TextInputType.number,
                      controller: _userPinController,
                      obscureText: !_pinVisible,
                      obscuringCharacter: '*',
                      maxLength: 6,
                      autofillHints: [AutofillHints.password],
                      onChanged: (_) => setState((){}),
                      inputFormatters: [
                        FilteringTextInputFormatter.allow(RegExp("[0-9]")),
                      ],
                      style: Theme.of(context).textTheme.bodyText1,
                      decoration: InputDecoration(
                        counterText: '',
                        contentPadding: EdgeInsets.all(15),
                        fillColor: Colors.grey[50],
                        filled: true,
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: BorderSide(color: aBorderColor.withAlpha(75)),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: BorderSide(color: aBorderColor.withAlpha(75)),
                        ),
                        hintText: 'Please enter your PIN',
                        hintStyle: Theme.of(context).textTheme.bodyText2.copyWith(
                          fontSize: 15,
                          color: aLightTextColor.withAlpha(175),
                        ),
                        suffixIcon: IconButton(
                          splashRadius: 5,
                          icon: Icon(
                            _pinVisible ? Icons.visibility : Icons.visibility_off,
                            color: _pinVisible ? aDarkTextColor : aBorderColor,
                          ),
                          onPressed: () => setState(() => _pinVisible = !_pinVisible),
                        ),
                      ),
                    ),
                    SizedBox(height: 20),
                    Parent(
                      gesture: Gestures()
                        ..onTap(() => _onLogin(args.fromPurchase)),
                      style: ParentStyle()
                        ..opacity((_userNikController.text != '' && _userPinController.text != '') ? 1 : 0.6)
                        ..width(double.infinity)
                        ..height(45)
                        ..borderRadius(all: 10)
                        ..padding(horizontal: 15)
                        ..animate(400, Curves.easeOut)
                        ..background.color(Theme.of(context).primaryColor),
                      child: Center(
                        child: Center(
                          child: Text(
                            args.fromPurchase ? 'Purchase Order' : 'Login',
                            style: Theme.of(context).textTheme.button.copyWith(
                              fontWeight: FontWeight.w500,
                              fontSize: 15,
                            ),
                          ),
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () => unfocus(context),
                      child: Container(
                        width: double.infinity,
                        height: 200,
                        color: Theme.of(context).scaffoldBackgroundColor,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),

先感谢您。

标签： iosfluttermobile