【HarmonyOS 5.0】第十二篇-ArkUI公共属性(一)

news2024/12/26 1:25:38

一、公共样式类属性

ArkUI框架提供的基础组件直接或者间接的继承自 CommonMethod ， CommonMethod 中定义的属性样式属于公共样式。下面就来学习这些样式

1.1.尺寸设置

  • 宽高设置

设置组件的宽高，缺省时使用组件自身内容的宽高，比如充满父布局可以使用 string 值：“100%”，当组件同时设置 size 和 width / height 时，以最后设置的值为准。

@Entry
@Component
struct TextExample {
  build() {
    Column({space:10}){
      Text()
        .size({width:220, height:25}) //设置宽高
        .width(120)                   //设置宽度，会覆盖上面的宽度
        .height(25)                   //设置高度，会覆盖上面的高度
        .backgroundColor("#8EE5EE")   //设置背景色

      Text()
        .width("100%")                //设置宽度
        .height(10)                   //设置高度
        .backgroundColor("#CD5555")   //设置背景色

      Text()
        .width(200)                   //设置宽度
        .height(200)                  //设置宽度
        .size({width:120, height:25}) //设置宽高、覆盖前边的值
        .backgroundColor("#8B0000")   //设置背景
    }
    .size({width:"100%", height:"100%"})

  }
}

预览效果如下：

img

如果子组件的宽高大于父组件的宽高，默认情况下子组件会绘制出父组件的可视范围，此时可以设置 clip(true) 方法限制子组件超出父组件的范围，样例如下所示：

@Entry
@Component
struct TextExample02 {
  build() {
    Column({space:50}){
      Column(){
        Text("高度超出父组件")
          .width(120)
          .height(120) //高度超出父组件
          .fontColor(Color.White)
          .backgroundColor("#00EE76")
      }
      .width(300)
      .height(100)
      .backgroundColor("#8B8386")


      Column(){
        Text("高度超出父组件")
          .width(120)
          .height(120)
          .fontColor(Color.White)
          .backgroundColor("#8B7E66")
      }
      .width(300)
      .height(100)
      .backgroundColor("#FF6A6A")
      .clip(true) // 设置父组件对于超出范围的子组件做剪切处理

    }
    .width("100%")
    .height("100%")
    .padding(20)
  }
}

预览效果如下：

img

  • 宽高比设置

设置组件的宽高比：aspectRatio = width / height，在设备适配上比较实用。

@Entry
@Component
struct AspectRationExample {
  build() {
    Column({space:10}){
      Row({space:10}){
        //1:1
        Text().width(50).height(50).backgroundColor("#FF4040")

        //1:1
        Text().width(50).backgroundColor("#FF4040").aspectRatio(1) //设置宽高比

        //1.5:1
        Text().width(50).backgroundColor("#FF4040").aspectRatio(1.5) //设置宽高比

        // 0.5:1 = 50: 100
        Text().width(50).backgroundColor("#FF4040").aspectRatio(0.5) //设置宽高比
        //和上面的效果一样
        //Text().width(50).height(100).backgroundColor("#FF4040")

        // 宽和高的比例，50：100， 宽是高的0.5倍
        Text().height(100).backgroundColor("#FF4040").aspectRatio(0.5)

      }
      .padding(10).size({width:"100%", height:120})
    }
    .padding(10)
    .size({width:"100%", height:"100%"})
  }
}

预览效果如下：

img

  • 边距设置

盒模型作为前端布局中最简单，也最重要的一项布局方式，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。CSS盒模型：标准模型 + IE模型

img

盒模型包括：

  • 内容（content）：元素中显示的文本，图片等实际内容。
  • 内边距（padding）：内容和边框之间的空白区域。
  • 边框（border）：围绕内容和内边距的线条或图案。
  • 外边距（margin）：边框和其他元素之间的空白区域。

标准模型和IE模型的区别计算宽度和高度的不同：

  • 标准盒模型：盒子总宽度/高度 = width/height + padding + border + margin。（ 即 width/height 只是内容高度，不包含 padding 和 border 值 ）
  • IE盒子模型：盒子总宽度/高度 = width/height + margin = (内容区宽度/高度 + padding + border) + margin。（ 即 width/height 包含了 padding 和 border 值 ）

在HarmonyOS4.0中，盒模型也是类似的，代码如下

@Entry
@Component
struct BoxExample {
  build() {
    Row(){  // 创建一个水平布局的Row组件

      Text("盒子模型")  // 显示文本内容为“盒子模型”
        .height("100vp")  // 设置高度为视口宽度的百分之百
        .width("100vp")  // 设置宽度为视口宽度的百分之百
        .margin({left:"10vp", top:"30vp", right:"50vp", bottom:"70pv"})  // 设置外边距
        .border({width:"10px", style: BorderStyle.Solid, color: "#0000ff"})  // 设置边框样式
        .padding(30)  // 设置内边距
        .backgroundColor("#00ff00")  // 设置背景颜色为绿色
        .textAlign(TextAlign.Center)  // 设置文本水平居中对齐
    }.backgroundColor("#ff0000")  // 设置Row组件的背景颜色为红色
  }
}

