基于鸿蒙系统的ArkUI框架的公共剪切类属性和多态样式在前后端分离项目中的表现

CodeJourney
213 阅读6分钟

@持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第22天，点击查看活动详情

公共剪切类属性

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%')
  }
}

运行结果如下 在这里插入图片描述

avatar
文章
阅读
粉丝