如何从另一个小部件更新钩子值 - Flutter

Question

我在 Flutter 应用程序中面临 HookWidget 和 StatelessWidget 的问题。我将两个钩子中的值传递给无状态小部件。我遇到的问题是

useTextEditingController

(

controller

) 的值没有按预期更新。

这是一个例子：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CustomHookWidget(),
    );
  }
}

class CustomHookWidget extends HookWidget {
  const CustomHookWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    final controller = useTextEditingController();
    final customHook = useState(0);

    return Scaffold(
      body: Column(
        children: [
          TextField(
            controller: controller,
          ),
          TheStatelessWidget(
            hook: customHook,
            text: controller.text,
          ),
        ],
      ),
    );
  }
}

class TheStatelessWidget extends HookWidget {
  final ValueNotifier<int> hook;
  final String text;

  const TheStatelessWidget({
    Key? key,
    required this.hook,
    required this.text,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        if (text.isEmpty) {
          print('empty');
          print(text);
        } else {
          hook.value += 1;
        }
      },
      child: Text('Change Value'),
    );
  }
}

Answer 1

最初的

TextEditingController

的文本是空的，这就是为什么你总是得到空字符串。您可以传递控制器来获取更新的值。

class CustomHookWidget extends HookWidget {
  const CustomHookWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final controller = useTextEditingController();
    final customHook = useState(0);
  

    return Scaffold(
      body: Column(
        children: [
          TextField(
            controller: controller,
          ),
          Text('Value: ${customHook.value}'),
          TheStatelessWidget(
            hook: customHook,
            controller: controller,
          ),
        ],
      ),
    );
  }
}

class TheStatelessWidget extends HookWidget {
  final ValueNotifier<int> hook;
  final TextEditingController controller;

  const TheStatelessWidget({
    Key? key,
    required this.hook,
    required this.controller,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        if (controller.text.isEmpty) {
          print('empty');
          print(controller.text);
        } else {
          hook.value += 1;
        }
      },
      child: Text('Change Value'),
    );
  }
}