目錄

一、鴻蒙國(guó)際化配置

二、鴻蒙常用組件介紹

三、鴻蒙像素單位介紹

?四、鴻蒙布局介紹

1、Row與Column線(xiàn)性布局

2、層疊布局-Stack

3、彈性布局

4、柵格布局

?5、網(wǎng)格布局

---

---

一、鴻蒙國(guó)際化配置

base目錄下為默認(rèn)的string。en_US對(duì)應(yīng)美國(guó)的。zh_CN對(duì)應(yīng)中國(guó)的。新增一個(gè)string以后。這3個(gè)文件夾下必須都有相同的key和value。

二、鴻蒙常用組件介紹

@Entry
@Component
//簡(jiǎn)單的常用組件集合
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text($r("app.string.PassWord_label")).fontSize(50).fontWeight(FontWeight.Bold).backgroundColor($r("app.color.Color_Blue"))Text("1111111111111111111111111").fontSize(35).width(200).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis}).backgroundColor(Color.Yellow)Button(){Row(){LoadingProgress().width(50).height(50).color(Color.White)Text("登錄").fontColor(Color.White)}.width(100)}TextInput({placeholder:"請(qǐng)輸入"}).fontSize(18).type(InputType.Password)Divider()TextArea({placeholder:"多行文本"}).height(100).placeholderColor(Color.Brown)//多行文本Row(){CheckboxGroup({group:"list"}).onChange(v=>{console.log("11",JSON.stringify(v))})Row(){Checkbox({group:"list",name:"測(cè)試"})Text("測(cè)試")}Row(){Checkbox({group:"list",name:'跑步'})Text("跑步")}}Row(){Row(){Radio({group:'11',value:'語(yǔ)文'}).onChange(v=>{v&& console.log("語(yǔ)文")})Text("語(yǔ)文")}Row(){Radio({group:'11',value:'數(shù)學(xué)'}).onChange(v=>{v&& console.log("數(shù)學(xué)")})Text("數(shù)學(xué)")}Row(){Radio({group:'11',value:'英語(yǔ)'}).onChange(v=>{v&& console.log("英語(yǔ)")})Text("英語(yǔ)")}}// 開(kāi)關(guān)Toggle({type:ToggleType.Switch,isOn:false}).colorBlend(Color.Red).borderColor(Color.Blue)// 開(kāi)關(guān)Toggle({type:ToggleType.Checkbox,isOn:false}).colorBlend(Color.Red).borderColor(Color.Blue)// 開(kāi)關(guān)Toggle({type:ToggleType.Button,isOn:true}){Text("測(cè)試")}
// ------------------------------------------------------------------------------------------// Contain：保持寬高比進(jìn)行縮小或者放大，使得圖片完全顯示在顯示邊界內(nèi)。// Cover：保持寬高比進(jìn)行縮小或者放大，使得圖片兩邊都大于或等于顯示邊界。// Auto：自適應(yīng)顯示。// Fill：不保持寬高比進(jìn)行放大縮小，使得圖片充滿(mǎn)顯示邊界。// ScaleDown：保持寬高比顯示，圖片縮小或者保持不變。// None：保持原有尺寸顯示。
// --------------------------------------------------------------------------------------------
//         Image('images/2.jpg')
//           .width(300)
//           .height(300).border({ width:1 }).objectFit(ImageFit.Cover)// Image('images/2.jpg').width(300)// Image($r("app.media.icon")).width(300).interpolation(ImageInterpolation.High)Image($r("app.media.icon")).border({width:1}).renderMode(ImageRenderMode.Original).objectFit(ImageFit.None).width(300).interpolation(ImageInterpolation.High).objectRepeat(ImageRepeat.XY)}.width('100%').height("100%")}.height('100%')}
}

三、鴻蒙像素單位介紹

