我正在尝试在数字类型输入中添加
done
按钮,以在颤动中添加 TextFormField
,但我无法做到这一点。
TextFormField(
key: Key(keyValue),
initialValue: valueBuilder,
onSaved: (text) {
fieldsController.text = text.trim();
},
inputFormatters: [inputFormatters],
keyboardType: TextInputType.phoneNumber,)
我想创建一个如下所示的键盘。用于输入文本表单字段。
改变
keyboardType: TextInputType.number
到
keyboardType: TextInputType.numberWithOptions(signed: true, decimal: true)
您不需要
done
按钮,只需用 MaterialApp
包裹
GestureDetector
GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
FocusScopeNode currentFocus = FocusScope.of(context);
if (!currentFocus.hasPrimaryFocus &&
currentFocus.focusedChild != null) {
FocusManager.instance.primaryFocus.unfocus();
}
},
child: MaterialApp(
title: "My title",
home:MyHomeScreen(),
),
);
我刚刚创建了一个包,用于向当前键盘添加基本操作。
你可以看这里:
https://pub.dartlang.org/packages/keyboard_actions
用途:
import 'package:flutter/material.dart';
import 'package:keyboard_actions/keyboard_actions.dart';
//...
FocusNode _nodeText1 = FocusNode();
FocusNode _nodeText2 = FocusNode();
FocusNode _nodeText3 = FocusNode();
FocusNode _nodeText4 = FocusNode();
FocusNode _nodeText5 = FocusNode();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Keyboard Actions Sample"),
),
body: FormKeyboardActions(
keyboardActionsPlatform: KeyboardActionsPlatform.ALL, //optional
keyboardBarColor: Colors.grey[200], //optional
nextFocus: true, //optional
actions: [
KeyboardAction(
focusNode: _nodeText1,
),
KeyboardAction(
focusNode: _nodeText2,
closeWidget: IconButton(
icon: Icon(Icons.close),
onPressed: () {},
),
),
KeyboardAction(
focusNode: _nodeText3,
onTapAction: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
content: Text("Custom Action"),
actions: <Widget>[
FlatButton(
child: Text("OK"),
onPressed: () => Navigator.of(context).pop(),
)
],
);
});
},
),
KeyboardAction(
focusNode: _nodeText4,
displayCloseWidget: false,
),
KeyboardAction(
focusNode: _nodeText5,
closeWidget: Padding(
padding: EdgeInsets.all(5.0),
child: Text("CLOSE"),
),
),
],
child: Padding(
padding: const EdgeInsets.all(15.0),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TextField(
keyboardType: TextInputType.number,
focusNode: _nodeText1,
decoration: InputDecoration(
hintText: "Input Number",
),
),
TextField(
keyboardType: TextInputType.text,
focusNode: _nodeText2,
decoration: InputDecoration(
hintText: "Input Text with Custom Close Widget",
),
),
TextField(
keyboardType: TextInputType.number,
focusNode: _nodeText3,
decoration: InputDecoration(
hintText: "Input Number with Custom Action",
),
),
TextField(
keyboardType: TextInputType.text,
focusNode: _nodeText4,
decoration: InputDecoration(
hintText: "Input Text without Close Widget",
),
),
TextField(
keyboardType: TextInputType.number,
focusNode: _nodeText5,
decoration: InputDecoration(
hintText: "Input Number with Custom Close Widget",
),
),
],
),
),
),
),
);
}
将其添加到您的文本字段
TextField(
...
keyboardType: TextInputType.numberWithOptions(signed: true),
inputFormatters: [
FilteringTextInputFormatter.digitsOnly,
],
...
),
这是在键盘打开时将 Done 按钮添加到
TextFormField
的方法:
textInputAction: TextInputAction.done,
请记住,iOS 不支持 NUMERIC
键盘上的
Done。
我在IOS中用这种方式处理完成按钮
keyboardType: Platform.isIOS?
TextInputType.numberWithOptions(signed: true, decimal: true)
: TextInputType.number,
// This regex for only amount (price). you can create your own regex based on your requirement
inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d{0,4}'))],
ios 键盘上没有完成按钮。解决方案是使用“keyboard_actions”插件,否则添加键盘顶部布局检查此
https://blog.usejournal.com/keyboard-done-button-ux-in-flutter-ios-app-3b29ad46bacc
isVisible = MediaQuery.of(context).viewInsets.bottom != 0;
Stack( children: [ ... Your widget ... if (isVisible) Align( alignment: Alignment.bottomCenter, child: Padding( padding: EdgeInsets.zero, child: Container( color: Colors.white70, height: 40, child: GestureDetector( onTap: () { FocusScope.of(context).requestFocus(FocusNode()); }, child: const Padding( padding: EdgeInsets.fromLTRB(10, 4, 10, 4), child: Row( mainAxisAlignment: MainAxisAlignment.end, children: [ Text( 'Xong', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 15, color: Colors.blue ), ) ], ), ), ), ) ) ) ], )
我使用签名选项来显示完成按钮。然后我使用带有正则表达式的 TextInputFormatter 来限制用户可以输入的内容。
new TextFormField(
controller: myController,
keyboardType: TextInputType.numberWithOptions(signed:true, decimal: true),
textInputAction: TextInputAction.done,
onFieldSubmitted: (term) {
_showSnackBar(context, double.parse(myController.text));
},
onEditingComplete: () {
_showSnackBar(context, double.parse(myController.text));
},
decoration: const InputDecoration(
helperText: "Actual",
hintText: "Units used",
border: UnderlineInputBorder(),
icon: Icon(Icons.keyboard),
),
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d*$')),
],
),
您必须在 TextField Widget 上添加此行。
keyboardType: TextInputType.numberWithOptions(
decimal: true,
signed: true,
),
您可以在 Scaffold 的底部工作表上添加完成按钮。
import 'package:flutter/material.dart';
class MyPage extends StatefulWidget {
const MyPage({super.key});
@override
State<MyPage> createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
bottomSheet: MediaQuery.of(context).viewInsets.bottom == 0
? null
: Row(
children: [
const Spacer(),
TextButton(
onPressed: () {
FocusManager.instance.primaryFocus?.unfocus();
},
child: const Text("Done"))
],
),
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text("Keyboard done button"),
),
body: ListView(
padding: const EdgeInsets.all(8),
keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
children: [
TextFormField(
decoration: const InputDecoration(
labelText: 'Some text',
),
),
],
),
);
}
}
done
中没有iOS
按钮,但我们可以检查输入的长度并清除focus
以隐藏数字键盘。
如下实现,(它将使用固定长度的数值)
onChanged: (val) {
if (val.length == 10) { //10 is the length of the phone number you're allowing
FocusScope.of(context).requestFocus(FocusNode());
}
}