[[436365]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

寬高(width height)

例：設置width為300fp，height為100fp

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

內邊距(padding)

例：設置左內邊距為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 
}) 

外邊距(margin)

例：設置左外邊距為20fp

Java XML

ohos:left_margin="20fp" 

 JS

margin-left: 20fp; 

 TS

*.margin({ 
    left: 20 
}) 

背景顏色(background*)

Java XML

ohos:background_element="#675982" 

 JS

background-color: #675982; 

 TS

*.backgroundColor('#675982') 

邊框(border*)

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

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com