如何在不跳转的情况下从blockRow.dart模块的TextField获取数据

方法1：通过控制器传递（最直接） #

在父组件中创建TextEditingController，将其作为参数传递给blockRow.dart中的组件，绑定到对应的TextField上。点击按钮时直接访问父组件里的控制器就能获取数据：

1. 父组件代码示例：

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  final TextEditingController _textController = TextEditingController();

  @override
  void dispose() {
    _textController.dispose(); // 记得销毁控制器
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        BlockRow(textController: _textController), // 传递控制器到子组件
        ElevatedButton(
          onPressed: () {
            String inputText = _textController.text; // 直接获取数据
            print(inputText);
          },
          child: const Text("Start Picker"),
        ),
      ],
    );
  }
}

2. blockRow.dart中的子组件代码：

class BlockRow extends StatelessWidget {
  final TextEditingController textController;

  const BlockRow({super.key, required this.textController});

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: textController,
      decoration: const InputDecoration(hintText: "输入内容"),
    );
  }
}

方法2：使用回调函数 #

如果不想暴露控制器给子组件，可以在子组件中定义回调方法，实时将输入内容同步到父组件：

1. blockRow.dart代码：

class BlockRow extends StatelessWidget {
  final Function(String) onTextChanged;

  const BlockRow({super.key, required this.onTextChanged});

  @override
  Widget build(BuildContext context) {
    return TextField(
      onChanged: onTextChanged, // 输入变化时触发回调
      decoration: const InputDecoration(hintText: "输入内容"),
    );
  }
}

2. 父组件代码：

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  String _inputText = "";

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        BlockRow(
          onTextChanged: (text) {
            setState(() {
              _inputText = text;
            });
          },
        ),
        ElevatedButton(
          onPressed: () {
            print(_inputText); // 获取同步后的输入内容
          },
          child: const Text("Start Picker"),
        ),
      ],
    );
  }
}

方法3：使用状态管理工具（适合复杂场景） #

如果项目组件层级较深，或多个组件需要共享输入数据，可以用Provider、Riverpod、Bloc等状态管理工具，将输入状态提升到共享状态中，需要时直接获取：

比如Riverpod的简单示例：

1. 定义全局状态：

final inputTextProvider = StateProvider<String>((ref) => "");

2. blockRow.dart中更新状态：

class BlockRow extends ConsumerWidget {
  const BlockRow({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return TextField(
      onChanged: (text) {
        ref.read(inputTextProvider.notifier).state = text;
      },
      decoration: const InputDecoration(hintText: "输入内容"),
    );
  }
}

3. 父组件中获取状态：

class ParentWidget extends ConsumerWidget {
  const ParentWidget({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Column(
      children: [
        const BlockRow(),
        ElevatedButton(
          onPressed: () {
            String inputText = ref.read(inputTextProvider);
            print(inputText);
          },
          child: const Text("Start Picker"),
        ),
      ],
    );
  }
}

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