106 lines
5.5 KiB
Markdown
106 lines
5.5 KiB
Markdown
## 1.2.0 (beta)
|
||
- **`[guru_app]`**
|
||
- `SpecHorizontal`支持relative
|
||
- `SpecVertical`支持relative
|
||
- `SpecRect`支持relative
|
||
- `SpecRRect`支持relative
|
||
- `SpecOffset`支持relative
|
||
|
||
## 1.1.0
|
||
|
||
- 拆分guru_ui库到guru_widgets
|
||
- lottie_widget
|
||
- TapWidget
|
||
- AnimatedTransformBuilder
|
||
|
||
## 1.0.1
|
||
|
||
该库包含guru自身设计风格的相关UI，并针对该UI规范封装了一套标准的控件，以及针对UI规范进行统一校准的尺寸定义库，后续项目必须要以此库为准进行开发
|
||
|
||
<img src="https://github.com/castbox/android-flutter/blob/main/flutter/images/guru_ui.png?raw=true" width = "909.090908" height = "400" alt="" align=center />
|
||
|
||
|
||
从上面图中可以看到有两块地方，一个是通用的UI模块，一个是针对UI布局实现的Design模块，两个库都并没有引用任何GP，ADS, Firebase相关库，因此可以让老项目正常引入
|
||
#### Standard UI
|
||
|
||
[设计规范](https://drive.google.com/drive/folders/1wMxdR1UtSV3M6Oze7_wFOdTPR5m9dxO9)
|
||
|
||
#### Design
|
||
|
||
Design库是一个将设计文稿尺寸根据真机现实情况转换为真实尺寸的一个开发库，该库是为了方便开发可以和设计提供的尺寸标准进行统一，从而可以确保UI显示可以和设计稿达到统一效果。
|
||
- Design库通过[DesignSpec](#designspec)和`DesignField`来完成UI设计尺寸定义。
|
||
|
||
- Design库现主要定义三类设计字段
|
||
- `值类设计字段`
|
||
- `UI类设计字段`
|
||
- `嵌套类设计字段`
|
||
|
||
通过上面的组合可以将UI设计文稿最大化的转换到与UI设计尺寸展示比例一致的效果。
|
||
|
||
##### DesignSpec
|
||
DesignSpec是声明一个UI规格的声明，这个声明表明这个类将会把相应定义的设计尺寸进行转换，最终通过`build_runner`编译进行真实尺寸的生成。我们以`M2Blocks`的`DailyRewards`页面设计尺寸为例：
|
||
```dart
|
||
|
||
part 'daily_rewards_design_spec.g.dart';
|
||
|
||
@DesignSpec(width: 750, height: 1624)
|
||
abstract class DailyRewardsDesignSpec implements BasicDesignSpec {
|
||
|
||
...
|
||
|
||
static DailyRewardsDesignSpec get() => _DailyRewardsDesignSpec.get();
|
||
}
|
||
```
|
||
|
||
上面定义代表我们定义了一个DailyRewards页面的设计尺寸规格，相关字段的定义后面会进行统一介绍，在DesignSpec中有如下参数
|
||
| ***DesignField*** | ***Type*** | ***Description*** |
|
||
| :-------- | :--------: | :-------- |
|
||
| `width` | Double | 设计规格参照的宽度 |
|
||
| `height` | Double | 设计规格参照的高度 |
|
||
| `specMode` | Int | 规格模式（useGet、useContext和useSize） |
|
||
| `nestedSpec` | Bool | 是否是嵌套规格 |
|
||
|
||
这里的`width`和`height`主要是和设计稿参照的总宽高一一对应，`specMode`是指规格的模式，因为使用该库的逻辑有可能是老项目，因此在该计算规格转换中，`designSpec`会尽可能支持现有项目的三种模式:
|
||
- ***`useGet`*** : 通过使用`Get`来进行设计规格计算，使用`Get`中内部的尺寸逻辑进行计算
|
||
- ***`useContext`*** : 通过使用`BuildContext`中的`MediaQuery`来计算规格
|
||
- ***`useSize`*** : 通过明确`size`来进行计算
|
||
|
||
`nestedSpec`是指当前规格是否是一个嵌套设计规格，如果是嵌套设计规格，在其它规格中将可以引用该规格。
|
||
##### SpecValueField
|
||
SpecValueField是一个值类型的字段，最终返回的真实数据都是转换后的值，类型为`Double`
|
||
|
||
| ***DesignField*** | ***Type*** | ***Description*** |
|
||
| :-------- | :--------: | :-------- |
|
||
| `SpecWidth` | Double | 设计宽度 |
|
||
| `SpecHeight` | Double | 设计高度 |
|
||
| `SpecHorizontal` | Double | 设计水平长度（同设`SpecWidth`） |
|
||
| `SpecVertical` | Double | 设计垂直长度（同设`SpecHeight`）|
|
||
| `SpecFontSize` | Double | 设计字体大小，使用该字段表明这里的字号是不考虑系统`textScale`的字号 |
|
||
| `SpecAbsoluteFontSize` | Double | 设计字体大小，使用该字段表明这里的字号是**需要**考虑系统`textScale`的字号|
|
||
| `SpecStatusBarHeight` | Double | 设计状态栏高度，该字段会动态根据系统的状态栏进行尺寸计算 |
|
||
| `SpecNavigationBarHeight` | Double | 导航栏高度，该字段会动态根据系统的导航栏进行尺寸计算 |
|
||
| `CombinedSpec` | Double | 组合尺寸，可以把多个值[SpecValueField](#specvaluefield)进行组合 |
|
||
|
||
##### SpecUiField
|
||
SpecUiField是一个UI类型的字段，最终返回的真实数据都是转换后的UI类型，类型为各个UI的结构类型。
|
||
| ***DesignField*** | ***Type*** | ***Description*** |
|
||
| :-------- | :--------: | :-------- |
|
||
| `SpecSize` | Size | 设计尺寸Size，返回一个真实的Size大小 |
|
||
| `SpecAspectHeightSize` | Size | 设计尺寸的相对高度Size |
|
||
| `SpecAspectWidthSize` | Size | 设计尺寸相对宽度Size |
|
||
| `SpecOffset` | Offset | 设计尺寸的偏移量 |
|
||
| `SpecRect` | Rect | 设计尺寸的Rect |
|
||
| `SpecRRect` | RRect | 设计尺寸的RRect |
|
||
| `SpecRadius` | Radius/BorderRadius | 设计尺寸半径 |
|
||
| `SpecEdgeInsets` | EdgeInsetsGeometry | 设计Padding |
|
||
|
||
##### NestedXxSpec
|
||
声明NestedXxSpec引用的是一个外部的嵌套规格，可以参照[DeisngSpec](#designspec)
|
||
| ***DesignField*** | ***Type*** | ***Description*** |
|
||
| :-------- | :--------: | :-------- |
|
||
| `NestedSpec` | BasicDesignSpec | 嵌入式的子Spec |
|
||
| `NestedAspectSpec` | BasicDesignSpec | 嵌入式的子Spec,支持相对比例定义 |
|
||
| `NestedAspectHeightSpec` | BasicDesignSpec | 嵌入式的子Spec,支持相对高度定义 |
|
||
| `NestedAspectWidthSpec` | BasicDesignSpec | 嵌入式的子Spec,支持相对宽度定义 |
|
||
|