Flutter学习之自定义组合控件法实现左边标签右边文本输入框的自定义控件

版权声明：本文为博主Pillar原创文章，欢迎转载并使用博客阅读器阅读 http://fir.im/CSDNBlog https://blog.csdn.net/Pillar1066527881/article/details/89096378

1、自定义控件代码：

import 'package:flutter/material.dart';

/*
* 左边带标签提示的组合输入框控件
*/
class ItemTextField extends StatefulWidget {
  final String text;
  final String hint;
  final FocusNode focusNode;
  final TextEditingController controler;

  ItemTextField({this.text, this.hint, this.focusNode, this.controler});

  @override
  State createState() {
    return _ItemTextFieldState(
        this.text, this.hint, this.focusNode, this.controler);
  }
}

class _ItemTextFieldState extends State<ItemTextField> {
  final String text;
  final String hint;
  final FocusNode focusNode;
  final TextEditingController controler;

  _ItemTextFieldState(this.text, this.hint, this.focusNode, this.controler);

  @override
  Widget build(BuildContext context) {
    Widget _sectionPwd = Container(
        child: TextFormField(
      autofocus: false,
      focusNode: focusNode,
      controller: controler,
      decoration: InputDecoration(
//        labelText: text ?? "",
        hintText: hint ?? "",
        border: InputBorder.none,
      ),
      //校验用户名
      validator: (v) {
        return v.trim().length > 0 ? null : hint;
      },
    ));

    return Container(
      child: Row(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(left: 15, right: 10),
            child: Text(
              text,
              style: TextStyle(fontSize: 16),
            ),
          ),
          Expanded(
            child: _sectionPwd,
          ),
        ],
      ),
    );
  }
}

2、用法：
Widget _SectionPwd = ItemTextField(
text: “原 密 码”,
hint: “请输入当前密码”,
focusNode: mFocusNodePwd,
controler: _pwdControler,
);

3、完整的修改密码页面UI中的使用方式：

import 'package:flutter/material.dart';
import 'package:flutterdemo/page/util/CommonUtil.dart';
import 'package:flutterdemo/widget/ItemTextField.dart';
import 'package:flutterdemo/widget/DefaultButton.dart';

class UpdatePwdPage extends StatefulWidget {
  State<StatefulWidget> createState() => new _UpdatePwdPageState();
}

class _UpdatePwdPageState extends State<UpdatePwdPage> {
  FocusNode mFocusNodePwd;
  FocusNode mFocusNodeNewPwd;
  FocusNode mFocusNodeRePwd;
  TextEditingController _pwdControler = new TextEditingController();
  TextEditingController _newpwdControler = new TextEditingController();
  TextEditingController _repwdControler = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    Widget _SectionPwd = ItemTextField(
      text: "原  密  码",
      hint: "请输入当前密码",
      focusNode: mFocusNodePwd,
      controler: _pwdControler,
    );
    Widget _SectionNewPwd = ItemTextField(
      text: "新  密  码",
      hint: "请输入新密码",
      focusNode: mFocusNodeNewPwd,
      controler: _newpwdControler,
    );
    Widget _SectionRePwd = ItemTextField(
      text: "确认密码",
      hint: "请再次输入新密码",
      focusNode: mFocusNodeRePwd,
      controler: _repwdControler,
    );

    Widget _SectionLine = Container(
      height: 0.5,
      color: Colors.grey[200],
    );

    Widget _SectionSave = DefaultButton(
      text: "保存",
      onPressed: save,
    );

    return MaterialApp(
      theme: CommonUtil.getThemeData(),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('修改密码'),
          leading: IconButton(
              icon: Icon(Icons.arrow_back, color: Colors.white),
              onPressed: onBack),
          centerTitle: true,
          actions: <Widget>[new Container()],
        ),
        body: Container(
          padding: EdgeInsets.only(top: 10),
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                _SectionPwd,
                _SectionLine,
                _SectionNewPwd,
                _SectionLine,
                _SectionRePwd,
                _SectionLine,
                _SectionSave,
              ],
            ),
          ),
        ),
      ),
    );
  }

  @override
  void deactivate() {
    // TODO: implement deactivate
    super.deactivate();
    mFocusNodePwd.unfocus();
    mFocusNodeNewPwd.unfocus();
    mFocusNodeRePwd.unfocus();
  }

  @override
  void initState() {
    super.initState();
    mFocusNodePwd = new FocusNode();
    mFocusNodeNewPwd = new FocusNode();
    mFocusNodeRePwd = new FocusNode();
  }

  /*
  * 返回事件
  */
  void onBack() {
    mFocusNodePwd.unfocus();
    mFocusNodeNewPwd.unfocus();
    mFocusNodeRePwd.unfocus();
//    FocusScope.of(context).requestFocus(FocusNode());
    Navigator.pop(context);
  }

  void save() {}
}