美文网首页
Flutter - Form简单封装 - 单行、多行、选择样式

Flutter - Form简单封装 - 单行、多行、选择样式

作者: 西半球_ | 来源:发表于2020-02-21 15:33 被阅读0次
    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<FormTest> {

  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: <Widget>[
            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<FocusNode> 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: <Widget>[
                      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<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,
      height: _cellHeight,
      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: _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<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,
                  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<CreateSelectTextCell> {

  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: <Widget>[
          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();
                  }
                },
              )

          ),
        ],
      ),
    );
  }
}

    相关文章

      网友评论

          本文标题：Flutter - Form简单封装 - 单行、多行、选择样式

          本文链接：https://www.haomeiwen.com/subject/sqbcqhtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|Flutter - Form简单封装 - 单行、多行、选择样式|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！