时间戳

首页 > 解决方案 > 文本选择索引被限制（-1->0）以保持在边界内。这可能不是您的错，因为某些键盘可能会选择超出范围

flutter - 文本选择索引被限制（-1->0）以保持在边界内。这可能不是您的错，因为某些键盘可能会选择超出范围

问题描述

我有带有 pininput 文本字段的锁屏。我的要求是，只有在输入 4 位数字时才应启用 Ok 按钮，否则应禁用该按钮。我使用了文本字段的 onchanged 属性，但出现上述错误。我使用的代码与此共享...

PinInputTextField(
                      pinLength: 4,
                      inputFormatter: [
                        WhitelistingTextInputFormatter.digitsOnly
                      ],
                      //decoration: BoxTightDecoration(),
                      controller: lockScreenController,
                      textInputAction: TextInputAction.next,
                      keyboardType: TextInputType.number,
                      enableInteractiveSelection: false,
                      onChanged: (pin) {
                        if (pin.length == 4) {
                          setState(() {
                            this.isButtonEnabled = true;
                          });
                        } else {
                          setState(() {
                            this.isButtonEnabled = false;
                          });
                        }
                      },
                    ),
                  ),
                  SizedBox(
                    width: width * 0.15,
                    height: height * 0.13,
                    child: RaisedButton(
                      //ok button
                      color: Color(0xfff6dd34),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20)),
                      onPressed: !isButtonEnabled
                          ? null
                          : () {
                              //save 4 digit pin
                            },
                      child: Text("ok",
                          style: TextStyle(
                              fontSize: width * 0.028,
                              color: Colors.black,
                              fontWeight: FontWeight.bold,
                              fontFamily: 'Montserrat')),
                    ),
                  ),

完整代码如下


class ResetLockScreenPassword extends StatefulWidget {
  @override
  _ResetLockScreenPasswordState createState() =>
      _ResetLockScreenPasswordState();
}

class _ResetLockScreenPasswordState extends State<ResetLockScreenPassword> {
  final _resetLockScreenPassword = GlobalKey<FormState>();
  bool isButtonEnabled = false;
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width * 0.75;
    final height = MediaQuery.of(context).size.height * 0.53;

    return Dialog(
      elevation: 0,
      backgroundColor: Colors.transparent,
      child: _buildChild(context, width, height),
    );
  }

 

  _buildChild(BuildContext context, width, height) {
    final TextEditingController lockScreenController = TextEditingController();
    return Form(
      key: _resetLockScreenPassword,
      child: Container(
        width: width,
        height: height,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(16)),
        ),
        child: Stack(children: <Widget>[
          Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Text('Set Lock Screen Password ',
                      style: TextStyle(
                          fontSize: height * 0.1,
                          color: Color(0xfff6dd34),
                          fontWeight: FontWeight.bold,
                          fontFamily: 'Montserrat')),
                  SizedBox(
                    width: width * 0.5,
                    child: PinInputTextField(
                      pinLength: 4,
                      inputFormatter: [
                        WhitelistingTextInputFormatter.digitsOnly
                      ],
                      //decoration: BoxTightDecoration(),
                      controller: lockScreenController,
                      textInputAction: TextInputAction.next,
                      keyboardType: TextInputType.number,
                      enableInteractiveSelection: false,
                      onChanged: (pin) {
                        if (pin.length == 4) {
                          setState(() {
                            this.isButtonEnabled = true;
                          });
                        } else {
                          setState(() {
                            this.isButtonEnabled = false;
                          });
                        }
                      },
                    ),
                  ),
                  SizedBox(
                    width: width * 0.15,
                    height: height * 0.13,
                    child: RaisedButton(
                      //ok button
                      color: Color(0xfff6dd34),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20)),
                      onPressed: !isButtonEnabled
                          ? null
                          : () {
                              //save 4 digit pin
                            },
                      child: Text("ok",
                          style: TextStyle(
                              fontSize: width * 0.028,
                              color: Colors.black,
                              fontWeight: FontWeight.bold,
                              fontFamily: 'Montserrat')),
                    ),
                  ),
                ]),
          ),
          Positioned(
            //cross button
            right: 10,
            top: 10,
            child: Container(
              child: GestureDetector(
                onTap: () {
                  Navigator.of(context).pop();
                },
                child:
                    Icon(Icons.close, color: Colors.black, size: width * 0.04),
              ),
            ),
          )
        ]),
      ),
    );
  }
}

标签： flutter

解决方案

如果您使用的是pin_input_text_field，那么您可能需要pin在您的onChanged()方法中考虑。由于pin只是字符串，我们可以使用它的长度，并执行您的操作。

onChanged: (String pin){
  if(pin.length == 4){
    setState(() => this.isButtonEnabled = true);
  }else{
    setState(() => this.isButtonEnabled = false);
  }
}

看看这个，让我知道这是否适合你:)

推荐阅读