Flutter 仿微信/微博九宮格

Sky24n發表於2020-06-16

NineGridView

類似微博動態,微信朋友圈,展示圖片的九宮格控制元件。支援單張大圖預覽。
同時也支援微信群組,釘釘群組頭像效果。

DragSortView

類似微博/微信釋出動態選圖九宮格。支援按壓放大效果,拖拽排序,拖拽到指定位置刪除。

GitHub : nine_grid_view

Pub

dependencies:
  nine_grid_view: ^1.0.0
複製程式碼

Example

import 'package:nine_grid_view/nine_grid_view.dart';

NineGridView(
  margin: EdgeInsets.all(12),
  padding: EdgeInsets.all(5),
  space: 5,
  type: NineGridType.weChatGp,
  itemCount: itemCount,
  itemBuilder: (BuildContext context, int index) {},
);

DragSortView(
  imageList,
  space: 5,
  margin: EdgeInsets.all(20),
  padding: EdgeInsets.all(0),
  itemBuilder: (BuildContext context, int index) {},
  initBuilder: (BuildContext context) {},
  onDragListener: (MotionEvent event, double itemWidth) {
    /// 判斷拖動到指定位置刪除
    /// return true;
    if (event.globalY > 600) {
      return true;
    }
    return false;
  },
);     
複製程式碼

Screenshots

Flutter 仿微信/微博九宮格 Flutter 仿微信/微博九宮格 Flutter 仿微信/微博九宮格
Flutter 仿微信/微博九宮格 Flutter 仿微信/微博九宮格 Flutter 仿微信/微博九宮格
Flutter 仿微信/微博九宮格 Flutter 仿微信/微博九宮格 Flutter 仿微信/微博九宮格

App

Flutter仿微部落格戶端Fitness
百度雲盤:提取碼 ttbn
騰訊微雲:點選下載
請使用微信或QQ瀏覽器掃碼下載!

Flutter 仿微信/微博九宮格

關於作者

GitHub : Sky24n
掘金     : Sky24n
簡書     : Sky24n

Others

另外一個NineGridViewflukit UI元件庫裡面,通過封裝GridView實現。
本專案使用的Stack + Positioned實現。

相關文章