Flutter 优质文章集Flutter圈子Flutter中文社区

Flutter 仿微信/微博九宫格

2020-06-15  本文已影响0人  Sky24n

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

App

本组件来源于Flutter仿微博客户端Fitness
百度云盘:提取码 ttbn
腾讯微云:点击下载
请使用微信或QQ浏览器扫码下载!

关于作者

GitHub : Sky24n
掘金     : Sky24n
简书     : Sky24n

Others

GitHub : nine_grid_view
另外一个NineGridViewflukit UI组件库里面,通过封装GridView实现。
本项目使用的Stack + Positioned实现。

上一篇下一篇

猜你喜欢

热点阅读