flutter 图表_开源 | FLUI : Flutter 的组件扩展集

最新推荐文章于 2024-03-17 15:15:57 发布
最新推荐文章于 2024-03-17 15:15:57 发布
阅读量151 收藏
点赞数
文章标签： flutter 图表 flutter图表

42428f4702a00c1b9e51d36b7daa9c9a.png

在使用 Flutter 的过程中，总是不断的在与组件打交道，虽然 Flutter 官方已经有极为丰富的 Material Design 以及 iOS 风格的组件集合，但我们也需要不断的抽象，组合出一些新的基础组件或业务组件，FLUI 就是在开发过程中陆续抽象出来的，目的就是能够在下沉高质量组件的同时提升界面开发效率。

GitHub 地址: https://github.com/Rannie/flui FLUI 官网: https://flui.xin

也可以直接下载 Demo APK 体验: https://www.flui.xin/app/flui.apk

简介

f549771958782fa179282afb6b40a4d8.png

FLUI 的组件是在 Flutter 框架上进行的扩展，目前已经有 15 个类别并且在不断增加。

每个组件几乎都是独立的（少数有相互依赖），引入时可以直接 import 'package:flui.dart' 也可以 import 'package:flui/widgets/avatar.dart'，编译打包时 tree-shaking 会接管依赖的优化流程。

未来 FLUI 也会加入一些业务组件，比如图表，图片选择器等等，关于组件的动态化配置和渲染也在探索中。

兼容性上，框架会一直基于 Flutter Stable Channel 开发。目前支持 v1.7.8+hotfix.1 及以上版本，不过很快会更新到 v1.12 +

安装使用:

# Add dependency in pubspec.yaml

组件

下面为 Demo 和组件的部分截图，具体使用可以参考文档。

f35dfa392dfd937a8969b22e29c51d1c.png

关于主题，由于 Flutter 本身对主题的支持（配置，切换等）已经足够强大，所以 FLUI 设计的初衷就是无风格化的组件，尽可能的从组件树中读取 ThemeData，另外大部分组件也是支持对颜色，样式进行设置的。

FLUI 里大部分组件的选择都是基于一致性，根据用户在各个平台的使用习惯迁移过来，这里也参考了很多其他平台上成熟的 UI 框架比如 Antd, QMUI, Vant 等等，由于 Flutter 未来面向的平台众多，所以能做的组件还是一个比较大的体量。

FLUI 还有另外一个目标就是提供交互反馈，比如支持显示 loading 的按钮，toast，支持伸缩和 shimmer 动画的骨架屏，支持点击效果的 ListTile 等等，这样用户可以清晰地感知到自己的操作，也能很好的标明当前页面的状态。

关于 Flutter

Flutter 官方在上周的 Flutter Interact 上刚刚发布了新的稳定版 1.12， Flutter Web 和 Desktop 也进一步增强，1.13 IDE 已经可以直接运行调试 MacOS 应用了。但目前还是有很多的问题，比如 Repo 里 5000+ 的 issue 涉及到从开发到发布的各个环节，Flutter 本身更新节奏也很快，有的时候周边配套工具链的兼容性并不是很好，新的 Flutter 版本在带来新特性的同时也难免引入一些新的问题。另外虽然 Skia 是一个跨平台的渲染引擎，不过其实底层也会做很多兼容性的处理或者出现不同平台表现不一致的问题。

积极的是 Flutter 的关注度和发展依旧很快，有很多开发者在完善着社区，比如闲鱼团队在混合开发和效率工具上做了很多开源。 FLUI 也希望能跟着社区一起不断完善，欢迎使用和提 PR ~

