Flutter 子组件中的TextField如何在父组件获取当前用户输入的值？

最新推荐文章于 2024-11-14 14:29:25 发布

champion_ooO

最新推荐文章于 2024-11-14 14:29:25 发布

阅读量616

点赞数

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.youkuaiyun.com/champion_ooO/article/details/131066793

版权

Flutter 专栏收录该内容

11 篇文章

订阅专栏

在Flutter开发中，为了重用代码，通常会创建一个自定义Widget包含TextField。要获取TextField的输入值，需在子组件中添加controller属性，并在父组件中创建相应的TextEditingController，通过传递这个控制器来获取输入值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发一些经常复用的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