Flutter如何从TimePickerScreen获取值回传主类并填充展示

解决方法 #

你可以通过回调函数实现子组件向父组件传值，只需要修改3处代码即可：

第一步：给TimePickerScreen添加回调参数 #

修改TimePickerScreen类，定义一个接收两个时间参数的回调函数，用于点击保存时把选中时间传回主类：

class TimePickerScreen extends StatefulWidget {
  // 新增回调参数
  final Function(String fromTime, String toTime) onSaveTime;
  // 如果你使用的Flutter版本低于2.12不支持空安全，删除下面构造方法中的super.key和required修饰符即可
  const TimePickerScreen({super.key, required this.onSaveTime});

  @override
  _TimePickerScreenState createState() => _TimePickerScreenState();
}

第二步：给保存按钮补充点击逻辑，触发回调 #

找到TimePickerScreen里的FlatButton组件，补充onPressed里的逻辑：

FlatButton(
  onPressed: (){
    // 可根据需求自行加时间选择校验逻辑
    if(selectedFromTime.trim().isNotEmpty && selectedToTime.trim().isNotEmpty){
      // 触发回调，把选中的开始、结束时间传出去
      widget.onSaveTime(selectedFromTime, selectedToTime);
      // 关闭底部选择弹窗
      Navigator.pop(context);
    }
  },
  // 以下原有代码无需修改
  color: Colors.purple,
  padding: EdgeInsets.fromLTRB(15, 15, 15, 15),
  child: Text("Save",style: TextStyle(fontSize: 20,color: Colors.white),)
)

第三步：主类中接收回调，更新页面展示 #

找到主类中的pickerBottomSheet方法，修改TimePickerScreen的初始化逻辑，接收回调更新本地状态：

pickerBottomSheet(){
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    isDismissible: true,
    builder: (BuildContext context){
      return TimePickerScreen(
        onSaveTime: (fromTime, toTime){
          setState(() {
            pfromTime = fromTime;
            ptoTime = toTime;
          });
        },
      );
    }
  );
}

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