Question

我想向我的CupertinoTextField添加一些文本验证，但是此小部件没有验证器。我该怎么解决？

我尝试在Internet上搜索一些解决方案，但没有结果。

CupertinoTextField(
        prefix: Padding(
          padding: EdgeInsets.all(8.0),
          child: Icon(
            customIcon,
          ),
        ),
        style: TextStyle(
          fontSize: 30,
        ),
        keyboardType: TextInputType.number,
        maxLength: maxLength,
        maxLines: 1,
        maxLengthEnforced: true,
        placeholder: placeholderText,
        onChanged: onChangedFunction,
        decoration: BoxDecoration(
          border: Border.all(
            width: 2.0,
            color: CupertinoColors.inactiveGray,
          ),
          borderRadius: BorderRadius.circular(32.0),
        ),
)

Answer 1

您需要使用TextEditingController并手动执行验证。

用于验证该字段是否为空的基本验证。

代码：

TextEditingController _myPhoneField = TextEditingController();

  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_myPhoneField.text.isEmpty) {
            showCupertinoDialog(
                context: context,
                builder: (context) {
                  return CupertinoAlertDialog(
                    title: Text('error'),
                    content: Text('Phone Field is Empty'),
                    actions: <Widget>[
                      FlatButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          child: Text('ok'))
                    ],
                  );
                });
          } else {
            // Validation passed
          }
        },
        child: Text('submit'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          CupertinoTextField(
            clearButtonMode: OverlayVisibilityMode.editing,
            controller: _myPhoneField,  // Add this
            prefix: Padding(
              padding: EdgeInsets.all(8.0),
              child: Icon(
                CupertinoIcons.phone_solid,
              ),
            ),
            style: TextStyle(
              fontSize: 30,
            ),
            keyboardType: TextInputType.number,
            maxLength: 10,
            maxLines: 1,
            maxLengthEnforced: true,
            placeholder: 'Enter Phone',
            onChanged: (v) {
              print(v);
            },
            decoration: BoxDecoration(
              border: Border.all(
                width: 2.0,
                color: CupertinoColors.inactiveGray,
              ),
              borderRadius: BorderRadius.circular(32.0),
            ),
          ),
        ],
      ),
    );
  }

CupertinoTextField中的Flutter文本验证

1 个答案: