详解Java、JS、TS组件常用属性 原创 精华

发布于 2021-11-22 14:02
浏览
7收藏

$\color{#F00}{【本文正在参与优质创作者激励】}$


@toc

宽高(width height)

属性名称 描述 Java XML JS(stylecss) TS
width 宽度 ohos:width="match_content" width: 100%; *.width('100%')
height 高度 ohos:height="match_content" height: 100% *.height('100%')

例:设置width300fpheight100fp

  • Java XML
ohos:width="300fp"
ohos:height="100fp"
  • JS
<text style="width: 300fp; height: 100fp">您好 世界</text>
//或
<text class="title">您好 世界</text>
//在*.css中设置
.title {
    width: 300fp;
    height: 100fp;
}
  • TS
Text('您好 世界')
    .height(100)
    .width(300)
//或
Text('您好 世界')
    .size({
        width: 300,
        height: 100
    })

详解Java、JS、TS组件常用属性-鸿蒙HarmonyOS技术社区

内边距(padding)

属性名称 描述 Java XML JS(stylecss) TS
padding 内边距 ohos:padding="10fp"或逐个设置ohos:left_padding="10fp" ohos:right_padding="10fp" ohos:top_padding="10fp" ohos:bottom_padding="10fp" padding: 10fp或逐个设置padding-left: 10fp; padding-right: 10fp; padding-top: 10fp; padding-bottom: 10fp; *.padding(10)或逐个设置*.padding({left: 10, right: 10, top: 10, bottom: 10})

例:设置左内边距为20fp, 上内边距为20fp

  • Java Xml
ohos:left_padding="20fp"
ohos:top_padding="20fp"
  • JS
padding-left: 20fp;
padding-top: 20fp;
  • TS
*.padding({
	left: 20,
	top: 20
})

详解Java、JS、TS组件常用属性-鸿蒙HarmonyOS技术社区

外边距(margin)

属性名称 描述 Java XML JS(stylecss) TS
margin 外边距 ohos:margin="10fp"或逐个设置ohos:left_margin="10fp" ohos:right_margin="10fp" ohos:top_margin="10fp" ohos:bottom_margin="10fp" margin: 10fp;或逐个设置margin-left:10fp; margin-right: 10fp; margin-top: 10fp; margin-bottom: 10fp; *.margin(10)或逐个设置*.margin({left: 10})
例:设置左外边距为20fp
  • Java XML
ohos:left_margin="20fp"
  • JS
margin-left: 20fp;
  • TS
*.margin({
	left: 20
})

详解Java、JS、TS组件常用属性-鸿蒙HarmonyOS技术社区

背景颜色(background*)

属性名称 描述 Java XML JS(stylecss) TS
background* 背景颜色 ohos:background_element="#F2F2F2" background-color: #098564; *..backgroundColor('#098564')
** 例:设置背景色为#675982
  • Java XML
ohos:background_element="#675982"
  • JS
background-color: #675982;
  • TS
*.backgroundColor('#675982')

详解Java、JS、TS组件常用属性-鸿蒙HarmonyOS技术社区

边框(border*)

属性名称 描述 Java XML JS(stylecss) TS
border 边框 通过设置背景图层的方式①设置background_element属性的值为样式文件;②在Java代码中定义ShapeElement来控制边框样式 border: 1px solid redborder-width: 1px; border-style: solid; border-color: red;(同时可以单独设置上border-top[-*]border-bottom[-*]border-left[-*]border-right[-*]的边框)
  • Java & Java XML
//*_layout.xml
ohos:id="$+id:normal_border"
// *AbilitySlice.java
Text text = findComponentById(ResourceTable.Id_normal_border);
ShapeElement element =  new ShapeElement();
element.setRgbColor(new RgbColor(9, 133, 100));
element.setStroke(20, new RgbColor(255, 0, 0));
text.setBackground(element);
//*_layout.xml
ohos:background_element="$graphic:background_ability_normal_properties"
// graphic/background_ability_normal_properties.xml
<stroke
	ohos:width="5fp"
	ohos:color="red"/>
  • JS
border: 1px solid red;

-TS

*.border({
	width: 1,
	color: 'red',
	style: BorderStyle.Solid
})
//或
*.borderStyle(BorderStyle.Solid)
*.borderWidth(1)
*.borderColor('red')

详解Java、JS、TS组件常用属性-鸿蒙HarmonyOS技术社区


$\color{#F00}{【本文正在参与优质创作者激励】}$

©著作权归作者和HarmonyOS技术社区共同所有,如需转载,请注明出处,否则将追究法律责任
已于2021-11-22 14:07:08修改
8
收藏 7
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