搜尋分類、套件與程式碼儲存庫

套件詳情v0.2.1

smart_grid_view

一個響應式網格視圖,其交叉軸子項數量會根據可用的水平尺寸進行調整。

近 30 天下載
15
喜歡數
16
Pub 分數
30

安裝套件

flutter pub add smart_grid_view

套件介紹

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

SmartGridView 是一個適用於 Flutter 的響應式網格佈局組件,會根據可用的水平空間自動調整交叉軸上的子項數量。透過動態改變欄位數量,確保螢幕寬度得到最佳利用,非常適合在不同裝置尺寸上實現自適應 UI。此套件簡化了響應式設計,無需複雜的媒體查詢或自訂邏輯。它可順暢整合至現有的 Flutter 專案中,並支援網格項目之流暢呈現。

適用情境

  • 多螢幕尺寸的響應式版面
  • 自適應網格設計適用於行動裝置和平板電腦
  • 動態內容網格,項目寬度可變
  • 建構彈性產品或影像畫廊
  • 建立可擴展的儀表板介面

主要特色

  • 自動交叉軸子項數量調整
  • 基於可用寬度的響應式行為
  • 與 Flutter 的 GridView 簡單整合
  • 支援自訂間距和對齊
  • 針對大型資料集優化效能

適合對象

  • 開發響應式應用的開發者
  • 需要自適應網格佈局的設計師
  • 針對多種裝置形式因素的專案
  • 包含動態或變數內容的應用程式

使用建議

  • 僅限交叉軸響應式(非行基)
  • 可能需要針對複雜的物品尺寸進行調整
  • 最適合統一或可預測的物品尺寸
  • 不太適合高度自定義的網格圖案
  • 性能取決於項目複雜性和數量

原始 README

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

smart_grid_view

A responsive grid view that changes it's cross axis child count based on the available horizontal size.

This widget is great for creating responsive designs as the sized of tiles stays about the same across different screen sizes.

How does it work

Using the width of tiles, SmartGridview will calculate the crossAxisCount for the underlying GridView with maxWidth ~/ tileWidth.

The tileHeight is used with tileWidth to calculate gridChildRatio.

Example

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Example')),
        body: SmartGridView(
          tileWidth: 128,
          tileHeight: 168,
          children: List.generate(80, (index) => Card(
            child: GridTile(
              child: Text('tile #$index'),
            ),
          )),
        ),
      ),
    );
  }
}
Result

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。