demo 地址: https://github.com/iotjin/jh_flutter_demo
效果图
FormTest.png
FormTest2.png
单行输入调用
JhFormTool.inputText(
title: "联系电话",
inputInfo: _phone,
hintText: "请输入电话号码",
focusNode: _node2,
// space: 100,
keyboardType: TextInputType.number,
inputCallBack: (value) {
_phone = value;
print("callback" + value);
}
),
多行输入调用
JhFormTool.textView(
inputInfo: "这是默认值",
hintText: "这是提示文字",
focusNode: _node3,
showRedStar: true,
inputCallBack: (value) {
print("textView" + value);
}
),
选择调用
JhFormTool.selectText(
title: "选择样式",
selectInfo: selectTextStr,
// hintText: "请选择0",
clickCallBack: () {
// JhPickerTool.showStringPicker(context,
// data: ["1", "2", "3"],
// clickCallBack: (index, str) {
// setState(() {
// selectTextStr = str;
// });
// }
// );
}
),
主界面代码
import 'package:flutter/material.dart';
import 'package:flutter_app/JhTools/jhPickerTool.dart';
import 'package:flutter_app/JhTools/jhFormTool.dart';
import 'package:keyboard_actions/keyboard_actions.dart';
class FormTest extends StatefulWidget {
@override
_FormTestState createState() => _FormTestState();
}
class _FormTestState extends State {
var _phone ="123456";
var selectTextStr="";
final FocusNode _node1 = FocusNode();
final FocusNode _node2 = FocusNode();
final FocusNode _node3 = FocusNode();
final FocusNode _node4 = FocusNode();
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
return
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {// 点击空白收起键盘
FocusScope.of(context).requestFocus(FocusNode());
},
child:
Scaffold(
// resizeToAvoidBottomPadding: true, //输入框抵住键盘
appBar: AppBar(
title: Text('FormTest')
),
body:
KeyboardActions(
config: JhFormTool.getKeyboardConfig(context, [_node1,_node2,_node3,_node4]),
child: _mainBody(),
)
)
);
}
_mainBody(){
double _space = 5;
return Scrollbar(
child:
SingleChildScrollView(child:
Column(
children: [
SizedBox(height: _space),
JhFormTool.inputText(
title: "联系人", hintText: "这是提示文字",focusNode: _node1, space: 100),
SizedBox(height: _space),
JhFormTool.inputText(
title: "联系电话",
inputInfo: _phone,
hintText: "请输入电话号码",
focusNode: _node2,
// space: 100,
keyboardType: TextInputType.number,
inputCallBack: (value) {
_phone = value;
print("callback" + value);
}
),
SizedBox(height: _space,),
JhFormTool.textView(
inputInfo: "这是默认值",
hintText: "这是提示文字",
focusNode: _node3,
showRedStar: true,
inputCallBack: (value) {
print("textView" + value);
}
),
SizedBox(height: _space,),
JhFormTool.textView(
focusNode: _node4,
inputCallBack: (value) {
print("textView2" + value);
}
),
SizedBox(height: _space,),
JhFormTool.selectText(
title: "选择样式",
selectInfo: selectTextStr,
// hintText: "请选择0",
clickCallBack: () {
// JhPickerTool.showStringPicker(context,
// data: ["1", "2", "3"],
// clickCallBack: (index, str) {
// setState(() {
// selectTextStr = str;
// });
// }
// );
}
),
SizedBox(height: _space,),
RaisedButton(
child: Text("确认"),
onPressed: () {
print("确认" + _phone);
print("确认" + selectTextStr);
}
),
],
),
)
);
}
}
jhFormTool 代码
import 'package:flutter/material.dart';
import 'package:keyboard_actions/keyboard_actions.dart';
//import 'package:keyboard_actions/keyboard_actions_config.dart';
const double _titleFontSize = 16.0; //左侧字体大小
const double _infoFontSize = 15.0; //右侧字体大小
const Color _textColor = Colors.black87;
const Color _inputBoderColor = Colors.grey; //边框默认颜色
const double _titleSpace = 80.0; //左侧title默认宽
const double _cellHeight = 50.0; //输入、选择样式一行的高度
const double _inputCellHeight = 40.0; //输入框、选择框高度
//const Color _bgColor = Colors.transparent;
//const Color _inputColor = Colors.transparent;
const Color _bgColor = Colors.orange;
const Color _inputColor = Colors.yellow;
typedef _InputCallBack = void Function(String value);
typedef _ClickCallBack = void Function();
class JhFormTool{
/** 一行输入样式 */
static Widget inputText({
@required String title,
String inputInfo,
String hintText ='请输入',
FocusNode focusNode,
TextInputType keyboardType = TextInputType.text,
double space = _titleSpace,
_InputCallBack inputCallBack,
}){
return
CreateInputCell(
title:title,
inputInfo:inputInfo,
hintText: hintText,
focusNode: focusNode,
keyboardType: keyboardType,
space: space,
inputCallBack: inputCallBack,
);
}
/** 多行输入样式 */
static Widget textView({
String inputInfo,
String hintText ='请输入',
FocusNode focusNode,
bool showRedStar =false,
_InputCallBack inputCallBack,
}){
return
CreateTextViewCell(
inputInfo:inputInfo,
hintText: hintText,
focusNode: focusNode,
showRedStar: showRedStar,
inputCallBack: inputCallBack,
);
}
/** 选择样式 */
static Widget selectText({
@required String title,
String selectInfo,
String hintText ='请选择',
double space = _titleSpace,
_ClickCallBack clickCallBack,
}){
return
CreateSelectTextCell(
title: title,
selectInfo: selectInfo,
hintText: hintText,
space: space,
clickCallBack: clickCallBack,
);
}
//三方键盘配置
static KeyboardActionsConfig getKeyboardConfig(BuildContext context, List list) {
return KeyboardActionsConfig(
keyboardBarColor: Colors.grey[200],
nextFocus: true,
actions: List.generate(list.length, (i) => KeyboardAction(
focusNode: list[i],
toolbarButtons: [
(node) {
return GestureDetector(
onTap: () => node.unfocus(),
child:
Stack(
alignment:Alignment.centerRight ,
children: [
Container(color: Colors.transparent, width: 100,),
Positioned(right: 15,child: Text("关闭"),),
]
)
);
},
],
)),
);
}
}
class CreateInputCell extends StatefulWidget {
final String title;
final String inputInfo;
final String hintText;
final FocusNode focusNode;
final TextInputType keyboardType;
final double space;
final _InputCallBack inputCallBack;
CreateInputCell({
@required this.title,
this.inputInfo,
this.hintText,
this.focusNode,
this.keyboardType,
this.space,
this.inputCallBack,
});
@override
_CreateInputCellState createState() => _CreateInputCellState();
}
class _CreateInputCellState extends State {
var inputController = TextEditingController();
@override
void initState() {
// TODO: implement initState
super.initState();
inputController.text = widget.inputInfo;
}
@override
Widget build(BuildContext context) {
return Container(
color: _bgColor,
height: _cellHeight,
padding: EdgeInsets.fromLTRB(15, 5, 15, 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: widget.space,
child: Text(widget.title, style: TextStyle(fontSize: _titleFontSize,color: _textColor)),
),
Expanded(
child:
Container(
color: _inputColor,
height: _inputCellHeight,
child: TextField(
controller: inputController,
focusNode: widget.focusNode,
keyboardType: widget.keyboardType, //键盘类型
maxLines: 1,
style: TextStyle(fontSize: _infoFontSize,color: _textColor),
decoration: InputDecoration(
hintText: widget.hintText,
contentPadding: EdgeInsets.all(5),
border: OutlineInputBorder(),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: _inputBoderColor),
),
),
onChanged: (value){
if(widget.inputCallBack!=null){
widget.inputCallBack(inputController.text);
}
},
),
)
),
],
),
);
}
}
class CreateTextViewCell extends StatefulWidget {
final String inputInfo;
final String hintText;
final FocusNode focusNode;
final bool showRedStar;
final _InputCallBack inputCallBack;
CreateTextViewCell({
this.inputInfo,
this.hintText,
this.focusNode,
this.showRedStar,
this.inputCallBack,
});
@override
_CreateTextViewCellState createState() => _CreateTextViewCellState();
}
class _CreateTextViewCellState extends State {
var inputController = TextEditingController();
@override
void initState() {
// TODO: implement initState
super.initState();
inputController.text = widget.inputInfo;
}
@override
Widget build(BuildContext context) {
return Container(
color: _bgColor,
padding: EdgeInsets.fromLTRB(15, 5, 15, 5),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(widget.showRedStar ? "*":"", style: TextStyle(fontSize: 18.0,color: Colors.red)),
SizedBox(width: widget.showRedStar ? 5:0,),
Expanded(
child:
Container(
color: _inputColor,
child: TextField(
controller: inputController,
focusNode: widget.focusNode,
keyboardType: TextInputType.text, //键盘类型
maxLines: 5,
style: TextStyle(fontSize: _infoFontSize,color: _textColor),
decoration: InputDecoration(
hintText: widget.hintText,
contentPadding: EdgeInsets.all(5),
border: OutlineInputBorder(),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: _inputBoderColor),
),
),
onChanged: (val) {
if(widget.inputCallBack!=null){
widget.inputCallBack(inputController.text);
}
},
),
)
),
],
),
);
}
}
class CreateSelectTextCell extends StatefulWidget {
final String title;
final String selectInfo;
final String hintText;
final double space;
final _ClickCallBack clickCallBack;
CreateSelectTextCell({
@required this.title,
this.selectInfo,
this.hintText,
this.space,
this.clickCallBack,
});
@override
_CreateSelectTextCellState createState() => _CreateSelectTextCellState();
}
class _CreateSelectTextCellState extends State {
var selectController = TextEditingController();
@override
Widget build(BuildContext context) {
selectController.text = widget.selectInfo;
return Container(
color: _bgColor,
height: _cellHeight,
padding: EdgeInsets.fromLTRB(15, 5, 15, 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: widget.space,
child: Text(widget.title, style: TextStyle(fontSize: _titleFontSize,color: _textColor)),
),
Expanded(
child:
GestureDetector(
child:
Container(
color: Colors.transparent,
height: _inputCellHeight,
// decoration: BoxDecoration(
// border: Border.all(width: 0.7, color: Colors.grey),
// color: Colors.transparent,
// borderRadius: BorderRadius.all(new Radius.circular(4.0)),
// ),
child:
TextField(
controller: selectController,
textAlign : TextAlign.center,
maxLines: 1,
enabled: false,
style: TextStyle(fontSize: _infoFontSize,color: _textColor),
decoration: InputDecoration(
hintText: widget.hintText,
contentPadding: EdgeInsets.all(5),
border: OutlineInputBorder(),
// border: InputBorder.none,
disabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: _inputBoderColor),
),
),
),
),
onTap: (){
if(widget.clickCallBack!=null){
widget.clickCallBack();
}
},
)
),
],
),
);
}
}