预览效果如下：

img

在双向预览中查看盒模型构成，如下：

img

设置组件的内边距/外边距，当只设置一个值时表示对四个方向的边距同时生效；参数类型为 Padding / Margin 时，可单独设置边距，若设置为百分比时，上下左右内外距均以父容器的 width 作为基础值。案例代码如下：

@Entry
@Component
struct BoxExample02 {
  build() {
    Row(){
      Column(){
        Row(){
          Text()
            .width("100%")               //设置宽度充满父组件
            .height("100%")              //设置高度充满父组件
            .backgroundColor("#EE799F")  //设置背景色
        }
        .padding(20)                    //设置四个边距
        .backgroundColor("#FFF0F5")     //设置背景色
        .size({width:80, height:80})    //设置宽和高尺寸

        Row(){
          Text()
            .width("100%")                              //设置宽度充满父组件
            .height("100%")                             //设置高度充满父组件
            .backgroundColor("#EE799F")                 //设置背景色
        }
        .padding({left:5, top: 20, right:5,bottom:20})  //设置四个边距
        .backgroundColor("#FFF0F5")                     //设置背景色
        .size({width:80, height:80})                    //设置宽和高尺寸
        .margin(30)                                     //设置外边距，否则两个Row容器会挤在一起

      }
      .size({width:"100%",height:"100%"})
      .backgroundColor("#54FF9F")
    }
  }
}

预览效果如下：

img

  • 权重设置

设置组件的布局权重，该属性仅在 Row、Column、Flex 布局中生效，表示在父容器主轴方向上的尺寸按照权重比进行分配，默认值为 0。

@Entry
@Component
struct WeightSettings {
  build() {
    Column({space:20}){
      Row(){ //下面两个Text子组件全都设置了权重，则子组件的宽度按照权重比例分配
        Text()
          .height(30)
          .backgroundColor("#F4A460")
          .layoutWeight(1)

        Text()
          .height(30)
          .backgroundColor("#5F9EA0")
          .layoutWeight(1)
      }

      Row(){ //子组件全都设置了权重，则子组件的宽度按照权重比例分配，子组件设置的宽度无效
        Text()
          .width(80)
          .height(30)
          .backgroundColor("#F4A460")
          .layoutWeight(1)

        Text()
          .width(150)
          .height(30)
          .backgroundColor("#5F9EA0")
          .layoutWeight(1)
      }


      Row(){ // 除去无权重子组件的宽度，剩余子组件的宽度按照权重比例分配
        Text()
          .width(150)
          .height(30)
          .backgroundColor("#228B22")

        Text()
          .width(150)
          .height(30)
          .backgroundColor("#F4A460")
          .layoutWeight(1)

        Text()
          .width(120)
          .height(30)
          .backgroundColor("#5F9EA0")
          .layoutWeight(2)
      }


    }
    .size({width:"100%", height:"100%"})
    .padding({top:20, bottom:20})
  }
}

本样例中， Row 的每个子组件都设置了权重为 1 ，表示均分父组件的宽度，此时子组件设置的 width 是不起作用的，样例运行结果如下图所示：预览效果如下：

img

  • 尺寸约束

设置组件的约束尺寸从而在组件布局时对其尺寸进行限制，constraintSize() 的优先级高于 width() 和 height()，若设置的 minWidth 大于 maxWidth，则 minWidth 生效，minHeight 与 maxHeight 同理。

@Entry
@Component
struct SizeConstraints {
  build() {
    Column({space:20}){

      Text() // 目标参照组件
        .width(220)
        .height(40)
        .backgroundColor("#aabbcc")

      Text() // 设置约束尺寸
        .width(220)
        .height(40)
        .constraintSize({
          minWidth: 120,
          minHeight: 20
        })
        .backgroundColor("#bbccaa")

      Text() // 设置过最大约束尺寸,实际宽和高超过了，则按照约束显示
        .width(220)
        .height(40)
        .constraintSize({
          maxWidth: 120,
          maxHeight: 20
        })
        .backgroundColor("#bbccaa")

    }
    .size({width:"100%",height:"100%"})
  }
}

预览效果如下：

img

1.2.位置设置

  • 对齐方式

设置元素内容的对齐方式，当设置的 width 和 height 大小超过元素本身内容大小时生效。