鴻蒙為開(kāi)發(fā)者提供4種像素單位，框架采用vp為基準(zhǔn)數(shù)據(jù)單位。
px：屏幕物理像素單位。
vp：屏幕密度相關(guān)像素，根據(jù)屏幕像素密度轉(zhuǎn)換為屏幕物理像素，當(dāng)數(shù)值不帶單位時(shí)，默認(rèn)單位vp。在實(shí)際寬度為1440物理像素的屏幕上，1vp約等于3px。
fp：字體像素，與vp類(lèi)似適用屏幕密度變化，隨系統(tǒng)字體大小設(shè)置變化。
lpx：視窗邏輯像素單位，lpx單位為實(shí)際屏幕寬度與邏輯寬度 (通過(guò)designWidth配置) 的比值，designWidth默認(rèn)值為720。當(dāng)designWidth為720時(shí)，在實(shí)際寬度為1440物理像素的屏幕上，1lpx為2px大小。

例如：
1.1vp =在160dpi中的1px，vp保證了不同分辨率下 視覺(jué)效果的等價(jià)性，比如一個(gè)圖標(biāo)，在不同分辨率下都是視覺(jué)效果是等價(jià)。
?? 應(yīng)用場(chǎng)景:適合絕大多數(shù)場(chǎng)景。
2.1fp=在160dpi中的1px 乘以系統(tǒng)的縮放比例。
?? 應(yīng)用場(chǎng)景:用來(lái)設(shè)定字體大小，且需要支持系統(tǒng)字體大小調(diào)整時(shí)使用。
3.designWidth =1440， 1lpx= 1px
? 應(yīng)用場(chǎng)景:對(duì)于UI圖，部分需要高度還原的場(chǎng)景使用。

desingnWidth在這個(gè)文件夾里設(shè)置。

?四、鴻蒙布局介紹

1、Row與Column線(xiàn)性布局

線(xiàn)性布局是開(kāi)發(fā)中最常用的布局，通過(guò)線(xiàn)性容器Row和Column構(gòu)建。線(xiàn)性布局是其他布局的基礎(chǔ)，其子元素在線(xiàn)性方向上(水平方向和垂直方向)依次排列。線(xiàn)性布局的排列方向由所選容器組件決定
Column容器內(nèi)子元素按照垂直方向排列，Row容器內(nèi)子元素按照水平方向排列。根據(jù)不同的排列方向，開(kāi)發(fā)者可選擇使用Row或Column容器創(chuàng)建線(xiàn)性布局。

?布局容器:具有布局能力的容器組件，可以承載其他元素作為其子元素，布局容器會(huì)對(duì)其子元素進(jìn)行尺寸計(jì)算和布局排列。
布局子元素:布局容器內(nèi)部的元素。
主軸:線(xiàn)性布局容器在布局方向上的軸線(xiàn)，子元素默認(rèn)沿主軸排列。Row容器主軸為水平方向，Column容器主軸為垂直方向。
交叉軸: 垂直于主軸方向的軸線(xiàn)。Row容器交叉軸為垂直方向，Column容器交叉軸為水平方向。
間距:布局子元素的間距。

