当前位置： 首页 > article >正文

HormonyOS中组件的通用属性

article 2025/1/20 18:35:57

目录

1.通用属性

1）width属性

1--作用

2--例子

2）height属性

1--作用

2--例子

3）size属性

1--作用

2--例子

4）padding属性

1--作用

2--例子

5）margin属性

1--作用

2--例子

6）constrainSize属性

1--作用

2--例子

7）align属性

1--作用

2--例子

可取值还有

8）direction属性

1--作用

2--例子

9）position 属性

1--作用

2--例子

10）markAnchor属性

1--作用

2--例子

11）offset属性

1--作用

2--例子

12）backgoundImage属性

1--作用

2--例子

13）backgoundColor属性

1--作用

2--例子

14）backgroundImageSIze属性

1--作用

2--例子

15）backgroundImagePosition属性

1--作用

2--例子

16）fontColor属性

1--作用

2--例子

17）fontSize属性

1--作用

2--例子

18）fontStyle属性

1--作用

2--例子

19）fontWeight属性

1--作用

2--例子

20）fontFamily属性

1--作用

2--例子

21)自定义属性

1.通用属性

1）width属性

1--作用

        定义组件的宽度

2--例子

Text("宽度为100")
  .width(200)

2）height属性

1--作用

        定义组件的高度

2--例子

Text("宽度为200")
  .width(100)
  .height(100)
  .backgroundColor($r("app.color.my_red"))

3）size属性

1--作用

        同时定义设置宽和高

2--例子

Text("宽高为200")
  .size({
    width: 200,
    height: 200
    
  })

     

.backgroundColor($r("app.color.my_green"))

4）padding属性

1--作用

        设置组件中的内容到边框的距离。

2--例子

第一种设置方式

//设置内边距为50
Text("内边距为50")
  .padding({
    left: 50,
    top: 50,
    right: 50,
    bottom: 50
  })
  .backgroundColor($r("app.color.my_cyan"))

第二种设置方式

//设置内边距为50
Text("内边距为50")
  .padding(50)
  .backgroundColor($r("app.color.my_blue"))

5）margin属性

1--作用

        设置组件的外边距

2--例子

设置相同的外边距

Button("我的按钮")
  .margin(20)

  .backgroundColor(Color.Red)
  .border({
    width: 2,
    color: Color.Black
  })

设置不同的外边距

//设置不同的外边距
Button("外边距不同")
  .margin({
    top: 10,
    bottom: 20,
    left: 30,
    right: 40})
  .width("100")
  .height("100")
  .backgroundColor(Color.Brown)

完整的代码

@Component
@Preview
export default struct myMargin{
  build(){

    Column(){
      //按钮的外边距为10
      Button("我的按钮")
        .margin(20)

        .backgroundColor(Color.Red)
        .border({
          width: 2,
          color: Color.Black
        })
      Column(){
        //设置不同的外边距
        Button("外边距不同")
          .margin({
            top: 10,
            bottom: 20,
            left: 30,
            right: 40})
          .width("100")
          .height("100")
          .backgroundColor(Color.Brown)

      }.backgroundColor(Color.Green)



    }





  }
}

        

6）constrainSize属性

1--作用

        设置约束尺寸，设置尺寸的范围限制范围(min:"",max:"")

2--例子

//组件2
@Component
@Preview
struct mySizeHeightAndWidth{
  build(){
      TextClock()
        .width(800)
        .height(800)
        .backgroundColor(Color.Orange)
        .constraintSize({
          minWidth: 100,
          minHeight: 100,
          maxWidth: 300,
          maxHeight: 300
        })
  }


}

可以看到我们设置的宽高都是800，已经超出了范围，但是最大值还是300

下面是没有设置尺寸范围的

//组件2
@Component
@Preview
struct mySizeHeightAndWidth800{
  build(){
    TextClock()
      .width(800)
      .height(800)
      .backgroundColor(Color.Blue)

  }


}

7）align属性

1--作用

        设置组件内容的对其方式

2--例子

在中间

@Preview
struct myAlignCenter{
  build(){
    Column(){
      Text("我是一个文本")
        .width(300)
        .height(300)
        .backgroundColor(Color.Red)
        .align(Alignment.Center)
    }
  }
}