@Entry
@Component
struct PositionSetting {
  build() {
    Column({space:20}){
      Text("align")  //默认样式
        .fontSize(20)
        .backgroundColor("#90EE90")

      Text("align")  //组件尺寸默认等于内容尺寸
        .fontSize(20)
        .backgroundColor("#90EE90")
        .align(Alignment.TopStart) //组件尺寸默认等于内容尺寸，不符合要求

      Text("align")
        .fontSize(20)
        .backgroundColor("#90EE90")
        .align(Alignment.TopStart)        //设置内容对齐方式
        .size({width: 200, height: 60})   //组件尺寸大于内容尺寸，符合条件

    }
    .size({width:"100%", height:"100%"})
    .padding(20)
  }
}

预览效果如下：

img

  • 布局方向

设置子组件在水平方向上的布局方式，Direction 定义了一下 3 种布局方式：

  • Ltr：元素从左到右布局。
  • Rtl：元素从右到左布局。
  • Auto（默认值）：使用系统默认布局方向。

案例代码如下：

@Entry
@Component
struct DirectionExample {
  build() {
    Column({space:20}){
      Row({space:10}){ //不设置子组件的对齐方式时采用默认值
        Text("1").height(50).width("25%").fontSize(18).backgroundColor("#AABBCC")

        Text("2").height(50).width("25%").fontSize(18).backgroundColor("#8B658B")

        Text("3").height(50).width("25%").fontSize(18).backgroundColor("#008B8B")
      }
      .width("90%")
      .backgroundColor("#E0FFFF")

      Row({space:10}){ //不设置子组件的对齐方式时采用默认值
        Text("1").height(50).width("25%").fontSize(18).backgroundColor("#AABBCC")

        Text("2").height(50).width("25%").fontSize(18).backgroundColor("#8B658B")

        Text("3").height(50).width("25%").fontSize(18).backgroundColor("#008B8B")
      }
      .width("90%")
      .backgroundColor("#E0FFFF")
      .direction(Direction.Rtl)

    }
    .width('100%')
    .height("100%")
    .padding(20)
  }

预览效果如下：

img

  • 绝对定位

设置当前组件在父组件中的位置，参照点为父容器顶点位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。

@Entry
@Component
struct DirectionExample {
  build() {
    Column({space:20}){
      Row({space:10}){ //不设置子组件的对齐方式时采用默认值
        Text("1").height(50).width("25%").fontSize(18).backgroundColor("#AABBCC")

        Text("2").height(50).width("25%").fontSize(18).backgroundColor("#8B658B")

        Text("3").height(50).width("25%").fontSize(18).backgroundColor("#008B8B")
      }
      .width("90%")
      .backgroundColor("#E0FFFF")

      Row({space:10}){ //不设置子组件的对齐方式时采用默认值
        Text("1")
          .height(50)
          .width("25%")
          .fontSize(18)
          .backgroundColor("#8B0000")
          .position({x:200,y:0}) //使用绝对定位，设置组件位置

        Text("2").height(50).width("25%").fontSize(18).backgroundColor("#8B658B")

        Text("3").height(50).width("25%").fontSize(18).backgroundColor("#008B8B")
      }
      .width("90%")
      .backgroundColor("#E0FFFF")
      .direction(Direction.Rtl)

    }
    .width('100%')
    .height("100%")
    .padding(20)
  }
}

postion 属性会更改子组件的布局结构，预览效果如下，第二行的第一个text组件设置了位置，：

img

  • 相对定位

设置当前组件在父组件中的位置，参照点为自身顶点位置。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。

@Entry
@Component
struct DirectionExample {
  build() {
    Column({space:20}){
      Row({space:10}){ //不设置子组件的对齐方式时采用默认值
        Text("1").height(50).width("25%").fontSize(18).backgroundColor("#AABBCC")

        Text("2").height(50).width("25%").fontSize(18).backgroundColor("#8B658B")

        Text("3").height(50).width("25%").fontSize(18).backgroundColor("#008B8B")
      }
      .width("90%")
      .backgroundColor("#E0FFFF")

      Row({space:10}){
        Text("1")
          .height(50)
          .width("25%")
          .fontSize(18)
          .backgroundColor("#8B0000")
          .offset({x:10,y:50}) //使用相对定位(相对之前的位置，参照点为自身顶点位置)，设置组件位置

        Text("2").height(50).width("25%").fontSize(18).backgroundColor("#8B658B")

        Text("3").height(50).width("25%").fontSize(18).backgroundColor("#008B8B")
      }
      .width("90%")
      .backgroundColor("#E0FFFF")
      .direction(Direction.Rtl)

    }
    .width('100%')
    .height("100%")
    .padding(20)
  }
}

offset 属性只更改组件自身的布局结构。下面的text组件1,设置了相对定位，预览效果如下：

img

