邊框設置
設置組件邊框樣式。
說明:
開發前請熟悉鴻蒙開發指導文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md
]
從API Version 7開始支持。后續版本如有新增內容,則采用上角標單獨標記該內容的起始版本。從API Version 9開始,父節點的border顯示在子節點內容之上。
屬性
名稱 | 參數類型 | 描述 |
---|---|---|
border | { width?: [Length] | [EdgeWidths]9+, color?: [ResourceColor] |
borderStyle | [BorderStyle] | [EdgeStyles]9+ |
borderWidth | [Length] | [EdgeWidths]9+ |
borderColor | [ResourceColor] | [EdgeColors]9+ |
borderRadius | [Length] | [BorderRadiuses]9+ |
EdgeWidths9+對象說明
引入該對象時,至少傳入一個參數。
名稱 | 參數類型 | 必填 | 描述 |
---|---|---|---|
left | [Length] | 否 | 左側邊框寬度。 |
right | [Length] | 否 | 右側邊框寬度。 |
top | [Length] | 否 | 上側邊框寬度。 |
bottom | [Length] | 否 | 下側邊框寬度。 |
EdgeColors9+對象說明
引入該對象時,至少傳入一個參數。
名稱 | 參數類型 | 必填 | 描述 |
---|---|---|---|
left | [ResourceColor] | 否 | 左側邊框顏色。 |
right | [ResourceColor] | 否 | 右側邊框顏色。 |
top | [ResourceColor] | 否 | 上側邊框顏色。 |
bottom | [ResourceColor] | 否 | 下側邊框顏色。 |
BorderRadiuses9+對象說明
引用該對象時,至少傳入一個參數。
名稱 | 參數類型 | 必填 | 描述 |
---|---|---|---|
topLeft | [Length] | 否 | 左上角圓角半徑。 |
topRight | [Length] | 否 | 右上角圓角半徑。 |
bottomLeft | [Length] | 否 | 左下角圓角半徑。 |
bottomRight | [Length] | 否 | 右下角圓角半徑。 |
EdgeStyles9+對象說明
引入該對象時,至少傳入一個參數。
名稱 | 參數類型 | 必填 | 描述 |
---|---|---|---|
left | [BorderStyle] | 否 | 左側邊框樣式。 |
right | [BorderStyle] | 否 | 右側邊框樣式。 |
top | [BorderStyle] | 否 | 上側邊框樣式。 |
bottom | [BorderStyle] | 否 | 下側邊框樣式。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)
// 點線
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)
}
}
}
審核編輯 黃宇
聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。
舉報投訴
-
鴻蒙
+關注
關注
57文章
2392瀏覽量
43050
發布評論請先 登錄
相關推薦
鴻蒙ArkTS聲明式開發:跨平臺支持列表【按鍵事件】
按鍵事件指組件與鍵盤、遙控器等按鍵設備交互時觸發的事件,適用于所有可獲焦組件,例如Button。對于Text,Image等默認不可獲焦的組件,可以設置focusable屬性為true后使用按鍵事件。
鴻蒙ArkTS聲明式開發:跨平臺支持列表【顯隱控制】 通用屬性
控制當前組件顯示或隱藏。注意,即使組件處于隱藏狀態,在頁面刷新時仍存在重新創建過程,因此當對性能有嚴格要求時建議使用[條件渲染]代替。 默認值:Visibility.Visible 從API version 9開始,該接口支持在ArkTS卡片中使用。
鴻蒙ArkTS聲明式開發:跨平臺支持列表【形狀裁剪】 通用屬性
參數為相應類型的組件,按指定的形狀對當前組件進行裁剪;參數為boolean類型時,設置是否按照父容器邊緣輪廓進行裁剪。 默認值:false 從API version 9開始,該接口支持在ArkTS卡片中使用。
評論