搜尋套件、儲存庫與 APP 分類

ensure_visible_when_focused 封面
套件詳情v1.2.0

ensure_visible_when_focused

一個方便的 Flutter 小部件,每次此小部件獲得焦點時,都會捲動到某個特定的小部件。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
1.6萬
喜歡數
53
Pub 分數
160

安裝套件

flutter pub add ensure_visible_when_focused

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

一個 Flutter 小部件,當特定小部件獲得焦點時,會自動滾動畫面以確保其可見。對於內容較長的表單,此套件透過防止輸入欄位被鍵盤遮擋來提升易用性。它可在所有主要平台運作,包括行動裝置、網頁與桌面端,提供無縫的使用者體驗。該小部件可輕鬆整合至現有的表單佈局中,無需複雜的捲動邏輯。

適用情境

  • 行動裝置上的表單輸入
  • 在長表單中捲動到焦點欄位
  • 改進網頁和桌面應用程式的可訪問性
  • 防止iOS和Android上的鍵盤重疊
  • 確保動態表單元素的可見性
  • 在多平台應用程式中提升使用者體驗

主要特色

  • 取得焦點時自動捲動
  • 跨平台相容性
  • 所需的設定最少
  • 適用於任何可捲動的容器
  • 無額外依賴
  • 支援嵌套滾動檢視

適合對象

  • 開發可存取表單的開發者
  • 長表單或動態表單的應用
  • 跨平台 Flutter 項目
  • 重視使用者體驗的團隊
  • 需要最少樣板程式碼的專案
  • 具有鍵盤互動的表單

使用建議

  • 可能會干擾自定義滾動行為
  • 需要正確的父級滾動上下文
  • 不適用於非滾動佈局
  • 如果過度使用,可能導致佈局卡頓
  • 有限的自訂選項
  • 最佳搭配顯式焦點管理使用

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

Buy Me A Coffee

Introduction

I was having a hard time scrolling to a specific wdget in a scenario where I had a very large form, with lots of form fields.

I found an issue with no concrete answer https://github.com/flutter/flutter/issues/58877

After digging a litlle deeper I found a solution to this problem https://www.didierboelens.com/2018/04/hint-4 -ensure-a-textfield-or-textformfield-is-visible-in-the-viewport-when-has-the-focus/. Hence the idea of ​​creating and making this widget available.

This widget solves this problem in a very elegant way. You just have to give the same FocusNode of the widget you want to scroll to.

Basic Usage

The widget is very simple to use. You need to Wrap your widget on a EnsureVisibleWhenFocused widget. You have to pass the FocusNode of the widget you want to scroll to when it's given focus.

EnsureVisibleWhenFocused(
    focusNode: _focusNode,
    child: TextFormField(
        focusNode: _focusNode,
    ),
)

With the setup above, every time the TextFormField gains focus, a scroll will be made to it.

You can give focus to a field just doing:

_focusNode.requestFocus();

You can configure more things, such as the scroll duration and it's curve.

enter image description here

Suggestions & Bugs

For any suggestions or bug report please head to issue tracker.

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。