公共剪切类属性
ArkUI 开发框架提供的组件继承自 CommonMethod，因此 CommonMet 方法中定义的属性是组件的公共属性。在本节中，作者将向读者介绍项目类型中最常见的剪切类属性。读者还可以查看 CommonMethod 的源代码以了解其他切割属性。
export declare class CommonMethod<T> { // 添加遮罩 mask(value: Circle | Ellipse | Path | Rect): T;}
复制代码
遮罩：将指定形状的遮罩添加到当前组件。遮罩的参考系是当前组件的左上角坐标。要使遮罩显示，还必须调用 fill（）方法来添加遮罩颜色。参数描述如下：圆形：添加圆形遮罩，如以下示例所示：
Image($r("app.media.test")) .width(160) .height(90)
Image($r("app.media.test")) .width(160) .height(90) .mask(new Ellipse({width: 160, height: 90}).fill(Color.Pink))
Image($r("app.media.test")) .width(160) .height(90) .mask(new Ellipse({width: 90, height: 90}).fill(Color.Pink))
复制代码
多态样式
设置处于不同状态的零部件的显示样式。目前，仅支持常规属性。StateStyle 定义以下状态：正常：默认情况下设置组件的显示样式。按下：设置组件按下时的显示样式。禁用：设置零部件不可用时的显示样式。聚焦：设置组件获得焦点时的显示样式。单击：设置单击组件时的显示样式。下图显示了一个简单的示例：
Button("Normal Style") .width(180) .height(50)
Button("Custom Style") .width(180) .height(50) .stateStyles({ normal: { // 设置默认情况下的显示样式 .backgroundColor(Color.Blue) }, pressed: { // 设置手指摁下时的显示样式 .backgroundColor(Color.Pink) } })
复制代码
样式样式设置
样式用于提取组件的公共样式，并便于其他组件重用样式。可以在组件内部或外部定义样式。当它们在组件外部定义时，需要添加关键字函数。一个简单的例子如下：
@Styles function btnGlobalPressedStyle() { // 组件外定义的按钮摁下的样式 .backgroundColor(Color.Pink) .width(180) .height(50)}
@Styles function btnGlobalNormalStyle() { // 组件外定义的按钮默认的样式 .backgroundColor(Color.Blue) .width(180) .height(50)}
@Entry @Component struct Index {
@Styles btnPressStyle() { // 组件内定义的按钮摁下的样式 .backgroundColor(Color.Pink) .width(180) .height(50) }
@Styles btnNormalStyle() { // 组件内定义的按钮默认的样式 .backgroundColor(Color.Blue) .width(180) .height(50) }
build() { Column({space: 10}) {
复制代码
### 扩展样式设置在 UI 构建中，如果组件设置的属性相同，例如 Text 组件的 fontColor、fontSize 等设置相同，则可以使用 @Extend 扩展 Text 组件并提取相同的属性，这可以有效地减少代码量。一个简单的例子如下：
@Extend(Text) function textStyle(size: number = 20, color: ResourceColor = Color.Black, bgColor: ResourceColor = Color.Pink) { .fontSize(size) .fontColor(color) .backgroundColor(bgColor) .fontStyle(FontStyle.Italic) .fontWeight(FontWeight.Bold)}
@Entry @Component struct Test {
build() { Column({ space: 10 }) { Text("Extend") .textStyle()
Text("Extend") .textStyle(30, Color.Brown, "#aabbcc") } .width('100%') .height("100%") .padding(10) }}
复制代码
线性布局容器
线性容器类表示在水平或垂直方向列出子组件的容器。ArkUI 开发框架使用行和列来实现线性布局。主轴和纵轴是什么？对于线性容器，有两个主轴和垂直轴。如果布局沿水平方向，主轴表示水平方向，纵轴表示垂直方向；如果布局在垂直方向，则主轴在垂直方向上，垂直轴在水平方向上。行沿水平方向布置子部件，主轴沿水平方向，垂直轴沿垂直方向。
interface RowInterface { (value?: { space?: string | number }): RowAttribute;}
复制代码
值：可选参数。空格表示行的子组件在水平方向上的间距。一个简单的例子如下：AlignItems：参数类型为 VerticalAlign，表示子组件的垂直布局。其中，VerticalAlign 定义了以下三种方法：顶部：设置子组件在垂直方向上的顶部对齐。居中（默认）：将子构件设置为垂直居中。底部：设置子组件在垂直方向上的底部对齐。
Row() { Text("Top") .fontSize(26) .backgroundColor("#aabbcc")}.alignItems(VerticalAlign.Top) // 设置子组件在竖直方向顶部对齐.borderWidth(2).borderColor(Color.Pink).width('100%').height(60)
Row() { Text("Center") .fontSize(26) .backgroundColor("#aabbcc")}.alignItems(VerticalAlign.Center) // 设置子组件在竖直方向居中对齐.borderWidth(2).borderColor(Color.Pink).width('100%').height(60)
Row() { Text("Bottom") .fontSize(26) .backgroundColor("#aabbcc")}.alignItems(VerticalAlign.Bottom) // 设置子组件在竖直方向底部对齐.borderWidth(2).borderColor(Color.Pink).width('100%').height(60)
复制代码
JustifyContent：设置子组件的水平对齐方式。FlexAlign 定义了以下类型：开始：元素在主轴的顶端对齐，第一个元素与线条的顶端对齐；随后的元素与上一个对齐。中心：元素在主轴方向的中心对齐。第一个元素与行的开头之间的距离与最后一个元素与行尾之间的距离相同。结束：元素在主轴的末端对齐，最后一个元素在直线末端对齐，其他元素在直线的末端对齐。间距：弹性元件在主轴方向上均匀分布，相邻元件之间的距离相同。第一个元素与行的开头对齐，最后一个元素与行尾对齐。间隔环绕：弹性元件在主轴方向上均匀分布，相邻元件之间的距离相同。从第一个元素到行的开头的距离和从最后一个元素到行尾的距离是相邻元素之间距离的一半。间距均匀：相邻元素之间的间距、第一个元素和行首之间的间距以及最后一个元素到行尾的间距都相同。
计数器组件
ArkUI 开发框架提供了 Counter 组件来实现计数器功能。计数器使用场景非常常见。例如，购物应用程序在添加或减少商品时使用计数器。它可以包括子组件。在本节中，作者简要介绍了计数器的使用。由源码可知，Counter 使用时暂不需要配置额外参数。
下拉刷新（Refresh）
下拉刷新也是一个非常常见的功能。例如，我们可以在浏览新闻时下拉并刷新最新信息。ArkUI 开发框架为我们提供了一个下拉刷新组件：Refresh，它使用简单。它可以用于将 Refresh 外包给需要下拉和刷新的组件。 interface RefreshInterface { (value: { refreshing: boolean; offset?: number | string; friction?: number | string }): RefreshAttribute; }
刷新：控件是否显示刷新动画，默认情况下不显示偏移：下拉的偏移。当下拉距离超过该值时，控件将进入刷新状态摩擦力：下拉时的阻力系数。值越大，下拉距离越小
@Entry @Component struct Index {
@State refreshing: boolean = false;
build() { Column({space: 10}) { Refresh({ refreshing: this.refreshing }) { Text(this.refreshing ? "Refreshing" : "Refreshed") .width('100%') .fontSize(26) .height(100) .textAlign(TextAlign.Center) .backgroundColor('#aabbcc') } .width('100%') .height(100) Row({space: 10}) { Button('Start') .onClick(() => { this.refreshing = true; })
Button('Stop') .onClick(() => { this.refreshing = false; }) } } .width('100%') .height('100%') }}
复制代码
运行结果如下
评论