  • 锚点设置

设置元素在位置定位时的锚点，以自身顶点位置作为基准点进行偏移。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。

@Entry
@Component
struct DirectionExample {
  build() {
    Column({space:20}){
      Row({space:10}){ //不设置子组件的对齐方式时采用默认值
        Text("1").height(50).width("25%").fontSize(18).backgroundColor("#AABBCC")

        Text("2").height(50).width("25%").fontSize(18).backgroundColor("#8B658B")

        Text("3").height(50).width("25%").fontSize(18).backgroundColor("#008B8B")
      }
      .width("90%")
      .backgroundColor("#E0FFFF")

      Row({space:20}){
        Text("1")
          .height(50)
          .width("25%")
          .fontSize(18)
          .backgroundColor("#8B0000")
          .markAnchor({x:20,y:20}) //以自身顶点位置作为基准点进行偏移

        Text("2").height(50).width("25%").fontSize(18).backgroundColor("#8B658B")

        Text("3").height(50).width("25%").fontSize(18).backgroundColor("#008B8B")
      }
      .width("90%")
      .backgroundColor("#E0FFFF")

    }
    .width('100%')
    .height("100%")
    .padding(20)
  }
}

markAnchor 属性只更改组件自身的布局结构，预览效果如下：

img

  • 约束条件（可以参考，相对定位容器里面的内容）

设置子组件在父组件 RelativeContainer 中的对齐方式，分为水平对齐规则和竖直对齐规则，分别说明如下：

  • 水平对齐规则
    • left： 设置左对齐参数。
    • middle： 设置中间对齐的参数。
    • right： 设置右对齐参数。
  • 竖直对齐规则
    • top： 设置顶部对齐的参数。
    • bottom： 设置底部对齐的参数。
    • center： 设置中心对齐的参数。

参考相对容器布局里面的内容。

1.3.背景设置

  • 背景色设置

设置组件的背景颜色， ResourceColor 类型支持 Color | number | string | Resource 四种：

Color颜色枚举值。
numberHEX格式颜色，支持rgb。示例：0xffffff。
stringrgb或者rgba格式颜色。示例：‘#ffffff’, ‘#ff000000’, ‘rgb(255, 100, 255)’, ‘rgba(255, 100, 255, 0.5)’。
Resource使用引入资源的方式，引入系统资源或者应用资源中的颜色。

案例代码如下：

@Entry
@Component
struct ColorExample {
  build() {
    Row({space:20}) {
      Text()
        .height(30)
        //string
          //
          // rgb或者rgba格式颜色。
          // 示例：'#ffffff', '#ff000000', 'rgb(255, 100, 255)', 'rgba(255, 100, 255, 0.5)'。
        .backgroundColor("#CD3333")
        .layoutWeight(1)

      Text()
        .height(30)
        //number HEX格式颜色，支持rgb
        .backgroundColor(2055151)
        .layoutWeight(1)

      Text()
        .height(30)
        //颜色枚举值
        .backgroundColor(Color.Pink)
        .layoutWeight(1)

      Text()
        .height(30)
        .layoutWeight(1)
        //Resource 使用引入资源的方式，引入系统资源或者应用资源中的颜色
        .backgroundColor($r("sys.color.ohos_id_color_warning_dark"))

    }
    .width("100%")
    .padding(30)
  }
}

预览效果如下：

img

  • 背景图设置

设置组件的背景图片，repeat 参数可以设置图片的填充模式，例如代码下所示：

@Entry
@Component
struct ColorExample02 {
  build() {
    Column(){

      Text("背景图片设置")
        .fontSize(30)                                //字体大小
        .fontColor(Color.Red)                        //字体颜色
        .size({width:220, height:100})               //设置宽和高
        .backgroundImage($r('app.media.WATCHGT4'))   //设置组件的背景图片
        .textAlign(TextAlign.Center)
        .fontWeight(FontWeight.Bold)
    }
    .width("100%")
    .padding(30)
  }
}

预览效果如下：

img

1.4.边框设置

  • 边框样式

设置组件的边框样式，支持设置边框颜色、边框粗细、边框圆角以及边框的展示样式。同时设置 border 和 borderXXX ，以最后设置的值为准。

@Entry
@Component
struct BorderExample {
  build() {
    // 创建一个Column组件，设置间距为20
    Column({space:20}){
      // 创建一个Text组件，设置高度为80，宽度为160
      Text()
        .height(80)
        .width(160)
        // 通过参数设置边框样式
        .border({
          color:Color.Orange,        // 边框颜色为橙色
          width:5,                   // 边框宽度为5
          radius: 0,                 // 边框圆角半径为0，即直角
          style: BorderStyle.Solid   // 边框样式为实线
        })

      // 创建另一个Text组件，设置高度为80，宽度为160
      Text()
        .height(80)
        .width(160)
        // 通过属性设置边框样式
        .borderWidth(5)                  // 边框宽度为5
        .borderColor(Color.Orange)       // 边框颜色为橙色
        .borderRadius(15)                // 边框圆角半径为15
        .borderStyle(BorderStyle.Dotted) // 边框样式为点状线
    }
    // 设置Column组件的宽度为100%，内边距为30
    .width("100%")
    .padding(30)
  }
}

预览代码如下：

img

1.5：显隐设置

