在flutter 中我们经常会用这样应用场景,所以我们可以封装一个输入框
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:keyboard_actions/keyboard_actions.dart';
import 'package:shop_assistant/res/resources.dart';
import 'package:shop_assistant/uitls/number_text_input_formatter.dart';
/**
* 封装一个输入框widget
*/
class TextFieldItem extends StatelessWidget {
TextEditingController controller = TextEditingController();
FocusNode focusNode = FocusNode();
TextInputType keyboardType;
String hintText;
String title;
KeyboardActionsConfig config;
double height;
TextFieldItem(
{this.config,this.title,
this.controller,
this.focusNode,
this.keyboardType,
this.hintText,this.height=50});
@override
Widget build(BuildContext context) {
//在flutter中iOS平台输入框,有兼容性问题,所以要特殊处理
if (config != null && defaultTargetPlatform == TargetPlatform.iOS){
// 因Android平台输入法兼容问题,所以只配置IOS平台
FormKeyboardActions.setKeyboardActions(context, config);
}
return Container(
//输入框总高度
height: height,
//画一个底部分割线
decoration: BoxDecoration(
border:
Border(bottom: Divider.createBorderSide(context, width: 0.6))),
child: Row(
children: <Widget>[
Text(
title,
style: TextStyles.textGray14,
),
Gaps.hGap16,
Expanded(
flex: 1,
child: TextFormField(
//输入框控制器,controller可以获取文本
controller: controller,
//焦点控制
focusNode: focusNode,
//输入框类型
keyboardType: keyboardType,
//输入框控制
inputFormatters: _getInputFormatters(),
//输入框下划线去掉
decoration: InputDecoration(
hintText: hintText, border: InputBorder.none),
)),
Gaps.hGap16
],
),
);
}
_getInputFormatters(){
if (keyboardType == TextInputType.numberWithOptions(decimal: true)){
return [UsNumberTextInputFormatter()];
}
if (keyboardType == TextInputType.number || keyboardType == TextInputType.phone){
return [WhitelistingTextInputFormatter.digitsOnly];
}
return null;
}
}
使用:
FocusNode _focusNode1 = FocusNode();
TextFieldItem(
focusNode: _focusNode1,
title: '店铺名称',
hintText: '填写店铺名称',
)