guru_sdk

5.5 KiB

Raw Permalink Blame History

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规范进行统一校准的尺寸定义库，后续项目必须要以此库为准进行开发

从上面图中可以看到有两块地方，一个是通用的UI模块，一个是针对UI布局实现的Design模块，两个库都并没有引用任何GP，ADS, Firebase相关库，因此可以让老项目正常引入

Standard UI

设计规范

Design

Design库是一个将设计文稿尺寸根据真机现实情况转换为真实尺寸的一个开发库，该库是为了方便开发可以和设计提供的尺寸标准进行统一，从而可以确保UI显示可以和设计稿达到统一效果。

Design库通过DesignSpec和DesignField来完成UI设计尺寸定义。
Design库现主要定义三类设计字段
- 值类设计字段
- UI类设计字段
- 嵌套类设计字段

通过上面的组合可以将UI设计文稿最大化的转换到与UI设计尺寸展示比例一致的效果。

DesignSpec

DesignSpec是声明一个UI规格的声明，这个声明表明这个类将会把相应定义的设计尺寸进行转换，最终通过build_runner编译进行真实尺寸的生成。我们以M2Blocks的DailyRewards页面设计尺寸为例：


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进行组合

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

DesignField	Type	Description
`NestedSpec`	BasicDesignSpec	嵌入式的子Spec
`NestedAspectSpec`	BasicDesignSpec	嵌入式的子Spec,支持相对比例定义
`NestedAspectHeightSpec`	BasicDesignSpec	嵌入式的子Spec,支持相对高度定义
`NestedAspectWidthSpec`	BasicDesignSpec	嵌入式的子Spec,支持相对宽度定义

5.5 KiB Raw Permalink Blame History Unescape Escape