  • 显示和隐藏设置

设置组件的显示和隐藏， Visibility 类型说明如下：

  • Visible（默认值）：组件显示在页面上。
  • Hidden：组件在屏幕上占位但是不显示。
  • None：组件在屏幕上不显示也不占用位置。

简单样例如下图所示：

@Entry
@Component
struct VisibilityExample {
  build() {
    Column({space:20}){
      Row(){
        Text()
          .height(30)
          .width(120)
          .backgroundColor("#AABBCC")
          .layoutWeight(1)

        Text()
          .height(30)
          .width(120)
          .backgroundColor("#2E8B57")
          .visibility(Visibility.Visible) //设置为Hidden，虽然不在界面显示，但是还占着位置
          .layoutWeight(1)

        Text()
          .height(30)
          .backgroundColor("#CD8C95")
          .layoutWeight(1)
      }

      Row(){
        Text()
          .height(30)
          .width(120)
          .backgroundColor("#AABBCC")
          .layoutWeight(1)

        Text()
          .height(30)
          .width(120)
          .backgroundColor("#2E8B57")
          .visibility(Visibility.Hidden) //设置默认值Visible
          .layoutWeight(1)

        Text()
          .height(30)
          .backgroundColor("#CD8C95")
          .layoutWeight(1)
      }

      Row(){
        Text()
          .height(30)
          .width(120)
          .backgroundColor("#AABBCC")
          .layoutWeight(1)

        Text()
          .height(30)
          .width(120)
          .backgroundColor("#2E8B57")
          .visibility(Visibility.None) //设置为None就不会在界面上显示
          .layoutWeight(1)

        Text()
          .height(30)
          .backgroundColor("#CD8C95")
          .layoutWeight(1)
      }


    }
    .width("100%")
    .padding(30)
  }
}

预览效果如下：

img

  • 显示优先级设置

设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏，该属性仅在Row 、Column、和 Flex(单行) 容器组件中生效。

class ChildInfo {
  text: string = '';
  priority: number = 0;
}

class ContainerInfo {
  label: string = '';
  size: string = '';
}


@Entry
@Component
struct DisplayPriorityExample {
  @State currentIdx: number = 0

  private children: ChildInfo[] = [
    { text: '1\n(优先项:2)', priority: 2 },
    { text: '2\n(优先项:1)', priority: 1 },
    { text: '3\n(优先项:3)', priority: 3 },
    { text: '4\n(优先项:5)', priority: 5 },
    { text: '5\n(优先项:4)', priority: 4 }
  ]

  // 显示容器大小
  private container: ContainerInfo[] = [
    { label: 'Big container', size: '100%' },
    { label: 'Middle container', size: '50%' },
    { label: 'Small container', size: '25%' }
  ]

  build() {
    Column({space:20}){
      Flex({justifyContent: FlexAlign.SpaceBetween}){
        ForEach(this.children,(item:ChildInfo)=>{
          Text(item.text)
            .width(60)
            .height(160)
            .fontSize(20)
            .fontColor(Color.White)
            .textAlign(TextAlign.Center)
            .backgroundColor("#CD8C95")
            .displayPriority(item.priority)//使用displayPriority给子组件绑定显示优先级,数字越大优先级越高
        })
      }
      .width(this.container[this.currentIdx].size) //通过变量设置Flex父容器宽度
      .backgroundColor("#778899")

      Button(this.container[this.currentIdx].label) //切换父容器大小
        .backgroundColor("#66CDAA")
        .onClick(()=>{
          //点击后修改currentIdx的值为     (currentIdx+1)/3 取余数   1
          this.currentIdx = (this.currentIdx + 1) % this.container.length
        })
    }
    .width("100%")
    .padding(20)
  }
}

当父容器空间不足的时候。只会展示优先级高的子组件，优先级底的子组件会自动隐藏，如下：

img

1.6.多态样式

  • 多种状态样式设置

设置组件在不同状态下的显示样式，目前只支持通用属性， StateStyle 有以下几种状态：

