HarmonyOS鸿蒙Next中flutter使用TextField组件，点击外部非输入框区域无法自动失焦

HarmonyOS鸿蒙Next中flutter使用TextField组件，点击外部非输入框区域无法自动失焦

3 回复

我试了下，在3.7.12-ohos-1.0.2master分支测试是可以失焦的。这是我的代码：

import 'dart:io';

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'TextField Focus Example',
      home: FocusExample(),
    );
  }
}

class FocusExample extends StatefulWidget {
  const FocusExample({super.key});

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

class _FocusExampleState extends State<FocusExample> {
  final FocusNode _focusNode = FocusNode();

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TextField Focus Example'),
      ),
      body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              focusNode: _focusNode,
              decoration: const InputDecoration(
                hintText: 'Click outside to unfocus',
              ),
              onTapOutside: (event) => {_focusNode.unfocus()},
            ),
            Text(Platform.operatingSystem)
            // 可以添加更多的Widget
          ],
        ),
      );
  }
}

更多关于HarmonyOS鸿蒙Next中flutter使用TextField组件，点击外部非输入框区域无法自动失焦的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在HarmonyOS鸿蒙Next中使用Flutter的TextField组件，点击外部区域无法自动失焦是默认行为差异。Flutter本身不提供点击外部失焦的默认处理，需手动实现。可通过GestureDetector包裹外层，监听onTap事件调用FocusScope.of(context).unfocus()来取消焦点。鸿蒙Next的交互逻辑与原生Flutter一致，需自行处理焦点控制。该问题并非鸿蒙特有，是Flutter框架的通用实现方式。

在HarmonyOS Next中使用Flutter的TextField组件时，点击外部区域无法自动失焦的问题，可以通过以下方式解决：

  1. 使用GestureDetector包裹整个页面，在onTap回调中手动调用FocusScope.of(context).unfocus()方法

示例代码：

GestureDetector(
  onTap: () {
    FocusScope.of(context).unfocus();
  },
  child: Scaffold(
    body: Column(
      children: [
        TextField(),
        // 其他组件...
      ],
    ),
  ),
)
  1. 或者使用FocusScope包裹内容：
FocusScope(
  child: GestureDetector(
    onTap: () {
      FocusManager.instance.primaryFocus?.unfocus();
    },
    child: Scaffold(
      // 页面内容
    ),
  ),
)

这个问题的本质是Flutter的焦点管理机制在HarmonyOS上的表现与Android/iOS略有不同，需要手动处理外部点击失焦逻辑。

回到顶部