Flutter - Form简单封装 - 单行多行TextField

效果图

单行调用

            JhFormTool.inputText(
                    title: "联系电话",
                    inputInfo: _phone,
                    hintText: "请输入电话号码",
//                    space: 100,
                    keyboardType:TextInputType.number,
                    inputCallback: (value){
                      _phone = value;
                      print("callback"+ value);
                    }
                )

多行调用

              JhFormTool.textView(
                    inputInfo: "这是默认值",
                    hintText: "这是提示文字",
                    showRedStar: true,
                    inputCallback: (value){
                      print("textView"+ value);
                    }
                )

主界面代码

import 'package:flutter/material.dart';
import 'package:flutter_app/jhPickerTool.dart';
import 'package:flutter_app/jhFormTool.dart';

class FormTest extends StatefulWidget {
  @override
  _FormTestState createState() => _FormTestState();
}

class _FormTestState extends State<FormTest> {

  var _phone ="123456";
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
        appBar:AppBar(
            title:Text('FormTest')
        ),
        body:
//        HomeContent(),
        Scrollbar(
            child: SingleChildScrollView(child:
            Column(
              children: <Widget>[
                SizedBox(height: 10),
                JhFormTool.inputText(title: "联系人",hintText: "这是提示文字",space: 100),
                SizedBox(height: 10),
                JhFormTool.inputText(
                    title: "联系电话",
                    inputInfo: _phone,
                    hintText: "请输入电话号码",
//                    space: 100,
                    keyboardType:TextInputType.number,
                    inputCallback: (value){
                      _phone = value;
                      print("callback"+ value);
                    }
                ),

                SizedBox(height: 10,),
                JhFormTool.textView(
                    inputInfo: "这是默认值",
                    hintText: "这是提示文字",
                    showRedStar: true,
                    inputCallback: (value){
                      print("textView"+ value);
                    }
                ),

                SizedBox(height: 10,),
                JhFormTool.textView(
                    inputCallback: (value){
                      print("textView2"+ value);
                    }
                ),

                SizedBox(height: 10,),
                RaisedButton(
                    child: Text("确认"),
                    onPressed: (){
                      print("确认" + _phone);
                    }
                ),

//                Container(color:Colors.blue,height: 1200,),

              ],
            ),

            )
        )

    );
  }
}



//var selectTextStr ="请选择";
//   //选择样式
//Widget selectText(context,setState) {
//  return
//    Container(
////  color: Colors.red,
//      padding: EdgeInsets.fromLTRB(15, 5, 15, 5),
//      child: Row(
//        mainAxisAlignment: MainAxisAlignment.spaceBetween,
//        children: <Widget>[
//          Text("title：", style: TextStyle(fontSize: 18.0)),
//          Expanded(
//              child:
//              GestureDetector(
//                child:
//                Container(
//                  height: 40,
//                  decoration: BoxDecoration(
//                    border: Border.all(width: 1.0, color: Colors.grey),
//                    color: Colors.white,
//                    borderRadius: BorderRadius.all(new Radius.circular(2.0)),
//                  ),
//                  child: Center(
//                    child: Text(selectTextStr, style: TextStyle(fontSize: 18.0)),),
//                ),
//                onTap: () {
////                         print("请选择");
//                  JhPickerTool.showStringPicker(context,
//                      data: ["1","2","3"],
//                      clickCallBack: (index,str){
//                        setState((){
//                          selectTextStr =str;
//                        });
//                      }
//                  );
//                },
//              )
//
//          ),
//        ],
//      ),
//    );
//}

jhFormTool 代码

import 'package:flutter/material.dart';


const double textFontSize = 18.0;
const Color  textColor = Colors.black;
const double titleSpace = 80.0; //左侧title默认宽
const Color  bgColor = Colors.orange;
const Color  inputColor = Colors.yellow;

typedef InputCallback = void Function(String inputValue);

class JhFormTool{

      /** 一行输入样式 */
      static Widget inputText({
            @required String title,
            String inputInfo,
            String hintText ='请输入',
            TextInputType keyboardType = TextInputType.text,
            double space = titleSpace,
            InputCallback inputCallback,
      }){
            return CreateInputCell(
              title:title,
              inputInfo:inputInfo,
              hintText: hintText,
              keyboardType: keyboardType,
              space: space,
              inputCallback: inputCallback,
            );

      }


      /** 多行输入样式 */
      static Widget textView({
        String inputInfo,
        String hintText ='请输入',
        bool showRedStar =false,
        InputCallback inputCallback,
      }){
        return CreateTextViewCell(
          inputInfo:inputInfo,
          hintText: hintText,
          showRedStar: showRedStar,
          inputCallback: inputCallback,
        );

      }





}


class CreateInputCell extends StatefulWidget {

      final String title;
      final String inputInfo;
      final String hintText;
      final TextInputType keyboardType;
      final double space;
      final InputCallback inputCallback;

      CreateInputCell({
        @required this.title,
        this.inputInfo,
        this.hintText,
        this.keyboardType,
        this.space,
        this.inputCallback,
      });

  @override
  _CreateInputCellState createState() => _CreateInputCellState();
}

class _CreateInputCellState extends State<CreateInputCell> {

    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(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            width: widget.space,
            child: Text(widget.title, style: TextStyle(fontSize: textFontSize,color: textColor)),
          ),
          Expanded(
              child:
              Container(
                color: inputColor,
                height: 40,
                child: TextField(
                  controller: inputController,
                  keyboardType: widget.keyboardType,  //键盘类型
                  maxLines: 1,
                  decoration: InputDecoration(
                    hintText: widget.hintText,
                    contentPadding: EdgeInsets.all(5),
                    border: OutlineInputBorder(),
                  ),
                  onChanged: (value){
                    widget.inputCallback(inputController.text);
                  },
                ),
              )
          ),
        ],
      ),
    );
  }
}


class CreateTextViewCell extends StatefulWidget {

      final String inputInfo;
      final String hintText;
      final bool showRedStar;
      final InputCallback inputCallback;

      CreateTextViewCell({
        this.inputInfo,
        this.hintText,
        this.showRedStar,
        this.inputCallback,
      });

  @override
  _CreateTextViewCellState createState() => _CreateTextViewCellState();
}

class _CreateTextViewCellState extends State<CreateTextViewCell> {

  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: <Widget>[
            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,
                      keyboardType: TextInputType.text,  //键盘类型
                      maxLines: 5,
                      decoration: InputDecoration(
                        hintText: widget.hintText,
                        contentPadding: EdgeInsets.all(5),
                        border: OutlineInputBorder(),
                      ),
                      onChanged: (val) {
                        widget.inputCallback(inputController.text);
                      }
                  ),
                )
            ),
          ],
        ),
      );
    }
}