我喜欢创建一个自定义的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属性,则不会显示数字键盘,而是显示文本键盘。
您的建议将不胜感激。
1条答案
按热度按时间xcitsw881#
在
CustomTextFormField
中,您没有在TextFormField
中使用属性keyboardType
字符串