  • normal：设置组件默认情况下的显示样式。
  • pressed：设置组件按下时的显示样式。
  • disabled：设置组件不可用时的显示样式。
  • focused：设置组件获取焦点时的显示样式。
  • clicked：设置组件点击时的显示样式。

案例代码如下：

@Entry
@Component
struct StateStylesExample {
  build() {
    Column({space:20}){
      Button("按钮1")
        .width(200)
        .height(50)

      Button("按钮2")
        .width(200)
        .height(50)
        .stateStyles({
          normal:{
            .backgroundColor(Color.Blue) //设置默认情况下的显示样式
          },
          pressed:{
            .backgroundColor(Color.Red) //设置手指按下的显示样式
          }
        })

    }
    .width("100%")
    .padding({top:30,bottom:30})
  }
}

会发现上面的代码，给按钮2设置，点击的时候会变成红色，预览效果如下：

img

  • @Styles样式设置

@Styles 作用是提取组件的公共样式，方便其他组件复用样式，它可以定义在组件内部或者组件外部，当定义在组件外部时需要添加 funcition 关键字，简单样例如下所示：

@Styles function buttonGlobalNormalStyles(){ //组件外定义按钮默认的样式
  .backgroundColor("#43CD80")
  .width(200)
  .height(50)
}

@Styles function buttonGlobalPressedStyles(){ //组件外定义按钮摁下的样式
  .backgroundColor("#FF7F50")
  .width(200)
  .height(50)
}


@Entry
@Component
struct StylesExample {
    @Styles buttonNormalStyles(){ //组件内定义按钮默认的样式
      .backgroundColor("#8B8682")
      .width(200)
      .height(50)
    }

    @Styles buttonPressedStyles(){ //组件内定义按钮摁下的样式
      .backgroundColor("#FF6347")
      .width(200)
      .height(50)
    }

  build() {
    Column({space:20}){
      Button("默认样式")
        .width(200)
        .height(50)

      Button("组件外样式")
        .stateStyles({
          normal:buttonGlobalNormalStyles, //使用组件外定义的按钮默认的样式
          pressed:buttonGlobalPressedStyles //使用组件外定义的按钮摁下的样式
        })

      Button("组件内样式")
        .stateStyles({
          normal:this.buttonNormalStyles, //使用组件内定义的按钮默认的样式
          pressed:this.buttonPressedStyles //使用组件内定义的按钮摁下的样式
        })

    }
    .width("100%")
    .padding({top:30,bottom:30})
  }
}

预览效果如下：

img

  • @Extend样式设置

在 UI 构建中，如果组件设置的属性都是相同的，比如 Text 组件的 fontColor、fontSize 等设置都一致，那么可以使用 @Extend 对 Text 组件进行扩展，提取相同的属性部分，这样可以有效降低代码量。简单样例如下所示：

@Extend(Text) // 使用@Extend装饰器扩展Text组件的样式
function textStyle(size:number=20, color:ResourceColor=Color.Orange,bgColor:ResourceColor=Color.Pink){
  .fontSize(size) // 设置字体大小为参数指定的大小
  .fontColor(color) // 设置字体颜色为参数指定的颜色
  .backgroundColor(bgColor) // 设置背景颜色为参数指定的颜色
  .fontStyle(FontStyle.Italic) // 设置字体样式为斜体
  .fontWeight(FontWeight.Bold) // 设置字体粗细为粗体
  .width(220) // 设置宽度为220
  .height(110) // 设置高度为110
  .textAlign(TextAlign.Center) // 设置文本对齐方式为居中
}

@Entry // 使用@Entry装饰器标识为入口文件
@Component // 使用@Component装饰器标识为组件
struct ExtendExample { // 定义名为ExtendExample的结构体
  build() { // 定义build方法
    Column({space:20}){ // 使用Column组件，设置间距为20
      Text("Extend").textStyle() // 使用Text组件并应用textStyle函数定义的样式
      Text("Extend").textStyle(35, "#2F4F4F", "#FFE4E1") // 使用Text组件并应用textStyle函数定义的样式，传入自定义的参数
    }
    .width('100%') // 设置宽度为100%
    .height("100%") // 设置高度为100%
    .padding(10) // 设置内边距为10
  }
}

@Extend 装饰器不能定义在 struct 内部，暂时无法在其它页面引入 Extend 样式。预览效果如下：

img

1.7.渐变颜色

设置组件的渐变样式，参数如下：

  • angle：设置渐变的角度。

  • direction：设置渐变方向，是angle的抽象

  • colors：渐变颜色数组

