自定义TextFormField中的TextInputType在flutter中不工作

7kjnsjlb  于 2023-11-21  发布在  Flutter
关注(0)|答案(1)|浏览(154)

我喜欢创建一个自定义的TextFormField小部件如下:

class CustomTextFormField extends StatelessWidget {
  final double height;
  final TextEditingController controller;
  final TextAlign? textAlign;
  final TextStyle? style;
  final TextInputType? keyboardType;
  const CustomTextFormField({
    super.key,
    required this.height,
    required this.controller,
    required this.validatorStatus,
    this.textAlign,
    this.style,
    this.keyboardType,
  });

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller,
      validator: !validatorStatus
          ? null
          : (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
      decoration: const InputDecoration(
        contentPadding: EdgeInsets.all(0),
        constraints:
            BoxConstraints(maxHeight: 40, maxWidth: 200, minWidth: 100),
        border: OutlineInputBorder(
          borderSide: BorderSide(
            width: 1,
          ),
          borderRadius: BorderRadius.all(
            Radius.circular(10),
          ),
        ),
      ),
      textAlign: TextAlign.center,
      style: const TextStyle(
        fontSize: 14,
      ),
      // keyboardType: TextInputType.number,
    );
  }
}

字符串
此自定义小部件用于以下小部件:

class Test extends StatefulWidget {
  const Test({super.key});

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {
  final _formKey = GlobalKey<FormState>();
  final TextEditingController _nameController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Wrap(
        children: [
          CustomTextFormField(
            height: 50,
            controller: _nameController,
            validatorStatus: true,
            textAlign: TextAlign.center,
            keyboardType: TextInputType.number
          ),
          Row(
            children: [
              ElevatedButton.icon(
                icon: const Icon(Icons.add, color: Colors.white),
                label: const Text(
                  'Add',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(
                    Colors.green[900],
                  ),
                ),
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text('Processing Data')),
                    );
                  }
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}


如果自定义小部件中包含keyboardType,则在单击Test小部件的CustomTextFormField时,会为TextInputType.number显示数字键盘。但是,如果直接在Test小部件中使用keyboardType属性,则不会显示数字键盘,而是显示文本键盘。
您的建议将不胜感激。

xcitsw88

xcitsw881#

CustomTextFormField中,您没有在TextFormField中使用属性keyboardType

TextFormField(
  controller: controller,
  keyboardType: keyboardType
///your rest of the code
)

字符串

相关问题