邊框設(shè)置

2024-01-22 16:06 更新

設(shè)置組件邊框樣式。

說明

從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 | EdgeWidths9+,

color?: ResourceColor | EdgeColors9+,

radius?: Length | BorderRadiuses9+,

style?: BorderStyle | EdgeStyles9+

}

統(tǒng)一邊框樣式設(shè)置接口。

- width:設(shè)置邊框?qū)挾取?/p>

- color:設(shè)置邊框顏色。

- radius:設(shè)置邊框圓角半徑。

- style:設(shè)置邊框樣式。

說明:

邊框?qū)挾饶J(rèn)值為0,即不顯示邊框。

borderStyle

BorderStyle | EdgeStyles9+

設(shè)置元素的邊框樣式。

默認(rèn)值:BorderStyle.Solid

從API version 9開始,該接口支持在ArkTS卡片中使用

,卡片中僅支持設(shè)置相同的邊框樣式。

borderWidth

Length | EdgeWidths9+

設(shè)置元素的邊框?qū)挾?,不支持百分比?/p>

從API version 9開始,該接口支持在ArkTS卡片中使用

,卡片中僅支持設(shè)置相同的邊框?qū)挾取?/p>

borderColor

ResourceColor | EdgeColors9+

設(shè)置元素的邊框顏色。

默認(rèn)值:Color.Black

從API version 9開始,該接口支持在ArkTS卡片中使用,卡片中僅支持設(shè)置相同的邊框顏色。

borderRadius

Length | BorderRadiuses9+

設(shè)置元素的邊框圓角半徑,不支持百分比。

從API version 9開始,該接口支持在ArkTS卡片中使用,卡片中僅支持設(shè)置相同的邊框圓角半徑。

EdgeWidths9+對象說明

引入該對象時,至少傳入一個參數(shù)。

名稱

參數(shù)類型

必填

描述

left

Length

左側(cè)邊框?qū)挾取?/p>

right

Length

右側(cè)邊框?qū)挾取?/p>

top

Length

上側(cè)邊框?qū)挾取?/p>

bottom

Length

下側(cè)邊框?qū)挾取?/p>

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è)邊框樣式。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct BorderExample {
  5. build() {
  6. Column() {
  7. Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
  8. // 線段
  9. Text('dashed')
  10. .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10)
  11. .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
  12. // 點(diǎn)線
  13. Text('dotted')
  14. .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted })
  15. .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
  16. }.width('100%').height(150)
  17. Text('.border')
  18. .fontSize(50)
  19. .width(300)
  20. .height(300)
  21. .border({
  22. width: { left: '5lpx', right: '10lpx', top: '20lpx', bottom: '30lpx' },
  23. color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green },
  24. radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 },
  25. style: {
  26. left: BorderStyle.Dotted,
  27. right: BorderStyle.Dotted,
  28. top: BorderStyle.Solid,
  29. bottom: BorderStyle.Dashed
  30. }
  31. }).textAlign(TextAlign.Center)
  32. }
  33. }
  34. }

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號