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

Tuer白晓明
发布于 2021-11-22 14:02
浏览
10收藏

$\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组件常用属性-鸿蒙开发者社区

内边距(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组件常用属性-鸿蒙开发者社区

外边距(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组件常用属性-鸿蒙开发者社区

背景颜色(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组件常用属性-鸿蒙开发者社区

边框(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组件常用属性-鸿蒙开发者社区


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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2021-11-22 14:07:08修改
12
收藏 10
回复
举报
7条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

感谢白老师详尽告知。

1
回复
2021-11-22 14:36:48
愿世界美好环环相扣
愿世界美好环环相扣

写的很好!!!亲测有效

终于知道java框架如何设置border啦

1
回复
2021-11-23 10:04:04
胸毛大猛汉
胸毛大猛汉

终于有会的了。

回复
2021-11-23 10:12:01
Tuer白晓明
Tuer白晓明 回复了 红叶亦知秋
感谢白老师详尽告知。

最积极的你👍🏻 👍🏻 👍🏻 

回复
2021-11-23 10:41:09
Tuer白晓明
Tuer白晓明 回复了 愿世界美好环环相扣
写的很好!!!亲测有效 终于知道java框架如何设置border啦

JavaUI的border设置不是很灵活,比如设置底部边框,还得自己自定义😯😯😯

回复
2021-11-23 10:42:03
Tuer白晓明
Tuer白晓明 回复了 胸毛大猛汉
终于有会的了。

一起加油学习HarmonyOS

回复
2021-11-23 10:42:20
Whyalone
Whyalone

这对比对初学者太有用了

回复
2021-11-26 12:11:27
回复
    相关推荐