weixin_39906114
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flutter_vant_kit:Vant风格的Flutter UI库
05-17
此项目仅供本人学习用，更新频率慢，若在项目中使用请移步到其它成熟的组件库 This project is only for my own study, the update frequency is slow and untested, if you use it in the project, please move to other mature component libraries Flutter Vant Kit Flutter Vant Kit is a style flutter UI library. Introduction How to use dependencies: flutter_vant_kit: ^0.2.7 How to run demo cd example/ flutter run API View 或 【|】 Demo Screenshot
【vant移动端表格数据排版】用vant2简单实现一个把PC端表格数据展示在移动端的排版。上拉加载更多，下拉刷新页面，新增，编辑，删除功能
seeeeeeeeeee的博客
07-05 5941
上次做了一个移动端的表格功能，纯表格的那种。跟PC一样，但是我一直觉得在移动端上写表格很糟糕的体验，毕竟手机就那么大。这不合理。但是我这公司又需要把PC端的表格的数据展示在移动端。导致我只能去试试看怎么排版比较好。由于网上也是一直找不到什么案例参考，所以就自己想了一个排版供大家参考。如果各位有更好的排版方式请发我一个图学习一下。
Flutter图表库fl_chart的使用解析(二)-折线图
最新发布
HUAXIAL的博客
03-17 852
看下[5, 10][5, 10, 5]
vue移动端vant的layout布局van-row，van-col实现带背景色table表格
qq_33235680的博客
07-01 1万+
vue移动端vant的layout布局van-row，van-col实现带背景色table表格
基于vant封装的动态表单(VFrom使用教程)
qq_34761385的博客
07-11 5951
vant-ui是属于vue开发移动端中用的比较多的一个组件库了，网上基于它的一些组件的二次封装也数不胜数，但是却都是零零散散，不成体系。总不能用一个就去找类似的封装吧，这样拼凑起来的也不是我们想要的。尤其，涉及众多表单业务的时候。
vant引入组件报错_一个非常美的FlutterUI组件扩展集：FLUI
weixin_39774490的博客
11-30 538
项目地址 FLUI 官网 下载 Demo APK 体验这是一个群内的网友写的，感觉里面的组件风格非常美，封装的挺到位的，在此推荐给大家，具体可以参考学习。 可以学到的知识还是挺多的，组件UI封装可以很大的提高页面的速度效率，封装是一个非常重要的技能。 适合广大Flutter爱好者。 丰富易用/简易定制/高效反馈。 请确保 Flutter 的版本 >= v1.7.8+hotfix.1 关于主...
flutter_plugin_amap:amap flutter插件
05-26
flutter_plugin_amap (高德地图插件) flutter_plugin_amap: git: url: https://github.com/chuguofei/flutter_plugin_amap.git ref: main ｜ - - 地图操作 定位当前位置 切换地图模式 绘制驾车路线 跳转内部导航 ...
flutter_screenshot_callback:flutter_screenshot_callback
03-05
screenshot_callback 一个新的Flutter插件。入门该项目是Flutter的起点，Flutter是一个特殊的程序包，其中包括针对Android和/或iOS的平台特定的实现代码。 要获得Flutter入门方面的帮助，请查看我们的，其中提供了...
flutter_plugin_record:flutter 仿微信录制语音功能 支持android和ios
05-02
提供类似微信的录制组件 提供播放音频结束的监听 提供根据传递的路径进行语音录制 提供录制wav,mp3格式 具体可参考example 播放 提供播放指定路径的音频文件 提供播放指定Url地址的wav,MP3格式文件 提供播放完成的回...
flutter_sticky_header：粘滞头条的颤动实现
02-21
flutter_sticky_header Flutter实现的粘性标头，其子级为子级。 特征 接受一条条作为内容。 标头可以重叠其条（例如，对于粘性侧面标头很有用）。 通知标题何时滚动到视口之外。 可以向任何方向滚动。 支持重叠...
vant 做表格_Vant List 列表
weixin_39622399的博客
12-19 9857
介绍瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。引入import Vue from 'vue';import { List } from 'vant';Vue.use(List);代码演示基础用法List 组件通过loading和finished两个变量控制加载状态，当组件滚动到底部时，会触发load事件并将loading设置成true。此时可以发起异步操作...
flutter 常用库总结
vae260772的专栏
02-25 2465
cupertino_icons: ^1.0.2 路由管理 fluro: ^2.0.3 https://www.jianshu.com/p/e575787d173c https://www.jianshu.com/p/ec72e9828fa1 flutter 常用工具类 https://pub.flutter-io.cn/packages/flustars flustars: ^2.0.1 https://gitee.com/wjyefeng/flutter_flustars https://www.jian
【vant】打开vant表单的正确形式(基于vant表单的二次封装)
七十多岁的人了、
07-09 1532
vant表单二次封装
H5 - vue3.0+vant 表格组件
ll_883963的博客
06-21 2111
【代码】H5 - vue3.0+vant 表格组件。
vue+vant移动端显示table表格加横向滚动条
ss_Tina的博客
12-14 1万+
参考文章：vant移动端显示table效果，增加复选框，可以进行多选和全选。加横向滚动条，可以看全部内容。主要是参考上面两篇文章。页面效果。
小程序使用vant制作表格table并含有checkbox多选框搜索框
种麦南山下的博客
06-11 1万+
结果样式如下： wxml文件（样式可以自己修改） <view class="table"> <view class="tr"> <view class="th" style="width: 115%;">商品名称</view> <view class="th">商品编号</view> <view class="th">商品数量</view> .
20个Flutter最漂亮的UI库和项目
热门推荐
kongT。的博客
09-10 2万+
Best-Flutter-UI-Templates 地址：https://github.com/mitesh77/Best-Flutter-UI-Templates The History of Everything 地址：GitHub - 2d-inc/HistoryOfEverything: Flutter Launch Timeline Demo flame 一款简约的Flutter游戏引擎。地址：https://github.com/flame-engine/flame
常用的ui框架
wyk760629476的专栏
04-29 562
在前端项目开发过程中，总是会引入一些UI框架，已为方便自己的使用，很多大公司都有自己的一套UI框架，下面就是最近经常使用并且很流行的UI框架。 一.Mint UI 流行指数：★★★★ Mint UI是 饿了么团队开发基于vue .js的移动端UI框架，它包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。 官网：https://mint-ui.github.io/#...
手机移动端加载更多（表格首行首列固定vue + vant完整版）
weixin_39418338的博客
08-30 1132
手机移动端加载更多（完整版vue + vant）
flutter overlay_Flutter自绘组件：微信悬浮窗（五）
05-25
在上一篇文章中，我们实现了微信悬浮窗的拖动功能。本篇文章将继续讲解如何实现微信悬浮窗的缩放功能。 ## 实现思路 微信悬浮窗的缩放功能可以通过手势识别来实现。具体来说，当用户使用两个手指捏合或张开时，我们可以识别出缩放手势，并按照缩放手势的大小来更新悬浮窗的大小。 ## 实现步骤 1. 定义缩放手势识别器。 ```dart final scaleGestureDetector = ScaleGestureRecognizer(); ``` 2. 在 initState 方法中，将缩放手势识别器添加到 GestureDetector 中。 ```dart @override void initState() { super.initState(); // 添加缩放手势识别器 scaleGestureDetector ..onScaleStart = _handleScaleStart ..onScaleUpdate = _handleScaleUpdate ..onScaleEnd = _handleScaleEnd; } @override Widget build(BuildContext context) { return GestureDetector( onLongPressMoveUpdate: _handleDragUpdate, onLongPressEnd: _handleDragEnd, child: CustomPaint( size: Size(widget.width, widget.height), painter: _FloatWindowPainter(), ), // 添加缩放手势识别器 scaleGestureDetector: scaleGestureDetector, ); } ``` 3. 在 _handleScaleUpdate 方法中，根据缩放手势的大小来更新悬浮窗的大小。 ```dart void _handleScaleUpdate(ScaleUpdateDetails details) { // 计算缩放比例 double scale = details.scale; if (scale < 1.0) { // 缩小悬浮窗 widget.width *= scale; widget.height *= scale; } else { // 放大悬浮窗 widget.width += (details.scale - 1.0) * widget.width; widget.height += (details.scale - 1.0) * widget.height; } // 更新悬浮窗位置 _updatePosition(); // 通知父组件更新悬浮窗大小 widget.onSizeChanged(widget.width, widget.height); // 刷新界面 setState(() {}); } ``` 4. 在 _handleScaleEnd 方法中，重置缩放手势识别器。 ```dart void _handleScaleEnd(ScaleEndDetails details) { // 重置缩放手势识别器 scaleGestureDetector.dispose(); scaleGestureDetector ..onScaleStart = _handleScaleStart ..onScaleUpdate = _handleScaleUpdate ..onScaleEnd = _handleScaleEnd; } ``` ## 完整代码 ```dart import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; class FloatWindow extends StatefulWidget { final double x; final double y; double width; double height; final Widget child; final Function(double, double) onPositionChanged; final Function(double, double) onSizeChanged; FloatWindow({ Key key, this.x, this.y, this.width, this.height, this.child, this.onPositionChanged, this.onSizeChanged, }) : super(key: key); @override _FloatWindowState createState() => _FloatWindowState(); } class _FloatWindowState extends State<FloatWindow> { Offset _offset = Offset.zero; Offset _position = Offset.zero; bool _dragging = false; final scaleGestureDetector = ScaleGestureRecognizer(); @override void initState() { super.initState(); // 添加缩放手势识别器 scaleGestureDetector ..onScaleStart = _handleScaleStart ..onScaleUpdate = _handleScaleUpdate ..onScaleEnd = _handleScaleEnd; } @override Widget build(BuildContext context) { return GestureDetector( onLongPressMoveUpdate: _handleDragUpdate, onLongPressEnd: _handleDragEnd, child: CustomPaint( size: Size(widget.width, widget.height), painter: _FloatWindowPainter(), ), // 添加缩放手势识别器 scaleGestureDetector: scaleGestureDetector, ); } @override void dispose() { // 释放缩放手势识别器 scaleGestureDetector.dispose(); super.dispose(); } void _handleScaleStart(ScaleStartDetails details) { // 记录当前悬浮窗大小 widget.width = context.size.width; widget.height = context.size.height; } void _handleScaleUpdate(ScaleUpdateDetails details) { // 计算缩放比例 double scale = details.scale; if (scale < 1.0) { // 缩小悬浮窗 widget.width *= scale; widget.height *= scale; } else { // 放大悬浮窗 widget.width += (details.scale - 1.0) * widget.width; widget.height += (details.scale - 1.0) * widget.height; } // 更新悬浮窗位置 _updatePosition(); // 通知父组件更新悬浮窗大小 widget.onSizeChanged(widget.width, widget.height); // 刷新界面 setState(() {}); } void _handleScaleEnd(ScaleEndDetails details) { // 重置缩放手势识别器 scaleGestureDetector.dispose(); scaleGestureDetector ..onScaleStart = _handleScaleStart ..onScaleUpdate = _handleScaleUpdate ..onScaleEnd = _handleScaleEnd; } void _handleDragUpdate(LongPressMoveUpdateDetails details) { if (!_dragging) { _dragging = true; _offset = Offset(widget.x, widget.y); } setState(() { _position = _offset + details.offset; widget.onPositionChanged(_position.dx, _position.dy); }); } void _handleDragEnd(LongPressEndDetails details) { _dragging = false; } void _updatePosition() { if (_position.dx + widget.width / 2 > MediaQuery.of(context).size.width) { _position = Offset( MediaQuery.of(context).size.width - widget.width / 2, _position.dy, ); } if (_position.dx - widget.width / 2 < 0) { _position = Offset(widget.width / 2, _position.dy); } if (_position.dy + widget.height / 2 > MediaQuery.of(context).size.height) { _position = Offset( _position.dx, MediaQuery.of(context).size.height - widget.height / 2, ); } if (_position.dy - widget.height / 2 < 0) { _position = Offset(_position.dx, widget.height / 2); } widget.onPositionChanged(_position.dx, _position.dy); } } class _FloatWindowPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) {} @override bool shouldRepaint(_FloatWindowPainter oldDelegate) { return false; } } ``` ## 总结 本篇文章讲解了如何使用手势识别器来实现微信悬浮窗的缩放功能。通过本篇文章的学习，你已经掌握了手势识别器的使用方法，以及如何在自绘组件中使用手势识别器。在下一篇文章中，我们将讲解如何实现微信悬浮窗的旋转功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值