flutter 输入框TextFormField，封装和使用

在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: [
          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: '填写店铺名称',
          )