#夏日挑战赛#PandUI系列之Style讲解原创精华

panda_coder

发布于 2022-7-28 00:35

浏览

1收藏

类型及作用

style为json类型，在UI中会提前设置一些默认的样式属性，并且将样式添加到AppStorage中，方便后续使用者对预定义样式做一个系统性修改，毕竟UI样式并不能适配到每个人的所有需求及风格，只能预制一些工作来减少使用者的工作。

映射关系

作为基类的style收录了绝大多数官方ETS中的公共样式属性（剩余部分被弃用），而一些特定组件的样式属性，将以子类的方式进行扩展,拓展子类在此不做介绍。

PandaUI属性	官方ETS属性	参数类型	描述	备注
width	width	Length	设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。
height	height	Length	设置组件自身的高度，缺省时使用元素自身内容需要的高度。
size	size	{width?:Length，height?:Length}	设置高宽尺寸。
sizeWidth \| size-width	size:{width}	Length	单独设置size的width值
sizeHeight \| size-height	size:{height}	Length	单独设置size的height值
padding	padding	{top?: Length,right?: Length,bottom?: Length,left?: Length} \| Length	设置内边距属性。参数为Length类型时，四个方向内边距同时生效。	PandaUI中可类似css中根据数位设置四个方位，如：padding:"1 2"则为padding:{top:1,bottom:1,left:2,right:2}
paddingTop \| padding-top	padding:{top}	Length	单独设置padding的top值
paddingBottom \| padding-bottom	padding:{bottom}	Length	单独设置padding的bottom值
paddingLeft \| padding-left	padding:{left}	Length	单独设置padding的left值
paddingRight \| padding-right	padding:{right}	Length	单独设置padding的right值
margin	margin	{top?: Length,right?: Length,bottom?: Length,left?: Length} \| Length	设置外边距属性。参数为Length类型时，四个方向内边距同时生效。	PandaUI中可类似css中根据数位设置四个方位，如：margin:"1 2"则为margin:{top:1,bottom:1,left:2,right:2}
marginTop \| margin-top	margin:{top}	Length	单独设置margin的top值
marginBottom \| margin-bottom	margin:{bottom}	Length	单独设置margin的bottom值
marginLeft \| margin-left	margin:{left}	Length	单独设置margin的left值
marginRight \| margin-right	margin:{right}	Length	单独设置margin的right值
constraintSize \| constraint-size	constraintSize	{minWidth?:Length,maxWidth?: Length,minHeight?:Length,maxHeight?: Length}	设置约束尺寸，组件布局时，进行尺寸范围限制。
minWidth \| min-width	constraintSize:{minWidth}	Length	单独设置constraintSize的minWidth属性	此处命名为兼容css,去除constraintSize
maxWidth \| max-width	constraintSize:{maxWidth}	Length	单独设置constraintSize的maxWidth属性	此处命名为兼容css,去除constraintSize
minHeight \| min-height	constraintSize:{minHeight}	Length	单独设置constraintSize的minHeight属性	此处命名为兼容css,去除constraintSize
maxHeight \| max-height	constraintSize:{maxHeight}	Length	单独设置constraintSize的maxHeight属性	此处命名为兼容css,去除constraintSize
layoutWeight \| layout-weight	layoutWeight	number	容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。	仅在Row/Column/Flex布局中生效
align	align	Alignment	设置元素内容的对齐方式，只有当设置的width和height大小超过元素本身内容大小时生效。
direction	direction	Direction	设置元素水平方向的布局，可选值参照Direction枚举说明。
position	position	{x: Length,y: Length}	设置元素在位置定位时的锚点，以元素顶部起点作为基准点进行偏移。
positionX \| position-x	position:{x}	Length	单独设置position的x属性
positionY \| position-y	position:{y}	Length	单独设置position的y属性
markAnchor	markAnchor	{x: Length,y: Length}	设置元素在位置定位时的锚点，以元素顶部起点作为基准点进行偏移。
markAnchorX \| mark-anchor-x	markAnchor:{x}	Length	单独设置markAnchor的x属性
markAnchorY \| mark-anchor-y	markAnchor:{y}	Length	单独设置markAnchor的y属性
offset	offset	{x: Length,y: Length}	相对布局完成位置坐标偏移量，设置该属性，不影响父容器布局，仅在绘制时进行位置调整。
offsetX \| offset-x	offset:{x}	Length	单独设置offset的x属性
offsetY \| offset-y	offset:{y}	Length	单独设置offset的y属性
aspectRatio \| aspect-ratio	aspectRatio	number	指定当前组件的宽高比。
displayPriority \| display-priority	displayPriority	number	设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。	仅在Row/Column/Flex(单行)容器组件中生效。
flexBasis \| flex-basis	flexBasis	string \| number	此属性所在的组件在Flex容器中主轴方向上基准尺寸
flexGrow \| flex-grow	flexGrow	number	Flex容器的剩余空间分配给此属性所在组件的比例。
flexShrink \| flex-shrink	flexShrink	number	Flex容器压缩尺寸分配给此属性所在组件的比例。
alignSelf \| align-self	alignSelf	ItemAlign	覆盖Flex布局容器中alignItems默认配置。
border	border	{width?: Length,color?: Color,radius?: Length,style?: BorderStyle}	边框样式设置接口。	支持以字符串多参数输入方式且以单个空格间隔，一位参数设置width，两位参数依次设置width、color,三位参数依次设置width、style、color,四位参数依次设置width、style、color、radius
borderStyle \| border-style	border:{style}	BorderStyle	单独设置border的style属性	borderStyle枚举: Dotted：“显示为一系列圆点，圆点半径为borderWidth的一半”;Dashed:显示为一系列短的方形虚线;Solid:显示为一条实线。单独设置后续将支持字符串映射枚举值
borderWidth \| border-width	border:{width}	Length	单独设置border的width属性
borderColor \| border-color	border:{color}	Color	单独设置border的color属性
borderRadius \| border-radius	border:{radius}	Length	单独设置border的radius属性
backgroundColor \| background-color	backgroundColor	Color	设置组件的背景色。
backgroundImage \|backgournd-image	backgroundImage:{src}	src: string	图片地址，支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。	此处与官方不同的是仅设置src路径，repeat单独设置
backgroundRepeat \| background-repeat	backgroundImage:{repeat}	ImageRepeat	设置背景图片的重复样式，默认不重复	后续做字符串与枚举的映射
backgroundImageSize \| background-image-size	backgroundImageSize	{width?: Length,height?: Length} \| ImageSize	设置背景图像的高度和宽度。当输入为{width: Length, height: Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。	ImageSize的枚举： Cover:默认值，保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界；Contain：保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内；Auto：保持原图的比例不变。
backgroundImageSizeWidth \| background-image-size-width	backgroundImageSize:{width}	Length	单独设置backgroundImageSize的width参数
backgroundImageSizeHeight \| background-image-size-height	backgroundImageSize:{height}	Length	单独设置backgroundImageSize的height参数
backgroundImagePosition	backgroundImagePosition	{width?: Length,height?: Length} \| Alignment	设置背景图在组件中显示位置。
backgroundImagePositionX \| background-image-position-x	backgroundImagePosition:{x}	Length	单独设置backgroundImagePosition的x属性
backgroundImagePositionY \| background-image-position-y	backgroundImagePosition:{y}	Length	单独设置backgroundImagePosition的y属性
opacity	opacity	number	元素的不透明度，取值范围为0到1，1表示为不透明，0表示为完全透明
visibility	visibility	Visibility \|string	控制当前组件显示或隐藏。	已根据枚举值做映射。 “show”,“visible”=>Visibility.Visible; “none”=>Visibility.None; “hidden”=>Visibility.Hidden
zIndex \| z-index	zIndex	number	同一容器中兄弟组件显示层级关系，z值越大，显示层级越高。
color \|fontColor	fontColor	Color	设置文本颜色。	将"color"映射至fontColor
fontSize \| font-size	fontSize	Length	设置文本尺寸，Length为number类型时，使用fp单位。
fontStyle \| font-style	fontStyle	FontStyle	设置文本的字体样式	FontStyle的枚举：Normal：标准的字体样式；Italic：斜体的字体样式。
fontWeight \| font-weight	fontWeight	number \| FontWeight	设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。	FontWeight枚举：Lighter：字体较细；Normal：字体粗细正常；Regular：字体粗细正常；Medium：字体粗细适中;Bold:字体较粗;Bolder:字体非常粗。
fontFamily \| font-family	fontFamily	string	设置文本的字体列表。使用多个字体，使用’,'进行分割，优先级按顺序生效。例如：‘Arial, sans-serif’。	ETS暂不支持自定义字体(个人尚未找到实现方式，如有可以私信或评论)