搜索插件、代码仓与 APP 分类

ducafecatFlutter 生态导航
focus_widget 封面
插件详情v1.0.5+2

focus_widget

当点击小部件以外的区域时，让 FocusNode 失去焦点。

AndroidiOSWebmacOSWindowsLinux
pub.dev API 文档 源代码
近 30 天下载
26
喜欢数
20
Pub 分数
140

安装插件

flutter pub add focus_widget

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

focus_widget 包提供了一种便捷的方法，当用户在小部件外部点击时，自动移除 FocusNode 的焦点。它通过确保焦点得到妥善管理，防止持续的焦点状态干扰用户体验，从而提升表单的可用性。非常适合输入字段和交互式表单，可简化跨多个平台处理焦点丢失的问题。该包与 Flutter 的焦点系统无缝集成，并支持所有主要平台，包括移动设备、网页和桌面端。

适合场景

  • 表单输入管理
  • 防止焦点状态持续存在
  • 改进交互式表单的用户体验
  • 处理在外部点击时失去焦点
  • 跨平台表单控件

主要特点

  • 点击外部区域自动失去焦点
  • 与 FocusNode 的简单集成
  • 支持所有 Flutter 平台
  • 轻量级且开销极小
  • 与现有表单组件兼容

适合对象

  • 开发表单的开发者
  • 需要干净聚焦行为的应用程序
  • 跨平台 Flutter 应用
  • 包含多个输入字段的 UI
  • 注重用户体验的团队

使用建议

  • 需要正确的 FocusNode 设置
  • 可能会干扰自定义焦点逻辑
  • 不适合始终聚焦的控件
  • 仅限基于点击的焦点丢失
  • 取决于手势检测的准确性

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Flutter Focus Widget

一个可以让FocusNode失去焦点的Widget
A focusable and blurable widget of based on the FocusNode.

  • 新增的参数：

    • bool showFocusArea

      使用一个半透明的红色方框显示焦点区域，主要用于调试。

    • void Function(Widget widget, FocusNode focusNode) onLostFocus

      失去焦点后会调用这个function。

  • New Parameters:

    • bool showFocusArea

      Display a translucent red box to show the focus area, it's for debug.

    • void Function(Widget widget, FocusNode focusNode) onLostFocus

      When lost focus invoke this function.

  • 当FocusWidget获得焦点后

    在FocusWidget区域外点击

    会调用FocusNode.unfocus()并且触发FocusNode的listener

  • When the FocusWidget had focus

    Tap outside the FocusWidget area

    Will call the FocusNode's unfocus method and trigger the FocusNode's listener

GIF

gif

所属分类

表单

源码仓库

使用此插件的项目

暂无相关数据。