搜索插件、代码仓与 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.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。