ArkUI 属性

fcl
100 阅读5分钟

对齐方式

  1. 主轴对齐

    Row(){

}
.justifyContent( FlexAlign.Start )
    属性描述
    Start首端对齐
    Center居中对齐
    End尾部对齐
    Spacebetween两端对齐
    SpaceAround子元素两侧间距相等
    SpaceEvenly相邻元素之间的距离，第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样

  2. 交叉轴对齐

    // 水平容器 和 垂直容器 所用的枚举值不同
Row(){}
.alignItem( VerticalAlign.Start )

Column(){}
.alignTem( HorizontalAlign.Start )

    • 水平 .VeriticalAlign ( )

      属性描述
      Top顶端对齐
      Center中间对齐
      Bottom底部对齐

    • 垂直.HorizontalAlign ( )

      属性描述
      Start左对齐
      Center居中对齐
      End右对齐

布局属性

内、外边距

Row(){}
// 内边距
.padding({
	top: 10,
	bottom: 10,
	left: 10,
	right: 10
})

// 外边距
.margin()({
	top: 10,
	bottom: 10,
	left: 10,
	right: 10
})

在单独设置一个值时将同时设置四个方向的值

边框

Row()
.border({
	具体的样式属性
})
属性描述
width ( {left: number, right: number, ...} )设置边框的粗细。设置一个值表示所有框线的粗细
color ( {left: Color, right: Color, ...} )设置边框的颜色。设置一个值表示所有框线的颜色
style ( BorderStyle.Solid )设置边框线的样式。 Solid 实线、Dashed 虚线、Dotted 点线

边框圆角

// 设置一个值为所有
.borderRadius ({
	topleft: number,
	topright: number,
	bottomleft: number,
	bottomright: number
})

背景属性

背景图片

// ImgResouce: 图片文件的路径
// ImageRepeat: 图片的平铺方式。 X 水平复制铺满、Y 垂直复制铺满、XY 水平和垂直同时复制铺满
.backgroundImage( ImgResouce, ImageRepeat.X )

背景图片尺寸

// 1. 对象方式 { width: number, height: number }
// 2. 枚举对象方式 Image.Cover 等比缩放背景图片完全覆盖组件范围
				 Image.Contain 等比缩放
				 Image.Auto 默认原图尺寸
.backgroundImageSize()

调整背景图片在组件内的显示位置

1. 位置坐标： { x: number, y: number}
2. 枚举对象: ALignment
.backgroundImagePosition()

定位

绝对定位

// 参考父组件的左上角计算位置，不保留原本的位置
// 单位 vp
.position( {x: number, y: number} )

绝对定位

// 相对自身组件左上角位置计算位置，保留原本位置
.offset ( {x: number, y: number} )

Z 序控制 （显示优先级）

.ZIndex ( number )

颜色渐变

一、线性渐变

.LinearGradient ({
	具体参数
})
属性描述
angle ( number )设置颜色变化的方向
direction ( GeadientDirection.Right )设置颜色变化的方向。设置后 angle 将无法生效
colors ( [[Color1, number1], [Color2, number2]] )设置颜色变化的列表
repeating ( boolean )是否开启重复着色。开启后在颜色n结束位置 从颜色 1重新渐变到 颜色n

二、径向渐变

radialGradient(){
	center: 径向渐变的中心坐标 number[2] => [ x, y ],
	radius: 径向颜色的半径 number
	colors: 颜色数组
	repeating: 是否着色
}

阴影

