在开发一些经常复用的Input框时,我们都会抽离出一个Widget,通过调用这个Widget,去传入title,icon,hintText等。就可以减少很多代码量。但是当我们将子组件抽离出来,父组件调用这个widget,如何去获取TextField中用户输入的值呢?
第一步:这是写好的子组件,还没有绑定controller属性
TextField(
decoration: InputDecoration(
hintText: widget.hintText,
hintStyle: TextStyle(
fontSize: 14.sp, color: const Color(0xFF9E9E9E)),
suffixIcon: const Icon(
Icons.visibility_off_sharp,
color: Colors.grey,
),
contentPadding: EdgeInsets.only(
top: ScreenUtil().setHeight(12),
left: ScreenUtil().setWidth(24)),
border: InputBorder.none))
第二步:子组件首先增加TextField自己的controller属性:
(1)先定义 一个参数为:controller
(2)再使用
TextField(
controller: widget.controller,
decoration: InputDecoration(
hintText: widget.hintText,
hintStyle: TextStyle(
fontSize: 14.sp, color: const Color(0xFF9E9E9E)),
suffixIcon: const Icon(
Icons.visibility_off_sharp,
color: Colors.grey,
),
contentPadding: EdgeInsets.only(
top: ScreenUtil().setHeight(12),
left: ScreenUtil().setWidth(24)),
border: InputBorder.none))
第三步:子组件中定义和绑定都完成了,那就到需要使用这个Widget的父组件去调用,并且将子组件所需要的参数都传递给子组件
(1)父组件先定义一个TextEditingController 类型的 controller
(2)在父组件调用Widget时,将第一步定义的controller传递进去
(3)父组件中需要获取子组件的输入值时,直接调用controller.text即可
结果如下图: