搜尋套件、儲存庫與 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

所屬分類

表單

原始碼儲存庫

使用此套件的專案

暫無相關資料。