可取值还有
  • TopStart
  • Top
  • TopEnd
  • Center
  • End
  • BottomStart
  • Bottom
  • BottomEnd

8）direction属性

1--作用

        设置元素水平方向的布局

2--例子

Column(){
      Text("左")
        .backgroundColor(Color.Gray)
        .width(100)
        .height(50)
        .direction(Direction.Ltr) //控制文字从左边开始显示

      Text("中间")
        .backgroundColor(Color.Red)
        .width(100)
        .height(50)
        .direction(Direction.Auto)

      Text("右边")
        .backgroundColor(Color.Gray)
        .width(100)
        .height(50)
        .direction(Direction.Rtl)

    }

    .width(400)
    .height(400)

9）position 属性

1--作用

        组件在父容器中的位置

2--例子

@Preview
struct myPosition{
  build(){
    Column(){
      Text("我是一个文本")
        .backgroundColor(Color.Green)
        .width(50)
        .height(50)
        .position({
          left: 100,
          top: 200
        })

      Text("中间")
        .backgroundColor(Color.Red)
        .width(50)
        .height(50)
        .position({
          left: 50,
          top: 50
        })

      Text("右边")
        .backgroundColor(Color.Gray)
    }
    .width("100%")
    .height("100%")
  }
}

10）markAnchor属性

1--作用

        相对布局定位时的锚点，以元素顶部起点进行偏移

2--例子

@Preview
struct myMarkAnchor {
  build() {
    Column(){
      Text("这是第一个")
        .backgroundColor(Color.Green)
        .width(100)
        .height(50)
        .markAnchor({
          x: 300,
          y: 200
        })

      Text("这是第二个")
        .backgroundColor(Color.Red)
        .width(100)
        .height(50)
        .markAnchor({
          x: 50,
          y: 50
        })

      Text("这是第三个文本")
        .backgroundColor(Color.Blue)
        .width(150)
        .height(50)
        .markAnchor({
          x: 200,
          y: 100
        })
    }
      .width("100%")
      .height("100%")
      .backgroundColor(Color.White) // 设置背景颜色以便更好地观察效果

  }
}

11）offset属性

1--作用

        相对布局完成位置坐标偏移量

2--例子

@Preview
struct myOffset{
  build() {
    RelativeContainer(){
      Text("这是第一个")
        .backgroundColor(Color.Green)
        .width(100)
        .height(50)
        .offset({
          x:200,
          y:200
        })

      Text("这是第二个")
        .backgroundColor(Color.Red)
        .width(100)
        .height(50)
        .offset({
          x:50,
          y:50

        })
    }
  }
}

12）backgoundImage属性

1--作用

        对背景图片进行设置

2--例子

//图片设置
@Preview
struct myImage{
  build() {
    Row(){
      Text()
        .backgroundImage($r("app.media.girl_one"))
        .size({
          width: 300,
          height: 300
        })
    }.size(
      {
        width: "100%",
        height: "100%"
      }
    )
  }
}

13）backgoundColor属性

1--作用

        对背景的颜色进行设置

2--例子

