前言
Counter容器組件：計(jì)數(shù)器組件，提供相應(yīng)的增加或者減少的計(jì)數(shù)操作。
Flex容器組件：以彈性方式布局子組件的容器組件。文章來源地址http://www.zghlxwxcb.cn/news/detail-742503.html
一、Counter
計(jì)數(shù)器組件，提供相應(yīng)的增加或者減少的計(jì)數(shù)操作。
說明
該組件從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。
1.1 子組件
可以包含子組件。
1.2 接口
我們使用下面這個(gè)函數(shù)接口即可創(chuàng)建一個(gè)計(jì)數(shù)器容器
Counter()
他的樣子如下圖，沒有我們熟悉的中間的數(shù)字，所以為什么說他是一個(gè)容器組件，就是因?yàn)樗枰琓ext組件去顯示具體的東西，提供可用性
從API version 9開始，該接口支持在ArkTS卡片中使用。
1.3 屬性
支持通用屬性。
1.4 事件
不支持通用事件和手勢(shì)， 僅支持如下事件：
onInc(event: () => void)
2.名稱： onInc
3.功能描述： 用于監(jiān)聽數(shù)值增加事件。當(dāng)數(shù)值增加時(shí)，將觸發(fā)指定的事件處理函數(shù)。
4.支持版本： 從API版本9開始，可在ArkTS卡片中使用。
onDec(event: () => void)
6.名稱： onDec
7.功能描述： 用于監(jiān)聽數(shù)值減少事件。當(dāng)數(shù)值減少時(shí)，將觸發(fā)指定的事件處理函數(shù)。
8.支持版本： 從API版本9開始，可在ArkTS卡片中使用。
這些方法允許你在數(shù)值增加或減少時(shí)注冊(cè)特定的事件處理函數(shù)，以便在發(fā)生相應(yīng)事件時(shí)執(zhí)行自定義操作。這對(duì)于與數(shù)值變化相關(guān)的用戶界面交互非常有用。
1.5 示例代碼
// xxx.ets
@Entry
@Component
struct CounterExample {
@State value: number = 0
build() {
Column() {
Counter() {
Text(this.value.toString())
}.margin(100)
.onInc(() => {
this.value++
})
.onDec(() => {
this.value--
})
}.width("100%")
}
}
我們添加的子組件就是上面我們的空白位置是添加的，這里我們是要++/–，然后顯示，所以需要一個(gè)Text組件
二、Flex
以彈性方式布局子組件的容器組件。
說明
該組件從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。
Flex組件在渲染時(shí)存在二次布局過程，因此在對(duì)性能有嚴(yán)格要求的場(chǎng)景下建議使用Column、Row代替。
Flex組件主軸默認(rèn)不設(shè)置時(shí)撐滿父容器，Column、Row組件主軸不設(shè)置時(shí)默認(rèn)是跟隨子節(jié)點(diǎn)大小。
彈性布局到底是什么意思？
彈性布局是一種頁面排列方式，就像把頁面上的元素放在彈性的盒子里一樣。這些元素可以根據(jù)屏幕大小和容器寬度來自動(dòng)伸縮和重新排列，以適應(yīng)不同的屏幕或窗口尺寸。
舉個(gè)例子：想象你有一個(gè)網(wǎng)頁上的按鈕和文本框，它們通常排列在一行上。但如果用戶在小屏幕手機(jī)上打開這個(gè)頁面，你可能希望它們自動(dòng)堆疊在一列，以適應(yīng)有限的水平空間。這就是彈性布局的好處，它允許頁面上的元素根據(jù)需要重新排列，以確保在不同設(shè)備上都能正常顯示和使用，而不會(huì)顯得擁擠或不可讀。這種布局方式使得網(wǎng)頁更具響應(yīng)性，更適應(yīng)各種屏幕大小，提供更好的用戶體驗(yàn)。
2.1 權(quán)限列表
無
2.2 子組件
可以包含子組件。
你想，我們這個(gè)是布局，沒子組件怎么行呢，所以肯定有子組件的，其他的容器各位也可以進(jìn)行類比！
2.3 接口
Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
從API version 9開始，該接口支持在ArkTS卡片中使用。
參數(shù)
direction
參數(shù)名： direction
參數(shù)類型： FlexDirection
必填： 否
默認(rèn)值： FlexDirection.Row
參數(shù)描述： 用于指定子組件在 Flex 容器上排列的方向，也就是主軸的方向。
wrap
參數(shù)名： wrap
參數(shù)類型： FlexWrap
必填： 否
默認(rèn)值： FlexWrap.NoWrap
參數(shù)描述： 用于確定 Flex 容器是單行/列排列還是多行/列排列。在多行布局時(shí)，它還會(huì)通過交叉軸方向確定新行的堆疊方向。
justifyContent
參數(shù)名： justifyContent
參數(shù)類型： FlexAlign
必填： 否
默認(rèn)值： FlexAlign.Start
參數(shù)描述： 用于定義所有子組件在 Flex 容器主軸上的對(duì)齊方式。
alignItems
參數(shù)名： alignItems
參數(shù)類型： ItemAlign
必填： 否
默認(rèn)值： ItemAlign.Start
參數(shù)描述： 用于定義所有子組件在 Flex 容器交叉軸上的對(duì)齊方式。
alignContent
參數(shù)名： alignContent
參數(shù)類型： FlexAlign
必填： 否
默認(rèn)值： FlexAlign.Start
參數(shù)描述： 用于定義在交叉軸中存在額外空間時(shí)，多行內(nèi)容的對(duì)齊方式。此參數(shù)僅在 wrap 設(shè)置為 Wrap 或 WrapReverse 時(shí)生效。
這些參數(shù)用于控制 Flex 布局的各個(gè)方面，例如子組件的排列方向、對(duì)齊方式以及容器的包裹方式等，以便更好地控制界面布局。
2.4 示例代碼
示例代碼1
// xxx.ets
@Entry
@Component
struct FlexExample1 {
build() {
Column() {
Column({ space: 5 }) {
Text('direction:Row').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ direction: FlexDirection.Row }) { // 子組件在容器主軸上行布局
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('4').width('20%').height(50).backgroundColor(0xD2B48C)
}
.height(70)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('direction:RowReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ direction: FlexDirection.RowReverse }) { // 子組件在容器主軸上反向行布局
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('4').width('20%').height(50).backgroundColor(0xD2B48C)
}
.height(70)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('direction:Column').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ direction: FlexDirection.Column }) { // 子組件在容器主軸上列布局
Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)
Text('2').width('100%').height(40).backgroundColor(0xD2B48C)
Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)
Text('4').width('100%').height(40).backgroundColor(0xD2B48C)
}
.height(160)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('direction:ColumnReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ direction: FlexDirection.ColumnReverse }) { // 子組件在容器主軸上反向列布局
Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)
Text('2').width('100%').height(40).backgroundColor(0xD2B48C)
Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)
Text('4').width('100%').height(40).backgroundColor(0xD2B48C)
}
.height(160)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
}.width('100%').margin({ top: 5 })
}.width('100%')
}
}
示例代碼2
// xxx.ets
@Entry
@Component
struct FlexExample2 {
build() {
Column() {
Column({ space: 5 }) {
Text('Wrap').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ wrap: FlexWrap.Wrap }) { // 子組件多行布局
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
}
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('NoWrap').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ wrap: FlexWrap.NoWrap }) { // 子組件單行布局
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
}
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('WrapReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ wrap: FlexWrap.WrapReverse , direction:FlexDirection.Row }) { // 子組件反向多行布局
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
}
.width('90%')
.height(120)
.padding(10)
.backgroundColor(0xAFEEEE)
}.width('100%').margin({ top: 5 })
}.width('100%')
}
}
總結(jié)
下面這些容器組件對(duì)于我們ArkUI界面的開發(fā)非常重要，希望大家好好學(xué)。文章來源：http://www.zghlxwxcb.cn/news/detail-742503.html
Counter容器組件：計(jì)數(shù)器組件，提供相應(yīng)的增加或者減少的計(jì)數(shù)操作。
Flex容器組件：以彈性方式布局子組件的容器組件。
到了這里，關(guān)于【鴻蒙軟件開發(fā)】ArkUI之容器組件Counter(計(jì)數(shù)器組件)、Flex(彈性布局)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
