Flutter：如何将TextController数据传递到另一个有状态组件？

在Flutter有状态组件中，通过_textController获取用户输入并保存到userPost变量，需要将该数据传递给NotificationService的showNotification方法使用。

相关代码 #

输入数据的组件代码 #

final _textController = TextEditingController();
String userPost = "";
@override
Widget build(BuildContext context) {
  final double height = MediaQuery.of(context).size.height;
  final double width = MediaQuery.of(context).size.width;
  return ScreenUtilInit(
      designSize: const Size(375, 812),
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (context, child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            backgroundColor: Colors.amber,
            body: Container(
              decoration: const BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [
                    Color.fromRGBO(95, 44, 130, 1),
                    Color.fromRGBO(73, 160, 157, 1),
                  ])),
              
                    Padding(
                      padding: EdgeInsets.all(60.sp),
                      child: TextFormField(
                        controller: _textController,
                        decoration: InputDecoration(
                            labelText: 'What s your name?',
                            suffixIcon: IconButton(
                                onPressed: () {
                                  _textController.clear();
                                },
                                icon: const Icon(Icons.clear))),
                      ),
                    ),
                    SizedBox(
                      height: 5.h,
                    ),
                    MaterialButton(
                      elevation: 0,
                      onPressed: () {
                        setState(() {
                          userPost = _textController.text;
                          _textController.clear();
                        });
                      },

需要使用数据的代码部分 #

showToast();
NotificationService().showNotification(
  1,
  'You can, ',
  randomName!,
);

方法1：直接在触发逻辑中传递userPost #

既然已经在按钮点击时将用户输入保存到了userPost，可以直接在同一个onPressed回调里调用showNotification，把userPost作为参数传入，替换原来的randomName!：

修改后的按钮点击逻辑：

MaterialButton(
  elevation: 0,
  onPressed: () {
    setState(() {
      userPost = _textController.text;
      _textController.clear();
    });
    // 直接调用通知方法并传入userPost
    showToast();
    NotificationService().showNotification(
      1,
      'You can, ',
      userPost, // 替换为保存好的用户输入
    );
  },
)

方法2：通过参数传递到其他类/方法 #

如果showNotification的调用逻辑不在当前组件中，比如在独立工具类或其他页面，可以把userPost作为参数传递过去：

先定义接收参数的方法：

void triggerNotification(String userInput) {
  showToast();
  NotificationService().showNotification(
    1,
    'You can, ',
    userInput,
  );
}

然后在当前组件的按钮点击时调用该方法：

onPressed: () {
  setState(() {
    userPost = _textController.text;
    _textController.clear();
  });
  triggerNotification(userPost);
}

方法3：状态管理（适合多组件共享数据场景） #

如果需要在多个组件间共享userPost数据，可以用Provider这类状态管理方案：

1. 创建状态类保存数据：

class UserPostProvider extends ChangeNotifier {
  String _userPost = "";
  String get userPost => _userPost;

  void updateUserPost(String value) {
    _userPost = value;
    notifyListeners();
  }
}

2. 在应用顶层注册Provider：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => UserPostProvider(),
      child: MyApp(),
    ),
  );
}

3. 在输入组件中更新状态：

onPressed: () {
  final postProvider = Provider.of<UserPostProvider>(context, listen: false);
  postProvider.updateUserPost(_textController.text);
  _textController.clear();
}

4. 在需要调用通知的地方获取状态：

final userPost = Provider.of<UserPostProvider>(context).userPost;
showToast();
NotificationService().showNotification(
  1,
  'You can, ',
  userPost,
);

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