.Shadow()
属性描述
redius: (number 设置阴影的半径。
type: (shadowType.Color 设置阴影的类型。Color 颜色、CLUB ??
color: Color阴影的颜色
offsetX offsetY: number设置阴影的偏移量
fill: false设置为 true 时将阴影填充在组件内

多状态样式

.StateStyle({
	pressed: {
		具体的样式
	}
})
状态值描述
normal默认状态
pressed按压状态
disabled禁用状态
focused获取焦点时的状态
cilcked点击时的样式

动画

在通用属性发生变化时，可以通过属性动画实现渐变过渡效果

.animation({})
属性描述
duration: number设置动画的时长。单位 毫秒
curve: Curve.EaseInOut设置动画曲线
delay: number设置动画执行延迟的时间。
iterations: number设置动画播放的次数。 -1 无穷、0 无效果、

图形变换

一，平移( translate() )

img

.translate({x:1, y:1, z:1})

  • x : 正数向右平移的距离

  • y：正数向左平移的距离

  • z：视为 scale() 方法将 xy 设置为相同缩放距离的效果

二，缩放 ( scale() )

.scale({x: 1, y: 1, z: 1, X: 0, Y: 0})

  • x： 将组件的高设置为 height*x

  • y： 将组件的宽设置为 Weight*y

  • z： ？？？？？？？

  • X,Y ： 设置缩放轴中心点坐标 ？？？？

三， 旋转 （ rotate() ）

.rotate({angle: 60， X: 0, Y: 0})
  • angle： 旋转的角度
  • X,Y： ？？？？？？？

样式 && 结构复用

@Extend ( )

拓展指定组件的样式、事件。需定义在 全局。 可传递参数

 注意：  仅可给指定的组件使用

// Extend 参数给要扩展的组件名
// 函数参数给需要传入的参数
@Extend(Text) function extendText(size: number){
	.fontSize(size)
	.onclick(() => {
		...
	})
}

.....

// 可直接当成属性使用
Text('我是一个文本')
.extendText(12)

@Styles

不同于 Extend，Styles 仅可定义通用属性和通用事件 且可以给任意组件使用。 不可传递参数

注意： Styles 的定义分为 全局定义 和在 组件内定义 ( 需写在 struct 中 )。

​ 组件内定义的作用域仅在该组件内， 但是可以使用 状态变量 设置属性

// 全局定义
@Styles function Mystyle(){
	.width('100%')
	.height('100%')
}

// 组件内部定义
@Component
struct Index{
	buider(){
		Column(){
		
		}
		.Mystyle()
		.MyStyleName()
	}
	
	@Styles MyStyleName(){
		.width('100%')
		.height('100%')
	}
}

@Builder

不仅可以抽取属性、事件，可以抽取整个结构。 可传递参数

注意： Builder的定义分为 全局定义 和在 组件内定义 ( 需写在 struct 中 )。组件内定义的作用域仅在该组件内且使用时需加上 this

// 全局 Builder
@Builder function MyBuilder1(title: string){
	// 内部可以有多个组件
	Column(){}
	
	Row(){}
}

@Component
struct component1{
	builder(){
		Column(){
			// 全局 Builder 直接使用
			MyBuilder1()
	
			// 局部的 Builder 使用需加上 this
			this.MyBuilder2()
		}
	}
	
	// 局部 Builder
	@Builder MyBuilder2(title: string){
		Column(){}
		
		Row(){}
	}
}

@Component

自定义组件，功能更强大的 @Builder。

内部的写法与

@Component
struct MyComponent{
	builer(){
	
	}
}

模态转场

binSheet 半模态转场

​ 一个通用方法，可以写在任意位置。

// 控制半模态转场是否开启， 需使用双向绑定否则在关闭时无法修改状态值
@State binSheetShow: boolen = false

// 半模态转场内显示的组件样式
@Builder MyBuilder(){}

Row(){}
.binSheet($$this.binSheeetShow, this.MyBuilder, {
	.height()
	. ...
})

  • 第三个参数对象的具体值

    属性描述
    height/ width ( number )设置半模态转场的宽高
    detents ( number[] ) 设置阶段高度，设置后 height 属性将失效
    dragBar ( boolean )设置是否显示控制条
    showClose ( booelan )是否显示关闭按钮

bindContentCover 全模态转场

属性用法同上

avatar
文章
阅读
粉丝