邊框設(shè)置
設(shè)置組件邊框樣式。
說明:
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md
]
從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。從API Version 9開始,父節(jié)點(diǎn)的border顯示在子節(jié)點(diǎn)內(nèi)容之上。
屬性
名稱 | 參數(shù)類型 | 描述 |
---|---|---|
border | { width?: [Length] | [EdgeWidths]9+, color?: [ResourceColor] |
borderStyle | [BorderStyle] | [EdgeStyles]9+ |
borderWidth | [Length] | [EdgeWidths]9+ |
borderColor | [ResourceColor] | [EdgeColors]9+ |
borderRadius | [Length] | [BorderRadiuses]9+ |
EdgeWidths9+對象說明
引入該對象時,至少傳入一個參數(shù)。
名稱 | 參數(shù)類型 | 必填 | 描述 |
---|---|---|---|
left | [Length] | 否 | 左側(cè)邊框?qū)挾取?/td> |
right | [Length] | 否 | 右側(cè)邊框?qū)挾取?/td> |
top | [Length] | 否 | 上側(cè)邊框?qū)挾取?/td> |
bottom | [Length] | 否 | 下側(cè)邊框?qū)挾取?/td> |
EdgeColors9+對象說明
引入該對象時,至少傳入一個參數(shù)。
名稱 | 參數(shù)類型 | 必填 | 描述 |
---|---|---|---|
left | [ResourceColor] | 否 | 左側(cè)邊框顏色。 |
right | [ResourceColor] | 否 | 右側(cè)邊框顏色。 |
top | [ResourceColor] | 否 | 上側(cè)邊框顏色。 |
bottom | [ResourceColor] | 否 | 下側(cè)邊框顏色。 |
BorderRadiuses9+對象說明
引用該對象時,至少傳入一個參數(shù)。
名稱 | 參數(shù)類型 | 必填 | 描述 |
---|---|---|---|
topLeft | [Length] | 否 | 左上角圓角半徑。 |
topRight | [Length] | 否 | 右上角圓角半徑。 |
bottomLeft | [Length] | 否 | 左下角圓角半徑。 |
bottomRight | [Length] | 否 | 右下角圓角半徑。 |
EdgeStyles9+對象說明
引入該對象時,至少傳入一個參數(shù)。
名稱 | 參數(shù)類型 | 必填 | 描述 |
---|---|---|---|
left | [BorderStyle] | 否 | 左側(cè)邊框樣式。 |
right | [BorderStyle] | 否 | 右側(cè)邊框樣式。 |
top | [BorderStyle] | 否 | 上側(cè)邊框樣式。 |
bottom | [BorderStyle] | 否 | 下側(cè)邊框樣式。HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿 |
示例
// xxx.ets
@Entry
@Component
struct BorderExample {
build() {
Column() {
Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
// 線段
Text('dashed')
.borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10)
.width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
// 點(diǎn)線
Text('dotted')
.border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted })
.width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
}.width('100%').height(150)
Text('.border')
.fontSize(50)
.width(300)
.height(300)
.border({
width: { left: 3, right: 6, top: 10, bottom: 15 },
color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green },
radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 },
style: {
left: BorderStyle.Dotted,
right: BorderStyle.Dotted,
top: BorderStyle.Solid,
bottom: BorderStyle.Dashed
}
}).textAlign(TextAlign.Center)
}
}
}
審核編輯 黃宇
-
鴻蒙
+關(guān)注
關(guān)注
57文章
2339瀏覽量
42805
發(fā)布評論請先 登錄
相關(guān)推薦
評論