Flutter中如何修改bottom sheet dialog内的文本内容？

核心原因：showModalBottomSheet默认创建的弹窗内容属于独立的路由上下文，直接调用父组件的setState无法触发弹窗内部的UI重绘，你可以通过StatefulBuilder实现弹窗内部的状态更新：

实现步骤 #

1. 用StatefulBuilder包裹弹窗的内容区域，获取弹窗内部专属的状态更新方法
2. 文本输入变更时，调用该内部状态更新方法刷新UI

完整示例代码 #

// 首先在父组件中提前声明变量或控制器
final TextEditingController _nom = TextEditingController();
String _new_name = '';

// 调用底部弹窗的逻辑
showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (BuildContext context) {
    // 用StatefulBuilder包裹弹窗内容
    return StatefulBuilder(
      builder: (BuildContext context, StateSetter setModalState) {
        return Padding(
          padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom,
            left: 16,
            right: 16,
            top: 16
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text(
                "Modifier la photo de profile",
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 16),
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Nom',
                  labelStyle: const TextStyle(
                    fontFamily: 'Montserrat',
                    fontWeight: FontWeight.bold,
                    color: Colors.grey,
                  ),
                  focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(
                      color: kPrimaryColor,
                    ),
                  ),
                ),
                controller: _nom,
                onChanged: (value){
                  // 调用弹窗内部的setState更新状态
                  setModalState(() {
                    _new_name = value;
                  });
                },
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Veuillez remplir ce champ';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 10.0),
              // 状态变更后会自动刷新该文本组件
              Text(_new_name)
            ],
          ),
        );
      },
    );
  },
);

简化方案 #

如果你已经绑定了TextEditingController，可以不用额外声明_new_name变量，直接把文本组件的内容改成Text(_nom.text)，配合setModalState也能实现实时同步，代码更简洁。

常见问题排查 #

你原有代码里的setStat是拼写错误，正确写法为setState，注意修正拼写问题。

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