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

套件詳情v1.0.4

constrained_scrollable_views

一組有用的可捲動檢視包含 ConstrainedScrollView、ScrollableColumn 與 ScrollableRow。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
110
喜歡數
44
Pub 分數
160

安裝套件

flutter pub add constrained_scrollable_views

套件介紹

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

一個 Flutter 套件,提供專用的可捲動檢視,例如 ConstrainedScrollView、ScrollableColumn 和 ScrollableRow。這些元件在受限版面中提供對捲動行為的增強控制,確保內容符合定義的邊界,同時維持流暢捲動。非常適合需要響應式、彈性捲動容器且具可預測大小與對齊方式的 UI。

適用情境

  • 建立響應式可捲動版面
  • 構建受約束的垂直或水平列表
  • 在固定寬度容器中實現可滾動區域
  • 跨多個平台設計自適應UI
  • 管理嵌套滾動行為
  • 優化複雜組件中的佈局效能

主要特色

  • 支援垂直和水平滾動
  • 在捲動時強制執行大小約束
  • 提供內建的對齊和填補選項
  • 與現有的 Flutter 平面無縫整合
  • 提供輕量級、專注的功能
  • 確保跨平台的一致性行為

適合對象

  • 開發響應式 UI 的開發者
  • 需要精確滾動控制的團隊
  • 具有複雜嵌套滾動結構的專案
  • 跨平台應用程式,針對多種裝置
  • 尋求可預測捲動行為的UI設計師

使用建議

  • 僅限可滾動容器使用案例
  • 不取代完整的滾動檢視自訂
  • 需要了解 Flutter 的佈局系統
  • 最適合特定受限場景
  • 對於簡單的可捲動需求,可能具有最小的開銷

原始 README

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

Constrained Scrollable Views

Pub style: very good analysis License: MIT

Set of useful scrollable views includes ConstrainedScrollView, ScrollableColumn, and ScrollableRow.

  • ConstrainedScrollView is a combination of LayoutBuilder and SingleChildScrollView.
  • ScrollableColumn is Column wrapped by ConstrainedScrollView.
  • ScrollableRow is Row wrapped by ConstrainedScrollView.

Usage

Example of using ConstrainedScrollView:

ConstrainedScrollView(
  padding: const EdgeInsets.all(8),
  physics: const BouncingScrollPhysics(),
  constraintsBuilder: (constraints) => BoxConstraints(
    minWidth: constraints.maxWidth,
    minHeight: constraints.maxHeight,
  ),
  child: const Center(
    child: Text('ScrollView value'),
  ),
)

Example of using ScrollableColumn:

ScrollableColumn(
  padding: const EdgeInsets.all(8),
  physics: const BouncingScrollPhysics(),
  constraintsBuilder: (constraints) => BoxConstraints(
    minHeight: constraints.maxHeight,
  ),
  children: [
    for (var i = 0; i <= 100; i++)
      Padding(
        padding: const EdgeInsets.all(4),
        child: Text('Column value: $i'),
      ),
  ],
)

Example of using ScrollableRow:

ScrollableRow(
  padding: const EdgeInsets.all(8),
  physics: const BouncingScrollPhysics(),
  constraintsBuilder: (constraints) => BoxConstraints(
    minWidth: constraints.maxWidth,
  ),
  children: [
    for (var i = 0; i <= 100; i++)
      Padding(
        padding: const EdgeInsets.all(4),
        child: Text('Row value: $i'),
      ),
  ],
)

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。