網(wǎng)絡(luò)網(wǎng)站建設(shè)電話哪些網(wǎng)站可以免費(fèi)發(fā)廣告
一? ArkUI(基于ArkTS)概述
基于ArkTS的聲明式開發(fā)范式的方舟開發(fā)框架是一套開發(fā)極簡、高性能、支持跨設(shè)備的UI開發(fā)框架,提供了構(gòu)建應(yīng)用UI所必需的能力
點(diǎn)擊詳情
特點(diǎn)
-
開發(fā)效率高,開發(fā)體驗(yàn)好
- 代碼簡潔:通過接近自然語義的方式描述UI,不必關(guān)心框架如何實(shí)現(xiàn)UI繪制和渲染。
- 數(shù)據(jù)驅(qū)動(dòng)UI變化:讓開發(fā)者更專注自身業(yè)務(wù)邏輯的處理。當(dāng)UI發(fā)生變化時(shí),開發(fā)者無需編寫在不同的UI之間進(jìn)行切換的UI代碼, 開發(fā)人員僅需要編寫引起界面變化的數(shù)據(jù),具體UI如何變化交給框架。
- 開發(fā)體驗(yàn)好:界面也是代碼,讓開發(fā)者的編程體驗(yàn)得到提升。
-
性能優(yōu)越
- 聲明式UI前端和UI后端分層:UI后端采用C++語言構(gòu)建,提供對應(yīng)前端的基礎(chǔ)組件、布局、動(dòng)效、交互事件、組件狀態(tài)管理和渲染管線。
- 語言編譯器和運(yùn)行時(shí)的優(yōu)化:統(tǒng)一字節(jié)碼、高效FFI(Foreign Function Interface)、AOT(Ahead Of Time)、引擎極小化、類型優(yōu)化等。
-
生態(tài)容易快速推進(jìn)
能夠借力主流語言生態(tài)快速推進(jìn),語言相對中立友好,有相應(yīng)的標(biāo)準(zhǔn)組織可以逐步演進(jìn)。
二 布局概述
組件按照布局的要求依次排列,構(gòu)成應(yīng)用的頁面。在聲明式UI中,所有的頁面都是由自定義組件構(gòu)成,開發(fā)者可以根據(jù)自己的需求,選擇合適的布局進(jìn)行頁面開發(fā)。
如何選擇布局
聲明式UI提供了以下10種常見布局,開發(fā)者可根據(jù)實(shí)際應(yīng)用場景選擇合適的布局進(jìn)行頁面開發(fā)。
布局 | 應(yīng)用場景 |
---|---|
線性布局(Row、Column) | 如果布局內(nèi)子元素超過1個(gè)時(shí),且能夠以某種方式線性排列時(shí)優(yōu)先考慮此布局。 |
層疊布局(Stack) | 組件需要有堆疊效果時(shí)優(yōu)先考慮此布局。層疊布局的堆疊效果不會(huì)占用或影響其他同容器內(nèi)子組件的布局空間。例如Panel作為子組件彈出時(shí)將其他組件覆蓋更為合理,則優(yōu)先考慮在外層使用堆疊布局。 |
彈性布局(Flex) | 彈性布局是與線性布局類似的布局方式。區(qū)別在于彈性布局默認(rèn)能夠使子組件壓縮或拉伸。在子組件需要計(jì)算拉伸或壓縮比例時(shí)優(yōu)先使用此布局,可使得多個(gè)容器內(nèi)子組件能有更好的視覺上的填充效果。 |
相對布局(RelativeContainer) | 相對布局是在二維空間中的布局方式,不需要遵循線性布局的規(guī)則,布局方式更為自由。通過在子組件上設(shè)置錨點(diǎn)規(guī)則(AlignRules)使子組件能夠?qū)⒆约涸跈M軸、縱軸中的位置與容器或容器內(nèi)其他子組件的位置對齊。設(shè)置的錨點(diǎn)規(guī)則可以天然支持子元素壓縮、拉伸、堆疊或形成多行效果。在頁面元素分布復(fù)雜或通過線性布局會(huì)使容器嵌套層數(shù)過深時(shí)推薦使用。 |
柵格布局(GridRow、GridCol) | 柵格是多設(shè)備場景下通用的輔助定位工具,可將空間分割為有規(guī)律的柵格。柵格不同于網(wǎng)格布局固定的空間劃分,可以實(shí)現(xiàn)不同設(shè)備下不同的布局,空間劃分更隨心所欲,從而顯著降低適配不同屏幕尺寸的設(shè)計(jì)及開發(fā)成本,使得整體設(shè)計(jì)和開發(fā)流程更有秩序和節(jié)奏感,同時(shí)也保證多設(shè)備上應(yīng)用顯示的協(xié)調(diào)性和一致性,提升用戶體驗(yàn)。推薦內(nèi)容相同但布局不同時(shí)使用。 |
媒體查詢(@ohos.mediaquery) | 媒體查詢可根據(jù)不同設(shè)備類型或同設(shè)備不同狀態(tài)修改應(yīng)用的樣式。例如根據(jù)設(shè)備和應(yīng)用的不同屬性信息設(shè)計(jì)不同的布局,以及屏幕發(fā)生動(dòng)態(tài)改變時(shí)更新應(yīng)用的頁面布局。 |
列表(List) | 使用列表可以高效地顯示結(jié)構(gòu)化、可滾動(dòng)的信息。在ArkUI中,列表具有垂直和水平布局能力和自適應(yīng)交叉軸方向上排列個(gè)數(shù)的布局能力,超出屏幕時(shí)可以滾動(dòng)。列表適合用于呈現(xiàn)同類數(shù)據(jù)類型或數(shù)據(jù)類型集,例如圖片和文本。 |
網(wǎng)格(Grid) | 網(wǎng)格布局具有較強(qiáng)的頁面均分能力、子元素占比控制能力。網(wǎng)格布局可以控制元素所占的網(wǎng)格數(shù)量、設(shè)置子元素橫跨幾行或者幾列,當(dāng)網(wǎng)格容器尺寸發(fā)生變化時(shí),所有子元素以及間距等比例調(diào)整。推薦在需要按照固定比例或者均勻分配空間的布局場景下使用,例如計(jì)算器、相冊、日歷等。 |
輪播(Swiper) | 輪播組件通常用于實(shí)現(xiàn)廣告輪播、圖片預(yù)覽等。 |
選項(xiàng)卡(Tabs) | 選項(xiàng)卡可以在一個(gè)頁面內(nèi)快速實(shí)現(xiàn)視圖內(nèi)容的切換,一方面提升查找信息的效率,另一方面精簡用戶單次獲取到的信息量。 |
三?線性布局 (Row/Column)
Row和Column是最常用的布局,類似于 前端中 的 flex?
Column 縱向布局
它默認(rèn)子元素水平居中,縱向排列
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Column(){}.width('80%').height('20%').backgroundColor('#ff6700').margin({bottom:20})Column(){}.width('80%').height('20%').backgroundColor('#ff6700').margin({bottom:20})Column(){}.width('80%').height('20%').backgroundColor('#ff6700').margin({bottom:20})}.height('100%').width('100%')}
}
Row 橫向布局
它默認(rèn)子元素水平居中,縱向排列,這里我沒有設(shè)置間據(jù)它門貼在一起了
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Row() {Column(){}.width('80%').height('20%').backgroundColor('#ff6700').margin({bottom:20})Column(){}.width('80%').height('20%').backgroundColor('#ff6700').margin({bottom:20})Column(){}.width('80%').height('20%').backgroundColor('#ff6700').margin({bottom:20})}.height('100%').width('100%')}
}
Space 設(shè)置子元素的間距
線性布局默認(rèn)不會(huì)根據(jù)父元素收縮,這個(gè)跟 flex有區(qū)別
alignItems 交叉軸方向布局
交叉軸為垂直方向時(shí)(Row),取值為VerticalAlign類型,可選值:Top,Center,Bottom
水平方向(Column)取值為HorizontalAlign類型,可選值:Start,Center,End
// 官方代碼
Column({}) {Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)Column() {}.width('80%').height(50).backgroundColor(0xD2B48C)Column() {}.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').alignItems(HorizontalAlign.Start).backgroundColor('rgb(242,242,242)')
Row({}) {Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)Column() {}.width('20%').height(30).backgroundColor(0xD2B48C)Column() {}.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).alignItems(VerticalAlign.Top).backgroundColor('rgb(242,242,242)')
justifyContent主軸對齊
可選值:FlexAlign.(Start | Center | End | SpaceBetween | SpaceAround | SpaceEvenly)?
自適應(yīng)拉伸
在線性布局下,常用空白填充組件Blank,在容器主軸方向自動(dòng)填充空白空間,達(dá)到自適應(yīng)拉伸效果。
自適應(yīng)縮放
自適應(yīng)縮放是指子元素隨容器尺寸的變化而按照預(yù)設(shè)的比例自動(dòng)調(diào)整尺寸,適應(yīng)各種不同大小的設(shè)備。在線性布局中,可以使用以下兩種方法實(shí)現(xiàn)自適應(yīng)縮放。
- 父容器尺寸確定時(shí),使用layoutWeight屬性設(shè)置子元素和兄弟元素在主軸上的權(quán)重,忽略元素本身尺寸設(shè)置,使它們在任意尺寸的設(shè)備下自適應(yīng)占滿剩余空間
- 父容器尺寸確定時(shí),使用百分比設(shè)置子元素和兄弟元素的寬度,使他們在任意尺寸的設(shè)備下保持固定的自適應(yīng)占比。