//背景颜色设置
@Preview
struct myBackgroundColor{
  build() {
    Row(){
      Text("我是一个文本")
        .backgroundColor(Color.Red) //背景颜色设置
        .width(50)
        .height(50)

      Text("我是一个文本")
        .backgroundColor(Color.Orange) //背景颜色设置
        .width(50)
        .height(50)

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

14）backgroundImageSIze属性

1--作用

        对背景的尺寸进行设置

2--例子

@Preview
struct myBackgroundSize{
  build() {
    Column(){
      Text("我是一个文本")
        .backgroundImage($r("app.media.girl_one"))
        .width(256)
        .height(256)
        // 背景图片大小设置
        .backgroundImageSize({
          width: "100%",
          height: "100%"
        })

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

15）backgroundImagePosition属性

1--作用

        对背景图片的显示位置进行设置

2--例子


//对背景图片的位置进行设置
@Preview
struct myBackgroundPosition{
  build() {
    Column(){
      Button("我是一个按钮")

        .backgroundImage($r("app.media.a_girl"))
        .width(256)
        .height(256)
        .backgroundImagePosition({
          x: "15%",
          y: "15%"
        })


      Divider()


      Text("我是一个文本")
        .backgroundImage($r("app.media.boy_two"))
        .width(128)
        .height(128)

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

16）fontColor属性

1--作用

        对字体的颜色进行设置

2--例子

@Preview
struct myFontColor{
  build(){

    Column(){
      Text("我是一个文本")
        .fontColor(Color.Red)
        .fontSize(30)

      Text("我是第一个文本")
        .fontColor(Color.Blue)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Text("我是第二个文本")
        .fontColor(Color.Green)
        .fontSize(30)

    }

  }
}

17）fontSize属性

1--作用

        对字体的大小进行设置

2--例子


@Preview
struct myFontSize{
  build(){

    Column(){
      Text("我是一个文本")
        .fontSize(10)

      Text("我是第一个文本")
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Text("我是第二个文本")
        .fontSize(30)

    }

  }
}

18）fontStyle属性

1--作用

        对字体的样式进行设置

2--例子

//字体样式设置
@Preview
struct myFontStyle{
  build(){

    Column(){
      Text("我是一个文本")
        .fontStyle(FontStyle.Normal)

      Text("我是第一个文本")
        .fontStyle(FontStyle.Italic)
    }
    .width(400)
    .height(400)
  }
}

19）fontWeight属性

1--作用

        对字体的粗细进行设置

2--例子

//字体粗细设置
@Preview
struct myFontWeight{
  build(){

    Column(){
      Text("我是一个文本")
        .fontWeight(FontWeight.Lighter)

      Text("我是第一个文本")
        .fontWeight(FontWeight.Bolder)
      Text("我是第二个文本")
        .fontWeight(FontWeight.Regular)
      Text("我是第三个文本")
        .fontWeight(FontWeight.Medium)
      Text("我是第四个文本")
        .fontWeight(FontWeight.Bold)
      Text("我是第五个文本")
        .fontWeight(FontWeight.Normal)
    }
  }
}

20）fontFamily属性

1--作用

        字体设置

2--例子

//字体族设置
@Preview
struct myFontFamily{
  build(){

    Column(){
      Text("我是一个文本")
        .fontFamily("sans-serif")

      Text("我是第一个文本")
        .fontFamily("sans-serif-thin")
      Text("我是第二个文本")
        .fontFamily("sans-serif-light")
      Text("我是第三个文本")
        .fontFamily("sans-serif-medium")
      Text("我是第四个文本")
        .fontFamily("sans-serif-condensed")
    }
  }
}

21)自定义属性

注:自定义属性值的参数传递需要在()里面传递，并且用{}括起来。里面写参数值 类似key:value的形式

//自定义组件
@Component
struct myTextTemplate {
  //定义属性值
  @Prop myText: string = 'Hello World';

  build() {
    Text(this.myText)
  }
}

//自定义组件的使用

myTextTemplate({

        myText: "填写值"

})

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
      myTextTemplate({
        myText: '这是我自定义的属性'
      })

    }



  }
}


http://www.kler.cn/a/350572.html

相关文章：

  • 【大数据2025】Yarn 总结
  • ChatGPT 写作系列
  • HackMyVM-Klim靶机的测试报告
  • vscode 设置
  • 【Linux】【Vim】vim编辑器的用法
  • 记录 idea 启动 tomcat 控制台输出乱码问题解决
  • 华为免费杀毒软件 | HiSec Endpoint 智能终端安全系统
  • 【在Linux世界中追寻伟大的One Piece】Jsoncpp|序列化
  • Qt初识_通过代码创建hello world
  • （38）MATLAB分析带噪信号的频谱
  • Flutter url_launcher：打开网页、邮件、电话和短信的最佳实践
  • WPF绘制仪表
  • CSS 容器查询一探究竟
  • Mac实用小技巧之如何输入特殊符号
  • 一文通JavaScript事件处理及高级应用(事件冒泡捕获、冒泡与捕获的区别、事件委托)
  • Web集群服务-Nginx
  • log4j添加druid的慢sql日志记录到指定文件
  • 【IRV2】Deepfake video detection using InceptionResnetV2
  • 安卓的漏洞类型和扫描工具
  • vue3中swiper11的使用
  • Unity-Shader简介
  • 滑动窗口经典例题
  • 【CSS in Depth 2 精译_046】7.1 CSS 响应式设计中的移动端优先设计原则（下）
  • 奖金——Topsort
  • 基于STM32的自学习走迷宫智能小车设计
  • 空间限域效应