主页 / coding / 问题 / 78533747
Accepted
eastwater
Asked: 2024-05-26 05:16:50 +0800 CST

Flutter TextField onTopOutside：取消焦点后无法重新聚焦

  • 772
      Scaffold(
          appBar: AppBar(title: const Text('Example')),
          body: SizedBox(
            width: 100,
            height: 40,
            child: Builder(builder: (context) {
              return TextField(onTapOutside: (event) {
                FocusScope.of(context).unfocus();
              });
            }),
          ))

onTapOutside：在点击外部时失去焦点。但点击文本字段时，TextField 无法重新获得焦点。

flutter

1 个回答

  1. Best Answer
     class _ExamplePageState extends State<ExamplePage> {   final FocusNode _focusNode = FocusNode();

  @override   void initState() {
    super.initState();

    // Listen to focus changes to handle unfocus logic properly
    _focusNode.addListener(() {
      if (!_focusNode.hasFocus) {
        print('TextField lost focus');
      }
    });   }

  @override   void dispose() {
    _focusNode.dispose();
    super.dispose();   }

  @override   Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const                   Text('Example')),
      body: GestureDetector(
        onTap: () {
          // Unfocus the TextField when    tapping outside of it
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: Center(
          child: SizedBox(
            width: 100,
            height: 40,
            child: TextField(
              focusNode: _focusNode,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Tap me',
              ),
            ),
          ),
        ),
      ),
    );   } }
    • 0

相关问题