Flutter中如何将回调获取的变量显示在Text组件中？

要实现把KpostalView回调获取的地址显示在Text组件里，核心是通过状态管理保存地址并触发UI更新，新手最容易上手的是用StatefulWidget的setState方法，具体步骤如下：

1. 切换为StatefulWidget（如果当前是Stateless） #

如果你的页面是StatelessWidget，先改成StatefulWidget，这样才能维护可变状态。

2. 定义状态变量保存地址 #

在State类中声明一个变量来存储选中的地址：

String? _selectedAddress; // 初始值为null，也可以设为空字符串''

3. 修改KpostalView的回调逻辑 #

在回调里通过setState更新状态变量，触发UI重建：

callback: (Kpostal result) {
  setState(() {
    _selectedAddress = result.address; // 保存地址到状态变量
  });
},

4. 在Text组件中绑定状态变量 #

把原来空的Text('')改成绑定_selectedAddress的Text：

Text(_selectedAddress ?? '请选择地址'), // 如果地址为空，显示提示文本

完整示例代码 #

替换你原来的Row部分，完整代码如下：

Row(
  children: [
    Expanded(
      child: Container(
        height: 40,
        color: primaryColor20,
        alignment: Alignment.centerLeft, // 可选：让文本左对齐
        padding: EdgeInsets.symmetric(horizontal: 12), // 可选：加内边距
        child: Text(_selectedAddress ?? '请选择地址'),
      ),
    ),
    ElevatedButton(
      onPressed: () async {
        await Navigator.push(
          context,
          MaterialPageRoute(
            builder: (_) => KpostalView(
              callback: (Kpostal result) {
                setState(() {
                  _selectedAddress = result.address;
                });
              },
            ),
          ),
        );
      },
      child: Text('Find Address'),
    ),
  ],
),

补充说明 #

• setState是Flutter最基础的状态更新方式，调用后会重新执行build方法，更新依赖该状态变量的UI组件。
• 如果后续页面复杂，也可以用Provider、Riverpod等状态管理工具，但对于简单场景，setState足够用了。

内容的提问来源于stack exchange，提问作者HappyCoding