2. 组件详情页
- 其中每个都有至少一个演示展现和代码展示，对于重要的组件会详细展现。
- 希望尽量做到细致，如果有需要补充，欢迎联系我。或进行pr
| . | . | . |
|---|
| [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AJddZLSC-1631078184254)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6ad8ba98f1?imageView2/0/w/1280/h/960/ignore-error/1)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hfmfu918-1631078184256)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6afb3841c4?imageView2/0/w/1280/h/960/ignore-error/1)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NN9p05mO-1631078184257)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6afb590185?imageView2/0/w/1280/h/960/ignore-error/1)] | | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xiEzBEht-1631078184259)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6b0ad26b14?imageView2/0/w/1280/h/960/ignore-error/1)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Od3eZVpg-1631078184262)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6b13d3fb5b?imageView2/0/w/1280/h/960/ignore-error/1)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IyBLF0Zx-1631078184263)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6b15efec19?imageView2/0/w/1280/h/960/ignore-error/1)] |
3. 组件的可操作性
最重要的是: 所有的演示展现都是Flutter的组件形成的，而非图片，这就意味着可操作性更高。- 对一些操作交互的组件或有可操作性的某些组件，
提供操作演示
| . | . | . |
|---|
| [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HCZcp0h5-1631078184263)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6b177c5b67?imageslim)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lfi707Pk-1631078184264)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6b21cc116a?imageslim)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YoJeDR0b-1631078184265)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6b2486b5a5?imageslim)] | | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5iGih0zT-1631078184265)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6b34887a94?imageslim)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RnKSnOOZ-1631078184266)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6b3ca09b47?imageslim)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ondMsMi6-1631078184267)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6b3d4e0253?imageslim)] |
4. 相关组件的关联切换
相关组件通过link to 可以进行切换, 满足你的探索欲。- 维护了一个link to 的栈，可以退出时返回上一个组件。
| . | . | . |
|---|
| [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6mHR1U38-1631078184267)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6b4a4d6005?imageView2/0/w/1280/h/960/ignore-error/1)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CDDEVXUn-1631078184268)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6b5066fbf0?imageslim)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mDKz6H9N-1631078184269)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6b5359b695?imageslim)] |
5. 代码的查看和分享
激动人心的是，你可以通过右侧的图标展开/隐藏 实现下面效果的代码
并且支持分享，如果你想亲自体验，so，easy ! 而且代码高亮样式可以自定义。
| . | . | . |
|---|
| [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GDhm2xMN-1631078184269)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6b6badc1bb?imageslim)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5nrp0R0E-1631078184270)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6b6e75653c?imageslim)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UcIFGJHr-1631078184270)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6b72cdd78f?imageslim)] |
二、收藏集
收藏夹设计的初衷是: Flutter中的组件非常多，分类页并不明确
作为集卡癖的我很想有个收藏的接口，让我能自由收藏分类。
应用中默认给出了12种分类方式，也就是12个收藏夹，且210+组件已录入相应收藏夹
当然你可以自由的创建、修改、删除它们。收藏集还可以指定颜色用以区分。
1.收藏集
- 支持添加收藏集，可指定
颜色和简介 - 支持修改收藏集
- 支持删除收藏集，删除后，原先被收藏的组件将会移除。
| 添加收藏集 | 修改收藏集 | 删除收藏集 |
|---|
| [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qYImtmNu-1631078184271)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6b7979f4ae?imageslim)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6LI9ZQYV-1631078184272)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6b97f00113?imageslim)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1AUVO5sk-1631078184272)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6ba47f3fd2?imageslim)] |
4. 组件的收藏与取消操作
数据库表采用widget与category一对多的结构，收录组件。
在每个详情页的右滑菜单中可以查看当前组件的收藏信息，
点击收藏夹名称时时可以切换该组件是否收录。在收藏夹里面可以左滑删除
| 删除与数据同步 | 组件加入收藏集 | 收藏集支持多选 |
|---|
| [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2wyS3nzO-1631078184273)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6ba47ab64c?imageslim)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ES3T71Qg-1631078184273)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6badf6ee28?imageslim)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6DRtx9NL-1631078184274)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6bb380c7f5?imageslim)] |
5.整体效果
对收藏夹页面整体进行优化，效果如下，保留了默认收藏集。
点击收藏夹会进入收藏的内容，每个item也可以点击进入详情页。
| 滑动效果 | 切页效果 | 收藏详情 |
|---|
| [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2CZG7koV-1631078184275)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6bc9dcd980?imageslim)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dAu1VAp5-1631078184275)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6bdf9083df?imageslim)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zKXaxJKx-1631078184276)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6be809778f?imageslim)] |
6.彩蛋: 左右滑栏
很多朋友反映左右滑栏与系统的侧滑返回冲突，所以特意设置了滑栏的小彩蛋
主页长按底部左侧按钮可打开左侧滑栏
主页长按底部右侧按钮可打开右侧滑栏 详情页长按顶部房子按钮可打开右侧滑栏
| 长按右菜单滑页 | 长按左菜单滑页 | 详情内长按展示收藏菜单 |
|---|
| [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NwIvkb02-1631078184276)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6beb370b8b?imageslim)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-glytQ20Y-1631078184277)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6befe43cd2?imageslim)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L7BUJz4G-1631078184278)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6bfd3cd42f?imageslim)] |
三、搜索与全局配置
1.搜索功能
由于Flutter中Widget比较杂乱，不太好分类，所以搜索是非常重要的
另外可以根据星级进行过滤，支持多选。
| . | . | . |
|---|
| [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sGcK56yN-1631078184278)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6c1a355ad3?imageView2/0/w/1280/h/960/ignore-error/1)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dFcgDDHz-1631078184279)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6c211dfc99?imageView2/0/w/1280/h/960/ignore-error/1)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vpOjWmq7-1631078184279)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6c28562ec5?imageView2/0/w/1280/h/960/ignore-error/1)] |
2. 颜色主题
只提供八种颜色，可在右滑菜单页的我的主题配置,可以拓展
| . | . | . |
|---|
| [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5RvCGwXd-1631078184280)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6c2e937170?imageView2/0/w/1280/h/960/ignore-error/1)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2PqfYPvn-1631078184280)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6c3253c4ec?imageView2/0/w/1280/h/960/ignore-error/1)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9arYEqPp-1631078184281)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6c4f97f74d?imageView2/0/w/1280/h/960/ignore-error/1)] |
3.字体配置
支持全局字体设置,可以拓展
| . | . | . |
|---|
| [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LN2sB71E-1631078184282)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6c5448cb6c?imageView2/0/w/1280/h/960/ignore-error/1)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M7bq697z-1631078184282)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6c55542837?imageView2/0/w/1280/h/960/ignore-error/1)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tbh0itbr-1631078184283)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6c5bec6c56?imageView2/0/w/1280/h/960/ignore-error/1)] |
4.item样式设置
支持item样式设置，可以拓展，支持征集
| . | . | . |
|---|
| [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MVJkOTib-1631078184284)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6c7d4b5988?imageView2/0/w/1280/h/960/ignore-error/1)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vvj69JiS-1631078184285)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6c8935dfe1?imageView2/0/w/1280/h/960/ignore-error/1)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5BA7HeT6-1631078184285)(https://user-gold-cdn.xitu.io/2020/5/3/171dae6c8f90d6ec?imageView2/0/w/1280/h/960/ignore-error/1)] |
|