當前位置：首頁 > news >正文

網(wǎng)絡網(wǎng)站建設電話哪些網(wǎng)站可以免費發(fā)廣告

news 2025/7/14 18:17:12

網(wǎng)絡網(wǎng)站建設電話,哪些網(wǎng)站可以免費發(fā)廣告,鄭州網(wǎng)站制作建設,帝國+只做網(wǎng)站地圖一 ArkUI(基于ArkTS)概述基于ArkTS的聲明式開發(fā)范式的方舟開發(fā)框架是一套開發(fā)極簡、高性能、支持跨設備的UI開發(fā)框架，提供了構(gòu)建應用UI所必需的能力點擊詳情特點開發(fā)效率高，開發(fā)體驗好代碼簡潔：通過接近自然語義的方式描述UI&#x…

一? ArkUI(基于ArkTS)概述

基于ArkTS的聲明式開發(fā)范式的方舟開發(fā)框架是一套開發(fā)極簡、高性能、支持跨設備的UI開發(fā)框架，提供了構(gòu)建應用UI所必需的能力

點擊詳情

特點

開發(fā)效率高，開發(fā)體驗好
- 代碼簡潔：通過接近自然語義的方式描述UI，不必關心框架如何實現(xiàn)UI繪制和渲染。
- 數(shù)據(jù)驅(qū)動UI變化：讓開發(fā)者更專注自身業(yè)務邏輯的處理。當UI發(fā)生變化時，開發(fā)者無需編寫在不同的UI之間進行切換的UI代碼，開發(fā)人員僅需要編寫引起界面變化的數(shù)據(jù)，具體UI如何變化交給框架。
- 開發(fā)體驗好：界面也是代碼，讓開發(fā)者的編程體驗得到提升。
性能優(yōu)越
- 聲明式UI前端和UI后端分層：UI后端采用C++語言構(gòu)建，提供對應前端的基礎組件、布局、動效、交互事件、組件狀態(tài)管理和渲染管線。
- 語言編譯器和運行時的優(yōu)化：統(tǒng)一字節(jié)碼、高效FFI（Foreign Function Interface）、AOT（Ahead Of Time）、引擎極小化、類型優(yōu)化等。
生態(tài)容易快速推進

能夠借力主流語言生態(tài)快速推進，語言相對中立友好，有相應的標準組織可以逐步演進。

二布局概述

組件按照布局的要求依次排列，構(gòu)成應用的頁面。在聲明式UI中，所有的頁面都是由自定義組件構(gòu)成，開發(fā)者可以根據(jù)自己的需求，選擇合適的布局進行頁面開發(fā)。

如何選擇布局

聲明式UI提供了以下10種常見布局，開發(fā)者可根據(jù)實際應用場景選擇合適的布局進行頁面開發(fā)。

布局	應用場景
線性布局（Row、Column）	如果布局內(nèi)子元素超過1個時，且能夠以某種方式線性排列時優(yōu)先考慮此布局。
層疊布局（Stack）	組件需要有堆疊效果時優(yōu)先考慮此布局。層疊布局的堆疊效果不會占用或影響其他同容器內(nèi)子組件的布局空間。例如Panel作為子組件彈出時將其他組件覆蓋更為合理，則優(yōu)先考慮在外層使用堆疊布局。
彈性布局（Flex）	彈性布局是與線性布局類似的布局方式。區(qū)別在于彈性布局默認能夠使子組件壓縮或拉伸。在子組件需要計算拉伸或壓縮比例時優(yōu)先使用此布局，可使得多個容器內(nèi)子組件能有更好的視覺上的填充效果。
相對布局（RelativeContainer）	相對布局是在二維空間中的布局方式，不需要遵循線性布局的規(guī)則，布局方式更為自由。通過在子組件上設置錨點規(guī)則（AlignRules）使子組件能夠?qū)⒆约涸跈M軸、縱軸中的位置與容器或容器內(nèi)其他子組件的位置對齊。設置的錨點規(guī)則可以天然支持子元素壓縮、拉伸、堆疊或形成多行效果。在頁面元素分布復雜或通過線性布局會使容器嵌套層數(shù)過深時推薦使用。
柵格布局（GridRow、GridCol）	柵格是多設備場景下通用的輔助定位工具，可將空間分割為有規(guī)律的柵格。柵格不同于網(wǎng)格布局固定的空間劃分，可以實現(xiàn)不同設備下不同的布局，空間劃分更隨心所欲，從而顯著降低適配不同屏幕尺寸的設計及開發(fā)成本，使得整體設計和開發(fā)流程更有秩序和節(jié)奏感，同時也保證多設備上應用顯示的協(xié)調(diào)性和一致性，提升用戶體驗。推薦內(nèi)容相同但布局不同時使用。
媒體查詢（@ohos.mediaquery）	媒體查詢可根據(jù)不同設備類型或同設備不同狀態(tài)修改應用的樣式。例如根據(jù)設備和應用的不同屬性信息設計不同的布局，以及屏幕發(fā)生動態(tài)改變時更新應用的頁面布局。
列表（List）	使用列表可以高效地顯示結(jié)構(gòu)化、可滾動的信息。在ArkUI中，列表具有垂直和水平布局能力和自適應交叉軸方向上排列個數(shù)的布局能力，超出屏幕時可以滾動。列表適合用于呈現(xiàn)同類數(shù)據(jù)類型或數(shù)據(jù)類型集，例如圖片和文本。
網(wǎng)格（Grid）	網(wǎng)格布局具有較強的頁面均分能力、子元素占比控制能力。網(wǎng)格布局可以控制元素所占的網(wǎng)格數(shù)量、設置子元素橫跨幾行或者幾列，當網(wǎng)格容器尺寸發(fā)生變化時，所有子元素以及間距等比例調(diào)整。推薦在需要按照固定比例或者均勻分配空間的布局場景下使用，例如計算器、相冊、日歷等。
輪播（Swiper）	輪播組件通常用于實現(xiàn)廣告輪播、圖片預覽等。
選項卡（Tabs）	選項卡可以在一個頁面內(nèi)快速實現(xiàn)視圖內(nèi)容的切換，一方面提升查找信息的效率，另一方面精簡用戶單次獲取到的信息量。

三?線性布局 (Row/Column)

Row和Column是最常用的布局，類似于前端中的 flex?

Column 縱向布局

它默認子元素水平居中，縱向排列

@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 橫向布局

它默認子元素水平居中，縱向排列，這里我沒有設置間據(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 設置子元素的間距

線性布局默認不會根據(jù)父元素收縮，這個跟 flex有區(qū)別

alignItems 交叉軸方向布局

交叉軸為垂直方向時(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)')