@Entry
@Component
struct PageDpi {@State message: string = 'Hello World'build() {// Row() {//   Text("rr").width(100).height(100).backgroundColor(Color.Red)//   Text("ff").width(100).height(100).backgroundColor(Color.Blue)//   Text("aa").width(100).height(100).backgroundColor(Color.Yellow)// }// // 主軸的方向————>水平// .justifyContent(FlexAlign.SpaceEvenly)// // 交叉軸的方向————>垂直// .alignItems(VerticalAlign.Top)// .height('100%').backgroundColor(Color.Pink).width("100%")// Column() {//   Text("rr").width(100).height(100).backgroundColor(Color.Red)//   Text("ff").width(100).height(100).backgroundColor(Color.Blue)//   Text("aa").width(100).height(100).backgroundColor(Color.Yellow)// }// // 主軸的方向————>垂直// .justifyContent(FlexAlign.SpaceEvenly)// // 交叉軸的方向————>水平// .alignItems(HorizontalAlign.Start)// .height('100%').backgroundColor(Color.Pink).width("100%")Row() {Column() {Row(){Button("退出")Blank()//撐滿(mǎn)空白的組件Text("主頁(yè)")Blank()Button("確定")}.width("100%").backgroundColor(Color.Gray)Row({space:50}) {Text("rr").layoutWeight(1).height(100).backgroundColor(Color.Red)Text("ff").layoutWeight(1).height(100).backgroundColor(Color.Blue)Text("aa").layoutWeight(1).height(100).backgroundColor(Color.Orange)}.justifyContent(FlexAlign.Start)Row({space:10}){Text("username")TextInput().layoutWeight(100).backgroundColor(Color.Orange)}.margin(10)}.width("100%").height("100%").justifyContent(FlexAlign.Start)}.height("100%")}
}

2、層疊布局-Stack

層疊布局(StackLayout)用于在屏幕上預(yù)留一塊區(qū)域來(lái)顯示組件中的元素，提供元素可以重疊的布局。層疊布局通過(guò)Stack容器組件實(shí)現(xiàn)位置的固定定位與層疊，容器中的子元素(子組件)依次入棧，后一個(gè)子元素覆蓋前一個(gè)子元素，子元素可以疊加，也可以設(shè)置位置。

@Entry
@Component
struct PageStack1 {@State message: string = 'Hello World'build() {Row() {Column() {Stack() {Text("龍").fontSize(50).fontWeight(FontWeight.Bold).width(300).height(300).backgroundColor(Color.Orange)Text("兔").fontSize(50).fontWeight(FontWeight.Bold).width(100).height(100).backgroundColor(Color.Red)//.alignContent(Alignment.TopStart)設(shè)置顯示的位置}.alignContent(Alignment.TopStart).height(350).backgroundColor(Color.Gray).width(350)Stack() {Text("兔").fontSize(50).fontWeight(FontWeight.Bold).width(100).height(100).backgroundColor(Color.Red).zIndex(2)//zIndex優(yōu)先級(jí)Text("龍").fontSize(50).fontWeight(FontWeight.Bold).width(300).height(300).backgroundColor(Color.Orange)}}.width('100%')}.height('100%')}
}

層疊布局舉例，回到頂部功能：

@Entry
@Component
struct PageStack2 {@State message: string = 'Hello World'@State list: string[] = ["子（鼠）", "丑（牛）", "寅（虎）", "卯（兔）", "辰（龍）", "巳（蛇）", "午（馬）", "未（羊）", "申（猴）", "酉（雞）", "戌（狗）", "亥（豬）"]@State isShow: boolean = falsescrolly:Scroller=new Scroller();build() {Row() {Column() {Stack() {List({scroller:this.scrolly}) {ForEach(this.list, item => {ListItem() {Text(item).fontSize(25)}.width("100%").height(200)})}.onScrollIndex((start, end) => {if(end>4){this.isShow=true}else{this.isShow=false}})if (this.isShow) {Text("回頂部").backgroundColor(Color.Orange).borderRadius(10).width(100).height(50).fontSize(27).textAlign(TextAlign.Center).margin(18).onClick(()=>{this.scrolly.scrollToIndex(0)})}}.alignContent(Alignment.BottomEnd)}.width('100%')}.height('100%')}
}

3、彈性布局

彈性布局Flex 提供更加有效的方式對(duì)容器中的子元素進(jìn)行排列、對(duì)齊和分配剩余空間。容器默認(rèn)存在主軸與交叉軸，子元素默認(rèn)沿主軸排列，子元素在主軸方向的尺寸稱(chēng)為主軸尺寸，在交叉軸方向的尺寸稱(chēng)為交叉軸尺寸。彈性布局在開(kāi)發(fā)場(chǎng)景中用例特別多，比如頁(yè)面頭部導(dǎo)航欄的均勻分布、頁(yè)面框架的搭建、多行數(shù)據(jù)的排列等等。

@Entry
@Component
struct PageFlex {@State message: string = 'Hello World'build() {Row() {Column() {// Flex({//   direction:FlexDirection.Row,//方向//   justifyContent:FlexAlign.Center,//主軸//   // alignItems:ItemAlign.Baseline//   alignItems:ItemAlign.Center,// }){//   Text("111").width(100).height(100).backgroundColor(Color.Black).//   alignSelf(ItemAlign.Start)//   Text("222").width(100).height(200).backgroundColor(Color.Red)//   Text("333").width(100).height(100).backgroundColor(Color.Orange)//     .alignSelf(ItemAlign.End)// }.width(400).height(400).backgroundColor(Color.Gray)//   Flex({//     direction: FlexDirection.Row, //方向//     justifyContent: FlexAlign.Start, //主軸//     // alignItems:ItemAlign.Baseline//     alignItems: ItemAlign.Center,//     wrap: FlexWrap.Wrap//   }) {//     Text("111").width("50%").height(100).backgroundColor(Color.Black)//     Text("222").width("50%").height(100).backgroundColor(Color.Red)//     Text("333").width("50%").height(100).backgroundColor(Color.Orange)//   }.width(400).height(400).backgroundColor(Color.Gray)// }Flex({direction: FlexDirection.Row, //方向justifyContent: FlexAlign.Start, //主軸// alignItems:ItemAlign.BaselinealignItems: ItemAlign.Center}) {Text("111").width(100).height(100).backgroundColor(Color.Black).flexGrow(1)//相當(dāng)于權(quán)重Text("222").width(100).height(100).backgroundColor(Color.Red).flexGrow(1)Text("333").width(100).height(100).backgroundColor(Color.Orange).flexGrow(1)}.width(400).height(400).backgroundColor(Color.Gray)}.width('100%')}.height('100%')
}
}

4、柵格布局

柵格布局是一種通用的輔助定位工具，對(duì)移動(dòng)設(shè)備的界面設(shè)計(jì)有較好的借鑒作用。主要優(yōu)勢(shì)包括:
1.提供可循的規(guī)律: 柵格布局可以為布局提供規(guī)律性的結(jié)構(gòu)，解決多尺寸多設(shè)備的動(dòng)態(tài)布局問(wèn)題。通過(guò)將頁(yè)面劃分為等寬的列數(shù)和行數(shù)，可以方便地對(duì)頁(yè)面元素進(jìn)行定位和排版。
2.統(tǒng)一的定位標(biāo)注:柵格布局可以為系統(tǒng)提供一種統(tǒng)一的定位標(biāo)注，保證不同設(shè)備上各個(gè)模塊的布局一致性。這可以減少設(shè)計(jì)和開(kāi)發(fā)的復(fù)雜度，提高工作效率。
3.靈活的間距調(diào)整方法:柵格布局可以提供一種靈活的間距調(diào)整方法滿(mǎn)足特殊場(chǎng)景布局調(diào)整的需求。通過(guò)調(diào)整列與列之間和行與行之間的間距，可以控制整個(gè)頁(yè)面的排版效果。
4.自動(dòng)換行和自適應(yīng):柵格布局可以完成一對(duì)多布局的自動(dòng)換行和自適應(yīng)。當(dāng)頁(yè)面元素的數(shù)量超出了一行或一列的容量時(shí)，他們會(huì)自動(dòng)換到下一行或下一列，并且在不同的設(shè)備上自適應(yīng)排版，使得頁(yè)簡(jiǎn)布局更加靈活和適應(yīng)性強(qiáng)。
5.在GridRow柵格組件中，允許開(kāi)發(fā)者使用breakpoints自定義修改斷點(diǎn)的取值范圍，最多支持6個(gè)斷點(diǎn)，除了默認(rèn)的四個(gè)斷點(diǎn)外，還可以啟用xl，xxl兩個(gè)斷點(diǎn)，支持六種不同尺寸 (xs,sm,md,lg,xl,xxl)設(shè)備的布局設(shè)置。

斷點(diǎn)名稱(chēng)????????????????? 設(shè)備描述
? xs:????????????????????? 最小寬度類(lèi)型設(shè)備
?sm:???????????????????? 小寬度類(lèi)型設(shè)備
md:???????????????????? 中等寬度類(lèi)型設(shè)備
? lg:????????????????????? 大寬度類(lèi)型設(shè)備
? xl:?????????????????????? 特大寬度類(lèi)型設(shè)備
xxl:?????????????????????? 超大寬度類(lèi)型設(shè)備

?breakpoints: [value: ['320vp'，'520vp'，'840vp'，"1080vp',?? '2000vp']}

@Entry
@Component
struct PageGrid {@State message: string = 'Hello World'@State bgColors: Color[] = [Color.Gray, Color.Red, Color.Orange, Color.Black, Color.Blue, Color.Pink, Color.Brown, Color.Yellow]build() {Row() {// 默認(rèn)12柵格// GridRow({//   breakpoints: { value: ["200vp", "300vp", "400vp", "500vp", "600vp"] },// }) {//   ForEach(this.bgColors, (item, index) => {//     GridCol({//       span: { xs:12, sm:6, md:4, lg:3, xl:2 }//一個(gè)孩子占幾份//     }) {//       Row() {//             Text((index+1)+"").width("100%").height("50")//       }//     }.backgroundColor(item)//   })// }.width("100%")// 這個(gè)方法常用GridRow({direction:GridRowDirection.RowReverse,//反向排列g(shù)utter:10,columns: { xs:1, sm:2, md:4, lg:6, xxl:8 },breakpoints: { value: ['200vp', '300vp', '400vp', '500vp', '600vp'] },}) {ForEach(this.bgColors, (item, index) => {GridCol() {Row() {Text(`${index+1}`).width("100%").height(50)}}.backgroundColor(item)})}.width("100%")}.height('100%')}
}

?5、網(wǎng)格布局

網(wǎng)格布局是由“行”和“列"“分割的單元格所組成，通過(guò)指定“項(xiàng)目”所在的單元格做出各種各樣的布局。網(wǎng)格布局具有較強(qiáng)的頁(yè)面均分能力，子組件占比控制能力，是一種重要自適應(yīng)布局，其使用場(chǎng)景有九宮格圖片展示、日歷、計(jì)算器等。
通過(guò)設(shè)置行列數(shù)量與尺寸占比可以確定網(wǎng)格布局的整體排列方式。Grid組件提供了rowsTemplate和columnsTemplate屬性用于設(shè)置網(wǎng)格布局行列數(shù)量與尺寸占比。rowsTemplate和columnsTemplate屬性值是一個(gè)由多個(gè)空格和數(shù)字+fr"間隔拼接的字符串，r的個(gè)數(shù)即網(wǎng)格布后的行或列數(shù)，fr前面的數(shù)值大小，用于計(jì)算該行或列在網(wǎng)格布局寬度上的占比，最終決定該行或列的寬度。

?

?Grid() {}
.rowsTemplate('lfr 1fr 1fr')
.columnsTemplate('lfr 2fr lfr')

@Entry
@Component
struct PageGrid1 {@State message: string = 'Hello World'@Stylesstyle(){.backgroundColor(Color.Red).width("33.33333%")// .height("50%")}build() {Row() {// Column() {//   Grid(){//     GridItem(){//       Text("111")//     }.style().columnStart(0).columnEnd(1)//     GridItem(){//       Text("222")//     }.style()//     GridItem(){//       Text("333")//     }.style().columnStart(2).columnEnd(3)//     GridItem(){//       Text("444")//     }.style()//     GridItem(){//       Text("555")//     }.style()//     GridItem(){//       Text("666")//     }.style()//   }.width('100%').height(200).columnsTemplate("1fr 1fr 1fr")//   .rowsTemplate("1fr 1fr").columnsGap(10).rowsGap(10)// }// .width('100%')//Column() {Grid() {GridItem() {Text("111")}.style()GridItem() {Text("222")}.style()GridItem() {Text("333")}.style()GridItem() {Text("444")}.style()GridItem() {Text("555")}.style()GridItem() {Text("666")}.style()GridItem() {Text("777")}.style()GridItem() {Text("888")}.style()GridItem() {Text("999")}.style()}.width('100%').height(200)// .columnsTemplate("1fr 1fr 1fr").rowsTemplate("1fr 1fr").columnsGap(10).rowsGap(10)}.width('100%')}.height('100%')}
}