  • repeating：是否重复渲染。

示例代码如下：

.linearGradient({
  angle: 180, // 设置渐变角度
  colors: [['#BDE895', 0.1], ["#95DE7F", 0.6],  ["#7AB967", 1]] // 设置渐变颜色
})

组件渐变色方向旋转 180° ，在 [0 ~ 0.1] 区间渐变色为 #BDE895，在 [0.1, 0.6] 区间渐变色由 #BDE895 线性渐变成 #95DE7F ，在 [0.6, 1.0] 区间渐变色由 #95DE7F 线性渐变成 #7AB967 。如下图：

img

案例代码如下：

@Entry
@Component
struct LinearGradientExample {
  build() {
    // 创建一个Column组件，设置间距为30
    Column({space:30}){
      // 创建一个Text组件，设置宽度为240，高度为50，布局权重为1
      Text()
        .size({width:240, height: 50})
        .layoutWeight(1)
        // 设置线性渐变样式
        .linearGradient({
          angle:90, // 渐变角度为90度
          colors: [["#EE6363",0.1],["#CD5555",0.6],["#8B3A3A",1]] // 渐变颜色和位置
        })

      // 创建另一个Text组件，设置宽度为240，高度为50，布局权重为1
      Text()
        .size({width:240, height: 50})
        .layoutWeight(1)
        // 设置线性渐变样式
        .linearGradient({
          angle:135, // 渐变角度为135度
          colors: [["#8470FF",0.1],["#7B68EE",0.4],["#6A5ACD",0.7],["#483D8B",1]] // 渐变颜色和位置
        })

    }
    // 设置Column组件的宽度为100%，高度为100%，内边距为20
    .width("100%")
    .height("100%")
    .padding(20)
  }
}

预览效果如下：

img

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2265556.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据库系统原理：数据库安全性与权限控制

数据库系统原理：数据库安全性与权限控制

2.1vue技术 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项…
阅读更多...
SQL语句整理五-StarRocks

SQL语句整理五-StarRocks

文章目录 查看版本号：SPLIT：insert 和 update 结合 select：报错：1064 - StarRocks planner use long time 3000 ms in memo phase：字段增删改： 查看版本号： select current_version(); current…
阅读更多...
Uniapp 手机基座调试App 打包成Apk文件，并上传到应用商店

Uniapp 手机基座调试App 打包成Apk文件，并上传到应用商店

1.Uniapp手机基座调试App。 1.1 以下是我另一篇文章 讲解 uniapp连接手机基座调试App、 Hbuildx使用SUB运行到手机基座测试_hbuilder基座-CSDN博客 2.打包本地的uniapp项目为apk文件。 打包的方式有很多种，我们可以选择本地打包和远程云端打包两种方式。 我们在打包…
阅读更多...
UEFI 多任务

UEFI 多任务

一般而言，UEFI 的主要作用是检测和初始化设备，加载操作系统的引导程序，然后将控制权交给操作系统，整个过程不需要大量的运算，在单个 CPU 核上运行单线程程序已经可以满足需求，因此，EDK2 没有提供…
阅读更多...
人工智能与物联网：从智慧家居到智能城市的未来蓝图

人工智能与物联网：从智慧家居到智能城市的未来蓝图

引言：未来已来，智能化的世界 想象一下，一个早晨，智能闹钟根据你的睡眠状态自动调整叫醒时间，咖啡机早已备好热腾腾的咖啡，窗帘缓缓拉开，迎接清晨的阳光。这不是科幻小说中的场景，而是…
阅读更多...
【从零开始入门unity游戏开发之——unity篇01】unity6基础入门开篇——游戏引擎是什么、主流的游戏引擎、为什么选择Unity

【从零开始入门unity游戏开发之——unity篇01】unity6基础入门开篇——游戏引擎是什么、主流的游戏引擎、为什么选择Unity

文章目录 前言**游戏引擎是什么？****游戏引擎对于我们的意义**1、**降低游戏开发的门槛**2、**提升游戏开发效率** **以前做游戏****现在做游戏****主流的游戏引擎有哪些？**Unity 相比其他游戏引擎的优势？**为什么选择Unity？**Uni…
阅读更多...
Xcode 16 编译弹窗问题、编译通过无法，编译通过打包等问题汇总

Xcode 16 编译弹窗问题、编译通过无法，编译通过打包等问题汇总

问题1：打包的过程中不断提示 ：codesign 想要访问你的钥匙串中的密钥“develop 或者distribution 证书” 解决：打开钥匙串，点击证书---显示简介---信任----改为始终信任 （记住 ：不能只修改钥匙的显示简介的…
阅读更多...
RabbitMQ中的Topic模式

RabbitMQ中的Topic模式

在现代分布式系统中，消息队列（Message Queue）是实现异步通信、解耦系统组件的重要工具。RabbitMQ 是一个广泛使用的开源消息代理，支持多种消息传递模式，其中 Topic 模式 是一种灵活且强大的模式，允许生产者…
阅读更多...
OpenEuler 22.03 安装 flink-1.17.2 集群

OpenEuler 22.03 安装 flink-1.17.2 集群

零：规划 本次计划安装三台OpenEuler 22.03 版本操作系统的服务器，用于搭建 flink 集群。这里使用flink1.17.2 的原因，是便于后续与springboot的整合 服务器名IP地址作用其他应用flink01192.168.159.133主jdk11、flink-1.17.2flink02192.168.…
阅读更多...
国标GB28181公网直播EasyGBS与国标GB28181协议融合，助力应急救援指挥无线视频监控系统建设

国标GB28181公网直播EasyGBS与国标GB28181协议融合，助力应急救援指挥无线视频监控系统建设

随着信息技术的飞速发展，视频监控领域正经历从传统安防向智能化、网络化安防的深刻转变。在这一转变过程中，国标GB28181协议以其强大的功能和广泛的应用场景，成为了公共安全视频监控联网系统的核心标准。 应急救援指挥系统要求能够迅速响应各…
阅读更多...
VisionPro开发使用交互反馈系统(Affordance System)

VisionPro开发使用交互反馈系统(Affordance System)

XR Interaction Toolkit 提供了一个affordance system 可供性系统，使用户能够创建对交互状态的视觉和听觉反馈。一般的信息流从向Affordance State Provider场景中添加一个（通常是可交互的）并将其指向我们要监视其交互状态的可交互对象开始。…
阅读更多...
SpringCloud 入门（4）—— 网关

SpringCloud 入门（4）—— 网关

上一篇：SpringCloud 入门（3）—— Nacos配置中心-CSDN博客 Spring Cloud Gateway 作为 Spring Cloud 生态系统的一部分，主要在微服务架构中充当 API 网关的角色。它提供了统一的入口点来处理所有的 HTTP 请求，并将这些请…
阅读更多...
在linux系统的docker中安装GitLab

在linux系统的docker中安装GitLab

一、安装GitLab： 在安装了docker之后就是下载安装GitLab了，在linux系统中输入命令：docker search gitlab就可以看到很多项目，一般安装第一个，它是英文版的，如果英文不好可以安装twang2218/gitlab-ce-zh。 …
阅读更多...
vscode打开下一个文件的时候上一个文件会关闭

vscode打开下一个文件的时候上一个文件会关闭

解决方法： 你可以通过设置 workbench.editor.enablePreview 来控制在 VS Code 中打开文件时是否会关闭上一个文件。将其设置为 false 可以防止这种行为。 {"workbench.editor.enablePreview": false } 在设置编辑器中显示 "workbench.editor.enab…
阅读更多...
PostgreSQL编译安装教程

PostgreSQL编译安装教程

下载安装 1.在家目录创建一个文件夹放下载安装包 mkdir softwarecd software 2.下载文件压缩包 wget https://ftp.postgresql.org/pub/source/v16.0/postgresql-16.0.tar.gz 3.解压 tar -xzvf postgresql-16.0.tar.gz 4.编译 在software/postgresql-16.0下 cd software…
阅读更多...
访谈积鼎科技总经理：国产CFD软件发展与未来趋势展望

访谈积鼎科技总经理：国产CFD软件发展与未来趋势展望

傅彦国，上海积鼎信息科技有限公司创始人 记者：请傅总介绍下我国流体仿真行业的发展现状是怎样的？ 傅彦国：自2018年政府加大了对核心技术自主研发的支持力度，国产CFD软件逐渐步入发展正轨。 首先，从市场规…
阅读更多...
重温设计模式--代理模式

重温设计模式--代理模式

文章目录 定义UML图代理模式主要有以下几种常见类型：代理模式涉及的主要角色有：C 代码示例 定义 代理模式（Proxy Pattern）属于结构型设计模式，它为其他对象提供一种代理以控制对这个对象的访问。 通过引入代理对象&am…
阅读更多...
R语言数据分析案例46-不同区域教育情况回归分析和探索

R语言数据分析案例46-不同区域教育情况回归分析和探索

一、研究背景 教育是社会发展的基石，对国家和地区的经济、文化以及社会进步起着至关重要的作用。在全球一体化进程加速的今天，不同区域的教育发展水平呈现出多样化的态势。这种差异不仅体现在教育资源的分配上，还表现在教育成果、教育投入与…
阅读更多...
uni-app使用组件button遇到的问题

uni-app使用组件button遇到的问题

在HBuilder X工具中新建一个空白项目， 1、新建一个about页 然后在pages.json文件里加上路由 2、然后看下导航的方法，发现找不到navigateTo方法 参考：button | uni-app官网 第3行和第4行的代码倒是没问题的，第5行的代码有问题执行…
阅读更多...
git自己模拟多人协作

git自己模拟多人协作

目录 一、项目克隆 二、多人协作 1.创建林冲仓库 2.协作处理 3.冲突处理 三、分支推送协作 1.创建develop分支 2.发现git push无法把develop推送到远程 ​编辑 3.本地的分支推送到远程分支 四、分支拉取协作 五、远程分支的删除 远程仓库用的gitee 一、项目克隆 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023