HarmonyOS鴻蒙應(yīng)用開發(fā)授課：課程團(tuán)隊(duì)項(xiàng)目六目錄03綜合案例：模仿美團(tuán)App消息列表頁(yè)面02學(xué)會(huì)使用基礎(chǔ)組件01利用容器組件巧妙布局利用容器組件巧妙布局01常用容器組件(3)層疊布局StackLayout(2)彈性布局FlexLayout(1)線性布局LinearLayout(4)相對(duì)布局RelativeLayout(5)網(wǎng)格布局GridLayout(6)列表布局ListLayout（1）線性布局②Row①ColumnColumnColumn組件以其垂直方向的連續(xù)性，提供了一種直觀且易于導(dǎo)航的界面設(shè)計(jì)方案。它的優(yōu)點(diǎn)在于能夠自然地引導(dǎo)用戶的視線自上而下流動(dòng)，符合用戶閱讀習(xí)慣。這種布局方式在實(shí)現(xiàn)上簡(jiǎn)單明了，使得內(nèi)容的添加和組織變得直接而高效。Column（1）容器接口Column(value?:{space?:string|number})接口方法中參數(shù)value是可選參數(shù)，它是一個(gè)帶有可選字段space的對(duì)象，space表示子組件的間距，默認(rèn)值為0。如果Column組件內(nèi)需要放置子組件，則在后面加上一對(duì)花括號(hào)（{}），在花括號(hào)內(nèi)寫入子組件即可，這也是所有容器組件的通用寫法。Column(value?:{space?:string|number}){

//子組件}Column（2）主軸對(duì)齊Column容器組件提供了justifyContent方法，用于設(shè)置子組件在主軸方向上的對(duì)齊方式。FlexAlign為枚舉類型。justifyContent(value:FlexAlign)Column（3）交叉軸對(duì)齊Column組件提供了alignItems方法，用于設(shè)置子組件在交叉軸方向上的對(duì)齊方式。HorizontalAlign是枚舉類型。alignItems(value:HorizontalAlign)RowRow組件以其水平布局的特性，在UI設(shè)計(jì)中提供了一種高效且靈活的方式來(lái)排列元素。它允許開發(fā)者輕松地在水平方向上組織多個(gè)組件，如按鈕、文本標(biāo)簽或其他自定義組件，同時(shí)保持它們?cè)谝曈X(jué)和功能上的連貫性。Row（1）容器接口Row(value?:{space?:string|number})接口方法中參數(shù)value是可選參數(shù)，它是一個(gè)帶有可選字段space的對(duì)象，space表示子組件的間距，默認(rèn)值為0。如果Row組件內(nèi)需要放置子組件，則在后面加上一對(duì)花括號(hào)（{}），在花括號(hào)內(nèi)寫入子組件即可。Row(value?:{space?:string|number}){

//子組件}Row（2）主軸對(duì)齊Row容器組件提供了justifyContent方法，用于設(shè)置子組件在主軸方向上的對(duì)齊方式。FlexAlign為枚舉類型。justifyContent(value:FlexAlign)Row（3）交叉軸對(duì)齊Row組件提供了alignItems方法，用于設(shè)置子組件在交叉軸方向上的對(duì)齊方式。VerticalAlign是枚舉類型。alignItems(value:VerticalAlign)實(shí)戰(zhàn)操作使用Column和Row組件實(shí)現(xiàn)美團(tuán)紅包頁(yè)面布局。（2）彈性布局①Flex？思考下面的問(wèn)題某個(gè)Row組件包含3個(gè)子組件，但這3個(gè)子組件寬度并不確定，它們會(huì)根據(jù)其內(nèi)部?jī)?nèi)容自動(dòng)伸縮，可能無(wú)法在一行完全顯示，該怎么辦？某個(gè)Row組件包含3個(gè)子組件，在大屏設(shè)備上這個(gè)Row能在一行完全顯示，但是在小屏設(shè)備上后面的子組件可能無(wú)法顯示？此時(shí)需要一種更加靈活的布局方案，讓后面幾個(gè)組件自動(dòng)換行顯示。這就是彈性布局，而Flex便是彈性布局中的一種容器組件。Flex（1）容器接口Flex(value?:FlexOptions)接口方法中參數(shù)value是FlexOptions對(duì)象。對(duì)象中的字段均為可選字段，具體字段如下：{direction?:FlexDirection,//容器組件的主軸方向wrap?:FlexWrap,//容器組件采用單列/行還是多列/行布局justifyContent?:FlexAlign,//子組件的主軸對(duì)齊方式space?:FlexSpaceOptions,//子組件在主軸、交叉軸方向上的間距alignItems?:ItemAlign,//子組件的交叉軸對(duì)齊方式alignContent?:FlexAlign//交叉軸方向上有額外空間時(shí)，多行內(nèi)容的對(duì)齊方式}Flex組件是彈性布局的具體實(shí)現(xiàn)，可以把Flex組件看作更加靈活的Column和Row組件，因此Flex也有主軸、交叉軸、間距等概念。Flex(value?:FlexOptions)接口方法中參數(shù)value是FlexOptions對(duì)象。對(duì)象中的字段均為可選字段，具體字段如下：{direction?:FlexDirection,//容器組件的主軸方向wrap?:FlexWrap,//容器組件采用單列/行還是多列/行布局justifyContent?:FlexAlign,//子組件的主軸對(duì)齊方式space?:FlexSpaceOptions,//子組件在主軸、交叉軸方向上的間距alignItems?:ItemAlign,//子組件的交叉軸對(duì)齊方式alignContent?:FlexAlign//交叉軸方向上有額外空間時(shí)，多行內(nèi)容的對(duì)齊方式}direction：用于設(shè)置Flex組件的主軸方向，參數(shù)類型為FlexDirection枚舉類型，含有Column（列方向）、Row（行方向）、ColumnReverse（列方向反轉(zhuǎn)）、RowReverse（行方向反轉(zhuǎn)）四個(gè)枚舉值。默認(rèn)值為FlexDirection.Row，該值在實(shí)際開發(fā)中最常用。Flex(value?:FlexOptions)接口方法中參數(shù)value是FlexOptions對(duì)象。對(duì)象中的字段均為可選字段，具體字段如下：{direction?:FlexDirection,//容器組件的主軸方向wrap?:FlexWrap,//容器組件采用單列/行還是多列/行布局justifyContent?:FlexAlign,//子組件的主軸對(duì)齊方式space?:FlexSpaceOptions,//子組件在主軸、交叉軸方向上的間距alignItems?:ItemAlign,//子組件的交叉軸對(duì)齊方式alignContent?:FlexAlign//交叉軸方向上有額外空間時(shí)，多行內(nèi)容的對(duì)齊方式}wrap：設(shè)置容器組件采用單行/列還是多行/列布局。參數(shù)類型為FlexWrap枚舉類型，包含以下枚舉值。NoWrap：不換行/列。默認(rèn)值。當(dāng)子組件在主軸上的寬度總和大于父組件時(shí)（即一行或一列排不下時(shí)），子組件寬度會(huì)被壓縮。Wrap：換行/列。每一行/列子組件按照主軸方向排列。WrapReverse：換行/列。每一行/列子組件按照主軸反方向排列。Flex(value?:FlexOptions)接口方法中參數(shù)value是FlexOptions對(duì)象。對(duì)象中的字段均為可選字段，具體字段如下：{direction?:FlexDirection,//容器組件的主軸方向wrap?:FlexWrap,//容器組件采用單列/行還是多列/行布局justifyContent?:FlexAlign,//子組件的主軸對(duì)齊方式space?:FlexSpaceOptions,//子組件在主軸、交叉軸方向上的間距alignItems?:ItemAlign,//子組件的交叉軸對(duì)齊方式alignContent?:FlexAlign//交叉軸方向上有額外空間時(shí)，多行內(nèi)容的對(duì)齊方式}justifyContent：用于設(shè)置子組件的主軸對(duì)齊方式。參數(shù)類型為FlexAlign枚舉類型，包括枚舉值Start、Center、End、SpaceBetween、SpaceAround、SpaceEvenly。默認(rèn)值為FlexAlign.Start。direction取FlexDirection.Row時(shí)，F(xiàn)lexAlign不同枚舉值對(duì)應(yīng)的子組件對(duì)齊效果如圖。Flex(value?:FlexOptions)接口方法中參數(shù)value是FlexOptions對(duì)象。對(duì)象中的字段均為可選字段，具體字段如下：{direction?:FlexDirection,//容器組件的主軸方向wrap?:FlexWrap,//容器組件采用單列/行還是多列/行布局justifyContent?:FlexAlign,//子組件的主軸對(duì)齊方式space?:FlexSpaceOptions,//子組件在主軸、交叉軸方向上的間距alignItems?:ItemAlign,//子組件的交叉軸對(duì)齊方式alignContent?:FlexAlign//交叉軸方向上有額外空間時(shí)，多行內(nèi)容的對(duì)齊方式}space：space用于設(shè)置彈性布局中子組件在主軸、交叉軸方向上的間距。FlexSpaceOptions是一個(gè)包含main（主軸間距）和cross（交叉軸間距）字段的對(duì)象，main和cross的類型為L(zhǎng)engthMetrics。默認(rèn)值為{main:LengthMetrics.vp(0),cross:LengthMetrics.vp(0)}。需要注意的是，space的設(shè)置與justifyContent的設(shè)置有疊加效果。Flex(value?:FlexOptions)接口方法中參數(shù)value是FlexOptions對(duì)象。對(duì)象中的字段均為可選字段，具體字段如下：{direction?:FlexDirection,//容器組件的主軸方向wrap?:FlexWrap,//容器組件采用單列/行還是多列/行布局justifyContent?:FlexAlign,//子組件的主軸對(duì)齊方式space?:FlexSpaceOptions,//子組件在主軸、交叉軸方向上的間距alignItems?:ItemAlign,//子組件的交叉軸對(duì)齊方式alignContent?:FlexAlign//交叉軸方向上有額外空間時(shí)，多行內(nèi)容的對(duì)齊方式}alignItems：用于設(shè)置子組件的交叉軸對(duì)齊方式。參數(shù)類型為ItemAlign枚舉類型，包含枚舉值A(chǔ)uto（默認(rèn)）、Start（首部對(duì)齊）、Center（中間對(duì)齊）、End（尾部對(duì)齊）、Stretch（拉伸填充）、Baseline（文本基線對(duì)齊）。默認(rèn)值為ItemAlign.Start。direction取FlexDirection.Row時(shí)，alignItems不同枚舉值對(duì)應(yīng)的子組件對(duì)齊效果如圖所示。需要注意的是，當(dāng)alignItems取值ItemAlign.Stretch時(shí)，所有子組件在交叉軸方向上的寬度會(huì)被拉伸為最大子組件的寬度。Flex(value?:FlexOptions)接口方法中參數(shù)value是FlexOptions對(duì)象。對(duì)象中的字段均為可選字段，具體字段如下：{direction?:FlexDirection,//容器組件的主軸方向wrap?:FlexWrap,//容器組件采用單列/行還是多列/行布局justifyContent?:FlexAlign,//子組件的主軸對(duì)齊方式space?:FlexSpaceOptions,//子組件在主軸、交叉軸方向上的間距alignItems?:ItemAlign,//子組件的交叉軸對(duì)齊方式alignContent?:FlexAlign//交叉軸方向上有額外空間時(shí)，多行內(nèi)容的對(duì)齊方式}alignContent：用于設(shè)置交叉軸方向上有額外空間時(shí)，多行內(nèi)容的對(duì)齊方式。參數(shù)類型為FlexAlign枚舉類型。該參數(shù)僅在wrap參數(shù)取值為Wrap或WrapReverse時(shí)生效。direction取FlexDirection.Row時(shí)，alignContent不同枚舉值對(duì)應(yīng)的對(duì)齊效果。Flex的子組件的alignSelf屬性alignSelf(value:ItemAlign)對(duì)于Column、Row、Flex組件中的子組件，還可以設(shè)置alignSelf來(lái)控制其在父組件中的交叉軸方向上的位置，其優(yōu)先級(jí)高于父組件的alignItems。實(shí)戰(zhàn)操作使用Flex組件實(shí)現(xiàn)美團(tuán)App訂單評(píng)價(jià)頁(yè)面推薦菜功能（3）層疊布局Stack？問(wèn)題在界面設(shè)計(jì)的世界中，總有一些場(chǎng)景，它們對(duì)布局的要求超越了簡(jiǎn)單的線性排列，如在同一塊區(qū)域上需要放置多個(gè)元素等，這就需要一種更為立體和動(dòng)態(tài)的解決方案，于是層疊布局應(yīng)運(yùn)而生。StackStack組件是層疊布局的一種實(shí)現(xiàn)。Stack組件在屏幕上預(yù)留一塊區(qū)域來(lái)顯示可以重疊的布局。類似于數(shù)據(jù)結(jié)構(gòu)中的棧，Stack組件中的子組件依次入棧，后一個(gè)子組件覆蓋前一個(gè)子組件。（1）容器接口Stack(value?:{alignContent?:Alignment})接口參數(shù)value是包含alignContent可選字段的對(duì)象，用于控制Stack組件中子組件的位置。alignContent類型為Alignment枚舉類型。層疊布局中，alignContent默認(rèn)值為Alignment.Center，居中堆疊。StackStack組件是層疊布局的一種實(shí)現(xiàn)。Stack組件在屏幕上預(yù)留一塊區(qū)域來(lái)顯示可以重疊的布局。類似于數(shù)據(jù)結(jié)構(gòu)中的棧，Stack組件中的子組件依次入棧，后一個(gè)子組件覆蓋前一個(gè)子組件。（2）Z序控制Stack組件中子組件默認(rèn)按加入順序堆疊，先加入的子組件在下層，后加入的子組件在上層。但通過(guò)對(duì)Stack中子組件的zIndex屬性賦值，可以改變子組件的層級(jí)：zIndex越大，顯示在越上層。實(shí)戰(zhàn)操作使用Stack組件實(shí)現(xiàn)：美團(tuán)外賣商家列表頁(yè)面的層疊布局（4）相對(duì)布局RelativeContainer？問(wèn)題容器組件嵌套容器組件的方法雖然在某些情況下可以解決問(wèn)題，但隨著應(yīng)用的擴(kuò)展和界面需求的增加，這種方法可能會(huì)帶來(lái)一些挑戰(zhàn)，如代碼的冗余、維護(hù)的困難，以及更重要的問(wèn)題——性能瓶頸。如圖所示的美團(tuán)直播頁(yè)面該如何布局呢？RelativeContainerRelativeContainer組件是一種實(shí)現(xiàn)相對(duì)布局的容器組件，它支持子組件以父組件或兄弟組件為基準(zhǔn)進(jìn)行定位。這個(gè)基準(zhǔn)組件叫錨點(diǎn)。（1）容器接口接口無(wú)須提供任何參數(shù)。RelativeContainer()RelativeContainerRelativeContainer組件是一種實(shí)現(xiàn)相對(duì)布局的容器組件，它支持子組件以父組件或兄弟組件為基準(zhǔn)進(jìn)行定位。這個(gè)基準(zhǔn)組件叫錨點(diǎn)。（2）子組件alignRules屬性在RelativeContainer組件內(nèi)的子組件會(huì)自動(dòng)獲得alignRules屬性，用來(lái)設(shè)置子組件的對(duì)齊方式。.alignRules({left?:{anchor:string,align:HorizontalAlign},//子組件左邊界的對(duì)齊方式middle?:{anchor:string,align:HorizontalAlign},//子組件橫向中線的對(duì)齊方式right?:{anchor:string,align:HorizontalAlign},//子組件右邊界的對(duì)齊方式top?:{anchor:string,align:VerticalAlign},//子組件上邊界的對(duì)齊方式center?:{anchor:string,align:VerticalAlign},//子組件縱向中線的對(duì)齊方式bottom?:{anchor:string,align:VerticalAlign}//子組件下邊界的對(duì)齊方式})從上述方法中可以看出，針對(duì)橫向和縱向都可以設(shè)置對(duì)齊方式。每個(gè)方向都由anchor（錨點(diǎn)）和align（對(duì)齊方式）組成。anchor中填入錨點(diǎn)組件的id，align按照橫向或縱向取HorizontalAlign或VerticalAlign枚舉的值。這兩個(gè)字段缺一不可。子組件不設(shè)置橫向?qū)R則默認(rèn)為左邊界起始對(duì)齊，不設(shè)置縱向?qū)R則默認(rèn)為上邊界頂部對(duì)齊。注意：容器組件RelativeContainer的id默認(rèn)為“__container__”（在container單詞前后都需要兩條下畫線）RelativeContainerRelativeContainer組件是一種實(shí)現(xiàn)相對(duì)布局的容器組件，它支持子組件以父組件或兄弟組件為基準(zhǔn)進(jìn)行定位。這個(gè)基準(zhǔn)組件叫錨點(diǎn)。（2）精確調(diào)整子組件位置：offset屬性子組件通過(guò)alignRules屬性，只能設(shè)置自己在容器組件內(nèi)的大概位置，如果需要更精確地調(diào)整位置，則可以使用margin屬性或者offset屬性。.offset({x:0,y:-30})實(shí)戰(zhàn)操作美團(tuán)App直播頁(yè)面相對(duì)布局實(shí)現(xiàn)（5）網(wǎng)格布局Grid美團(tuán)App主頁(yè)如圖所示，該頁(yè)面上按行列布滿了各種功能的圖標(biāo)。要實(shí)現(xiàn)該效果，就需要網(wǎng)格布局的強(qiáng)大功能。網(wǎng)格布局是一種靈活的布局系統(tǒng)，它允許開發(fā)者在二維空間內(nèi)創(chuàng)建行和列，從而構(gòu)建結(jié)構(gòu)化的網(wǎng)格系統(tǒng)。Grid網(wǎng)格布局是一種二維布局，由“行”和“列”分割出的單元格組成。（1）容器接口Grid(scroller?:Scroller,layoutOptions?:GridLayoutOptions)接口方法中參數(shù)分別用于控制滾動(dòng)和具體布局。Grid組件的子組件只能是GridItem組件，GridItem組件只能有一個(gè)直接子組件。因此，如果要在GridItem中顯示比較復(fù)雜的內(nèi)容，那么應(yīng)該選擇一個(gè)容器組件作為它的子組件，在容器組件中實(shí)現(xiàn)復(fù)雜的布局。Grid(scroller?:Scroller,layoutOptions?:GridLayoutOptions){GridItem()GridItem()…}Grid網(wǎng)格布局是一種二維布局，由“行”和“列”分割出的單元格組成。（2）接口參數(shù)Grid(scroller?:Scroller,layoutOptions?:GridLayoutOptions)scroller：滾動(dòng)控制器，與可滾動(dòng)組件進(jìn)行綁定，用代碼控制滾動(dòng)，為可選參數(shù)。一個(gè)scroller只能綁定一個(gè)可滾動(dòng)組件。layoutOptions：網(wǎng)格布局選項(xiàng)，用于設(shè)置布局中子組件的大小規(guī)則，為可選參數(shù)Grid網(wǎng)格布局是一種二維布局，由“行”和“列”分割出的單元格組成。（3）設(shè)置主軸方向Grid默認(rèn)按照Row方向進(jìn)行布局，但可以使用以下代碼來(lái)設(shè)置主軸方向。layoutDirection(value:GridDirection)GridDirection枚舉類型有Row、Column、RowReverse、ColumnReverse四個(gè)值可以用來(lái)設(shè)置Grid組件的主軸方向。Grid網(wǎng)格布局是一種二維布局，由“行”和“列”分割出的單元格組成。（4）設(shè)置行間距Grid組件提供了rowGap和columnGap方法來(lái)設(shè)置GridItem組件的行間距和列間距。Grid(this.sroller){//若干GridItem組件}.columnsGap(10).rowsGap(10)Grid網(wǎng)格布局是一種二維布局，由“行”和“列”分割出的單元格組成。（5）設(shè)置行列數(shù)量在網(wǎng)格布局中，首要任務(wù)是進(jìn)行網(wǎng)格的劃分，Grid

組件提供了rowsTemplate方法和columnsTemplate方法來(lái)進(jìn)行網(wǎng)格的劃分，分別用于對(duì)Grid組件進(jìn)行行劃分和列劃分。rowsTemplate(value:string)//把Grid組件劃分成若干行columnsTemplate(value:string)//把Grid組件劃分成若干列這兩個(gè)方法的參數(shù)是由“數(shù)字+fr”間隔空格拼接而成的字符串，“fr”是fraction的縮寫，代表片段。Grid(){

//9個(gè)GridItem組件}.rowsTemplate('1fr1fr1fr').columnsTemplate('1fr2fr1fr')上述代碼構(gòu)建一個(gè)3行3列的網(wǎng)格布局。.rowsTemplate('1fr1fr1fr')將Grid組件的高度劃分成3份，每1行占1份高度。.columnsTemplate('1fr2fr1fr')將Grid組件的寬度劃分為4份，第1列占1份，第2列占2份，第3列占1份。Grid網(wǎng)格布局是一種二維布局，由“行”和“列”分割出的單元格組成。（6）設(shè)置子組件所占行列數(shù)如果要把Grid劃分成如圖所示的不規(guī)則的小塊，僅通過(guò)rowsTemplate方法和columnsTemplate方法是無(wú)法實(shí)現(xiàn)的。子組件GridItem的：rowStart（起始行）方法（≥0）rowEnd（結(jié)束行）方法columnStart（起始列）方法（≥0）columnEnd（結(jié)束列）方法可以實(shí)現(xiàn)單個(gè)網(wǎng)格橫跨多行和（或）多列。實(shí)戰(zhàn)操作實(shí)現(xiàn)不規(guī)則網(wǎng)格分布。實(shí)戰(zhàn)操作實(shí)現(xiàn)美團(tuán)App主頁(yè)功能入口網(wǎng)格布局。（6）列表布局ListListList組件是列表布局的實(shí)現(xiàn)，它是一種復(fù)雜的容器組件。列表布局提供了一種高效的信息呈現(xiàn)方式。它不僅能夠優(yōu)化內(nèi)容的垂直展示，還能夠通過(guò)分組和分隔，增強(qiáng)信息的層次感和邏輯性。通過(guò)在List組件中添加若干個(gè)ListItemGroup（分組列表項(xiàng)）或ListItem（單列表項(xiàng)）子組件，可構(gòu)建一個(gè)功能強(qiáng)大的列表。ListList組件是列表布局的實(shí)現(xiàn)，它是一種復(fù)雜的容器組件。列表布局簡(jiǎn)潔且具有連續(xù)性，提供了一種高效的信息呈現(xiàn)方式。它不僅能夠優(yōu)化內(nèi)容的垂直展示，還能夠通過(guò)分組和分隔，增強(qiáng)信息的層次感和邏輯性。（1）容器接口List(value?:{space?:number|string,initialIndex?:number,scroller?:Scroller})space：主軸方向上的子組件間距。initialIndex：列表初次加載時(shí)，屏幕中列表視窗的第一個(gè)位置顯示的元素的索引。scroller：滾動(dòng)控制器。ListList組件是列表布局的實(shí)現(xiàn)，它是一種復(fù)雜的容器組件。列表布局簡(jiǎn)潔且具有連續(xù)性，提供了一種高效的信息呈現(xiàn)方式。它不僅能夠優(yōu)化內(nèi)容的垂直展示，還能夠通過(guò)分組和分隔，增強(qiáng)信息的層次感和邏輯性。（2）設(shè)置組件布局List組件通過(guò)listDirection方法設(shè)置主軸方向，默認(rèn)主軸方向?yàn)榭v向，大部分情況下主軸方向均為縱向。listDirection(value:Axis)List組件還支持在交叉軸方向上對(duì)子組件進(jìn)行布局。lanes(value:number|LengthConstrain,gutter?:Dimension)lanes方法中，value設(shè)置交叉軸方向上的列數(shù)或行數(shù)，gutter設(shè)置交叉軸方向上子組件的間距。ListList組件是列表布局的實(shí)現(xiàn)，它是一種復(fù)雜的容器組件。列表布局簡(jiǎn)潔且具有連續(xù)性，提供了一種高效的信息呈現(xiàn)方式。它不僅能夠優(yōu)化內(nèi)容的垂直展示，還能夠通過(guò)分組和分隔，增強(qiáng)信息的層次感和邏輯性。（3）添加列表樣式List組件通過(guò)divider方法添加分割線樣式，strokeWidth表示寬度，color表示顏色，startMargin、endMargin則表示分割線距離List組件交叉軸方向的兩條邊的距離。divider(value:{strokeWidth:Length,color?:ResourceColor,startMargin?:Length,endMargin?:Length}|null)List組件通過(guò)scrollBar方法控制滾動(dòng)條的顯示狀態(tài)。BarState包括Auto（操作時(shí)顯示）、Off（始終不顯示）、On（始終顯示）。scrollBar(value:BarState)scrollBarColor(color:Color|number|string)scrollBarWidth(value:number|string)ListList組件是列表布局的實(shí)現(xiàn)，它是一種復(fù)雜的容器組件。列表布局簡(jiǎn)潔且具有連續(xù)性，提供了一種高效的信息呈現(xiàn)方式。它不僅能夠優(yōu)化內(nèi)容的垂直展示，還能夠通過(guò)分組和分隔，增強(qiáng)信息的層次感和邏輯性。（4）渲染列表數(shù)據(jù)List組件的子組件：ListItem（單列表項(xiàng)）和ListItemGroup（分組列表項(xiàng)）。ListItem(value?:{style:ListItemStyle})ListItemStyle：NONE（無(wú)樣式），CARD（卡片樣式），默認(rèn)為NONE。ListItem組件的屬性swipeAction，用于設(shè)置ListItem組件滑出時(shí)展示的組件。其具體形式如下，以List垂直布局為例，start為L(zhǎng)istItem組件向右滑出時(shí)展示的組件，end則為L(zhǎng)istItem組件向左滑出時(shí)展示的組件，edgeEffect為滑動(dòng)效果，onOffsetChange實(shí)時(shí)返回滑動(dòng)操作進(jìn)行時(shí)的偏移量。swipeAction({start?:CustomBuilder|SwipeActionItem,end?:CustomBuilder|SwipeActionItem,edgeEffect?:SwipeEdgeEffect,onOffsetChange?:(offset:number)=>void})注意：ListItem組件只能有一個(gè)子組件，因此要想實(shí)現(xiàn)復(fù)雜的列表項(xiàng)，必須在ListItem組件內(nèi)放置一個(gè)合適的容器組件。實(shí)戰(zhàn)操作創(chuàng)建性別列表ListList組件是列表布局的實(shí)現(xiàn)，它是一種復(fù)雜的容器組件。列表布局簡(jiǎn)潔且具有連續(xù)性，提供了一種高效的信息呈現(xiàn)方式。它不僅能夠優(yōu)化內(nèi)容的垂直展示，還能夠通過(guò)分組和分隔，增強(qiáng)信息的層次感和邏輯性。（4）渲染列表數(shù)據(jù)List組件的子組件：ListItem（單列表項(xiàng)）和ListItemGroup（分組列表項(xiàng)）。ListItemGroup組件是可以讓列表內(nèi)容按規(guī)定的分組顯示的組件，如常見的通信錄按拼音首字母分組順序展示就可以使用ListItemGroup組件實(shí)現(xiàn)。ListItemGroup({header?:CustomBuilder,footer?:CustomBuilder,space?:number|string,style?:ListItemGroupStyle})參數(shù)header和footer分別為用于構(gòu)建ListItemGroup組件頭部和尾部的箭頭函數(shù)，space為L(zhǎng)istItemGroup組件內(nèi)部ListItem組件的間距，其中ListItemGroupStyle包含NONE（無(wú)樣式）和CARD（卡片樣式）兩個(gè)值，默認(rèn)為NONE。ListItemGroup組件的子組件只能是ListItem。ListItemGroup組件通過(guò)divider屬性可以為其內(nèi)部的ListItem組件設(shè)置分隔線。ListList組件是列表布局的實(shí)現(xiàn)，它是一種復(fù)雜的容器組件。列表布局簡(jiǎn)潔且具有連續(xù)性，提供了一種高效的信息呈現(xiàn)方式。它不僅能夠優(yōu)化內(nèi)容的垂直展示，還能夠通過(guò)分組和分隔，增強(qiáng)信息的層次感和邏輯性。（5）列表性能優(yōu)化使用LazyForEach懶加載替代ForEach循環(huán)使用cachedCount屬性來(lái)設(shè)置緩存列表項(xiàng)數(shù)目實(shí)戰(zhàn)操作實(shí)現(xiàn)字母分組通訊錄學(xué)會(huì)使用基礎(chǔ)組件02常用基礎(chǔ)組件(3)按鈕與選擇組件(2)圖片與視頻組件(1)文本顯示與輸入組件（1）文本顯示與輸入組件②RichText①Text③TextInput文本組件的通用樣式名稱描述fontSize文本字號(hào)fontColor文本顏色fontStyle文本樣式fontWeight文本粗細(xì)lineHeight文本行高decoration文本裝飾線Text用于展示文本的組件，通常用于在頁(yè)面上展示一段文本信息。當(dāng)Text組件包含Span、ImageSpan、SymbolSpan和ContainerSpan等子組件時(shí)，Text組件就能讓一段文本呈現(xiàn)豐富的樣式，從而滿足不同的視覺(jué)和信息展示需求。（1）組件接口Text(content?:string|Resource,value?:TextOptions)content：文本的字符串內(nèi)容，可選參數(shù)。content支持常見的轉(zhuǎn)義字符，如\r、\n等。value：文本組件控制器，可選參數(shù)。value用于控制文本顯示的一些特性，如動(dòng)態(tài)設(shè)置文本樣式、關(guān)閉文本選擇菜單等。Text（2）文本對(duì)齊方式Text組件的textAlign屬性用來(lái)設(shè)置文本段落在水平方向上的對(duì)齊方式。不設(shè)置該屬性時(shí)，默認(rèn)為首部對(duì)齊。textAlign(value:TextAlign)TextAlign枚舉值說(shuō)明Start首部對(duì)其Center居中對(duì)齊End尾部對(duì)齊JUSTIFY雙端對(duì)齊案例實(shí)戰(zhàn)textAlign屬性使用演示。Text（3）文本溢出處理Text組件默認(rèn)可以顯示無(wú)限長(zhǎng)的內(nèi)容，但實(shí)際上由于界面交互設(shè)計(jì)的原因，不可能在所有地方都顯示完整的文本，如圖所示的美團(tuán)App商家評(píng)價(jià)列表中，通過(guò)“…”的形式來(lái)表示文本未完整顯示。要實(shí)現(xiàn)這樣的效果，需要對(duì)文本組件進(jìn)行兩點(diǎn)設(shè)置：限制文本行數(shù)

maxLines(value:number)超過(guò)指定行數(shù)時(shí)的處理方式textOverflow(value:{overflow:TextOverflow})TextOverflow枚舉值說(shuō)明None直接截?cái)郈lip直接截?cái)郋llipsis顯示不下用…代替MARQUEE以跑馬燈方式展示注意：當(dāng)選擇MARQUEE時(shí)，maxLines的值自動(dòng)變?yōu)?實(shí)戰(zhàn)操作maxLines和textOverflow聯(lián)合使用對(duì)文本顯示的影響演示RichText當(dāng)文本內(nèi)容帶有HTML標(biāo)簽時(shí)，Text組件將會(huì)直接顯示HTML標(biāo)簽，而RichText組件則會(huì)將相應(yīng)的HTML標(biāo)簽進(jìn)行解析，呈現(xiàn)豐富的樣式，因此RichText組件也叫作富文本組件。RichText當(dāng)文本內(nèi)容帶有HTML標(biāo)簽時(shí)，Text組件將會(huì)直接顯示HTML標(biāo)簽，而RichText組件則會(huì)將相應(yīng)的HTML標(biāo)簽進(jìn)行解析，呈現(xiàn)豐富的樣式，因此RichText組件也叫作富文本組件。（1）組件接口RichText(content:string)參數(shù)content為文本內(nèi)容字符串，可以解析指定HTML標(biāo)簽。支持的HTML標(biāo)簽包括<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<p>、<br>、<font>、<hr>、<image>、<div>、<i>、<u>、<style>、<script>以及標(biāo)簽內(nèi)style屬性等。（2）支持的屬性只支持通用屬性中的width、height、size、layoutWeight四個(gè)屬性。注意：RichText組件不支持通過(guò)屬性或事件來(lái)修改背景色、字體顏色、字號(hào)，以及替換內(nèi)容等操作，且RichText組件比較占用內(nèi)存。對(duì)于復(fù)雜的HTML文本，建議使用Web組件替代RichText組件。TextInputTextInput組件是單行文本輸入組件，允許用戶輸入和編輯文本，是實(shí)現(xiàn)登錄、搜索等功能不可或缺的組件。（1）組件接口TextInput(value?:{placeholder?:ResourceStr,text?:ResourceStr,controller?:TextInputController})placeholder：輸入框無(wú)輸入時(shí)的占位提示文本。text：設(shè)置輸入框內(nèi)容。建議在onChange回調(diào)中實(shí)時(shí)保存該值，以防界面刷新產(chǎn)生問(wèn)題。controller：輸入框控制器，提供一些可以設(shè)置TextInput狀態(tài)的方法，包括stopEditing（停止編輯，縮回鍵盤）、caretPosition（光標(biāo)位置）、setTextSelection（設(shè)置文本選中）等。TextInputTextInput組件是單行文本輸入組件，允許用戶輸入和編輯文本，是實(shí)現(xiàn)登錄、搜索等功能不可或缺的組件。（2）占位提示文本樣式在組件接口中placeholder字段來(lái)顯示占位提示文本。placeholderColor(value:ResourceColor)//設(shè)置占位文本的顏色placeholderFont(value?:Font)//設(shè)置占位文本的字體TextInputTextInput組件是單行文本輸入組件，允許用戶輸入和編輯文本，是實(shí)現(xiàn)登錄、搜索等功能不可或缺的組件。（3）輸入框的種類type(value:InputType)TextInputTextInput組件是單行文本輸入組件，允許用戶輸入和編輯文本，是實(shí)現(xiàn)登錄、搜索等功能不可或缺的組件。（4）限制字符數(shù)輸入框允許無(wú)限輸入字符，但在具體的應(yīng)用場(chǎng)景下，可通過(guò)下列方法限制字符數(shù)：maxLength(value:number)為方便直接進(jìn)行字符計(jì)數(shù)，組件提供了showCounter屬性，自動(dòng)計(jì)數(shù)：showCounter(value:boolean,options?:InputCounterOptions)value：是否顯示字符進(jìn)度計(jì)數(shù)器。true表示顯示，false表示隱藏。options：一個(gè)包含可選字段thresholdPercentage和highlightBorder的對(duì)象，類型分別為number和boolean。thresholdPercentage的取值范圍為[0,100]，它決定何時(shí)顯示字符進(jìn)度計(jì)數(shù)器。當(dāng)“已輸入字符數(shù)>=Math.floor(maxLength*thresholdPercentage/100)”，即達(dá)到顯示閾值時(shí)，顯示字符進(jìn)度計(jì)數(shù)器。highlightBorder表示字符已滿時(shí)，輸入框邊框是否變紅提示。案例實(shí)戰(zhàn)TextInput實(shí)現(xiàn)輸入字符數(shù)限制和進(jìn)度提示。TextInputTextInput組件是單行文本輸入組件，允許用戶輸入和編輯文本，是實(shí)現(xiàn)登錄、搜索等功能不可或缺的組件。（5）實(shí)時(shí)獲取文本內(nèi)容TextInput組件提供了onChange事件來(lái)實(shí)現(xiàn)實(shí)時(shí)獲取文本內(nèi)容：onChange(callback:(value:string,previewText?:PreviewText)=>void)value：實(shí)時(shí)內(nèi)容previewText：預(yù)上屏被內(nèi)容TextInput（6）輸入框鍵盤控制輸入法鍵盤中的“回車鍵”在不同的場(chǎng)景下會(huì)有不同的展現(xiàn)方式，在搜索框彈出鍵盤會(huì)顯示“搜索”，在意見反饋框彈出鍵盤會(huì)顯示“換行”等。可以通過(guò)enterKeyType屬性實(shí)現(xiàn)類似的回車鍵定制行為。enterKeyType(value:EnterKeyType)枚舉值釋義Go開始Search搜索Send發(fā)送Next下一步Done完成PREVIOUS上一步NEW_LINE換行回車鍵（除去換行時(shí)）被點(diǎn)擊時(shí)，將自動(dòng)觸發(fā)TextInput組件的onSubmit事件，同時(shí)TextInput組件失去焦點(diǎn)，鍵盤將自動(dòng)縮回。onSubmit(callback:(enterKey:EnterKeyType,event:SubmitEvent)=>void)實(shí)戰(zhàn)操作通過(guò)回車鍵和“搜索”按鈕兩種方式實(shí)現(xiàn)鍵盤縮回和輸入框內(nèi)容獲取。（2）圖片與視頻組件②Video①ImageImage在ArkUI中顯示圖片需要使用Image組件實(shí)現(xiàn)，Image組件支持的圖片類型有PNG、JPG、BMP、SVG、GIF和HEIF。（1）組件接口Image(src:PixelMap|ResourceStr|DrawableDescriptor)Image(src:PixelMap|ResourceStr|DrawableDescriptor,imageAIOptions:ImageAIOptions)src：圖片數(shù)據(jù)源。imageAIOptions：對(duì)圖片進(jìn)行AI支持，該屬性需要在真機(jī)上起作用。Image（2）加載不同的圖片資源按照?qǐng)D片來(lái)源的不同，可以把圖片資源分為本地圖片、Resource圖片、媒體庫(kù)圖片和網(wǎng)絡(luò)圖片等。①

本地圖片本地圖片即直接放置于工程目錄ets文件夾下任意位置的圖片。以ets為根目錄，書寫逐級(jí)路徑。

Image('pages/images/book_shelf.png')Image（2）加載不同的圖片資源按照?qǐng)D片來(lái)源的不同，可以把圖片資源分為本地圖片、Resource圖片、媒體庫(kù)圖片和網(wǎng)絡(luò)圖片等。②Resource圖片放置在resources文件夾下的圖片。

Image($r('app.media.app_icon'))Image($r('app.media.avatar1'))Image($rawfile('example.png'))Image（2）加載不同的圖片資源按照?qǐng)D片來(lái)源的不同，可以把圖片資源分為本地圖片、Resource圖片、媒體庫(kù)圖片和網(wǎng)絡(luò)圖片等。③

網(wǎng)絡(luò)圖片的加載需要先在模塊的module.json5文件下聲明網(wǎng)絡(luò)訪問(wèn)權(quán)限。

Image('/dfiles/10466/templates/202406/image/icon2.png'))注意：當(dāng)URL中有中文字符時(shí)，可能會(huì)無(wú)法加載圖片，可使用encodeURI方法將URL進(jìn)行編碼后傳入Image組件。Image（2）加載不同的圖片資源按照?qǐng)D片來(lái)源的不同，可以把圖片資源分為本地圖片、Resource圖片、媒體庫(kù)圖片和網(wǎng)絡(luò)圖片等。④媒體庫(kù)圖片的加載對(duì)于當(dāng)前設(shè)備媒體庫(kù)中圖片的訪問(wèn)，同樣傳入字符串作為Image組件的參數(shù)，只不過(guò)字符串內(nèi)容變?yōu)槊襟w庫(kù)圖片URL。

那么如何獲取圖片URL呢？實(shí)戰(zhàn)操作加載媒體庫(kù)圖片Image（3）提升圖片加載體驗(yàn)①

增加占位圖Image組件的alt屬性用來(lái)設(shè)置圖片在加載過(guò)程中顯示的占位圖。alt(value:string|Resource|PixelMap)alt屬性支持本地圖片，不支持網(wǎng)絡(luò)圖片Image（3）提升圖片加載體驗(yàn)②

圖片同步/異步加載Image組件默認(rèn)啟用異步加載，異步加載不會(huì)阻塞主線程，保證在加載圖片時(shí)可以對(duì)應(yīng)用做其他操作，同時(shí)異步加載會(huì)顯示占位圖。syncLoad(value:boolean)是否開啟同步加載：true為同步，false為異步。加載較小尺寸的圖片時(shí)，建議采用同步加載，即設(shè)置syncLoad(true)。Image（3）提升圖片加載體驗(yàn)③

圖片同步/異步加載降低圖片分辨率。在某些場(chǎng)景中，如果不需要以高分辨率顯示圖片，則可以通過(guò)Image組件的sourceSize屬性降低圖片在設(shè)備端的解碼尺寸，降低圖片分辨率，從而減少內(nèi)存占用，實(shí)現(xiàn)頁(yè)面性能優(yōu)化。sourceSize(value:{width:number;height:number})width和height分別用于設(shè)置圖片解碼尺寸寬度和解碼尺寸高度，單位vp。Image（4）圖片加載事件監(jiān)聽加載網(wǎng)絡(luò)圖片時(shí)，了解圖片加載的完整生命周期對(duì)于構(gòu)建一個(gè)健壯且用戶友好的應(yīng)用界面至關(guān)重要。onComplete和onError事件作為圖片加載過(guò)程中的重要環(huán)節(jié)，提供了對(duì)加載成功和加載失敗情況的響應(yīng)能力。onComplete：在圖片加載成功后觸發(fā)onError：在圖片加載過(guò)程中遇到錯(cuò)誤時(shí)觸發(fā)實(shí)戰(zhàn)操作圖片加載成功與加載失敗回調(diào)事件演示。Image（5）掌握?qǐng)D片顯示的自適應(yīng)策略隨著設(shè)備多樣性的增加和用戶對(duì)視覺(jué)質(zhì)量要求的提高，圖片不僅要在不同尺寸的屏幕上清晰顯示，還要能夠根據(jù)組件尺寸的變化靈活調(diào)整自身大小和比例。Image組件通過(guò)objectFit和autoResize屬性，提供了一套靈活的解決方案。①圖片填充效果objectFit屬性使圖片根據(jù)組件的尺寸動(dòng)態(tài)調(diào)整自身尺寸，以最佳的方式填充空間。objectFit(value:ImageFit)實(shí)戰(zhàn)操作圖片填充效果展示。Image（5）掌握?qǐng)D片顯示的自適應(yīng)策略隨著設(shè)備多樣性的增加和用戶對(duì)視覺(jué)質(zhì)量要求的提高，圖片不僅要在不同尺寸的屏幕上清晰顯示，還要能夠根據(jù)組件尺寸的變化靈活調(diào)整自身大小和比例。Image組件通過(guò)objectFit和autoResize屬性，提供了一套靈活的解決方案。②圖片降采樣。圖片降采樣通過(guò)autoResize屬性實(shí)現(xiàn)，它允許圖片在不過(guò)度消耗資源的前提下，智能地降低分辨率以匹配組件的尺寸。autoResize(value:boolean)降采樣解碼時(shí)圖片的部分信息丟失，因此可能會(huì)導(dǎo)致圖片質(zhì)量下降。Image（6）改變圖片顏色通過(guò)fillColor和renderMode屬性，能夠?qū)D片的色彩表現(xiàn)進(jìn)行細(xì)致的調(diào)整，以適應(yīng)不同的設(shè)計(jì)需求和視覺(jué)風(fēng)格。①

fillColor為矢量圖填充顏色fillColor(value:ResourceColor)②renderMode為光柵圖提供控制層renderMode(value:ImageRenderMode)ImageRenderMode包含：Original（原色模式）和Template（黑白模式）案例實(shí)戰(zhàn)圖片顏色更改展示。VideoVideo組件用于播放視頻文件并控制其播放狀態(tài)，常用于短視頻和應(yīng)用內(nèi)部視頻的列表頁(yè)面。當(dāng)視頻完整出現(xiàn)時(shí)會(huì)自動(dòng)播放，用戶點(diǎn)擊視頻區(qū)域則會(huì)暫停播放，同時(shí)顯示播放進(jìn)度條，通過(guò)拖動(dòng)播放進(jìn)度條指定視頻播放到具體位置。（1）組件接口Video(value:VideoOptions)value：用于初始化視頻播放相關(guān)設(shè)置。VideoOptions包含的字段如下。{src?:string|Resource,//視頻數(shù)據(jù)源currentProgressRate?:number|string|PlaybackSpeed,//播放速度previewUri?:string|PixelMap|Resource,//視頻未播放時(shí)展示封面圖controller?:VideoController,//視頻控制器imageAIOptions?:ImageAIOptions,//圖像AI分析選項(xiàng)posterOptions?:ImageAIOptions//視頻播放首幀送顯選項(xiàng)}Video（2）加載視頻資源①

加載本地視頻Video({src:$rawfile('video_course_start.mp4'),previewUri:$r('app.media.img_csharp_start')}).objectFit(ImageFit.Contain)Video（2）加載視頻資源③加載媒體庫(kù)視頻對(duì)于當(dāng)前設(shè)備媒體庫(kù)中視頻的訪問(wèn)，可以傳入媒體庫(kù)視頻URL字符串作為Video組件的src參數(shù)。如何獲取媒體庫(kù)視頻地址呢？實(shí)戰(zhàn)操作加載媒體庫(kù)視頻Video（2）加載視頻資源②

加載網(wǎng)絡(luò)視頻加載網(wǎng)絡(luò)視頻需要申請(qǐng)權(quán)限ohos.permission.INTERNET，具體申請(qǐng)方式參見前面Image組件的相關(guān)內(nèi)容。Video({src:'/example.mp4'})Video（3）設(shè)置視頻屬性Video({src:$rawfile('video_course_start.mp4')})

.muted(false)//靜音屬性，true為靜音

.autoPlay(true)//自動(dòng)播放，true為自動(dòng)播放

.controls(false)//是否顯示控制條，true為顯示控制條

.objectFit(ImageFit.Contain)//內(nèi)容填充模式

.loop(true)//循環(huán)播放，true為循環(huán)播放

.enableAnalyzer(true)//是否激活A(yù)I分析，true為激活A(yù)I分析

.analyzerConfig({

types:[ImageAnalyzerType.OBJECT_LOOKUP]

})

//AI分析配置，配置分析內(nèi)容Video（4）視頻控制器及事件支持實(shí)戰(zhàn)操作模擬免費(fèi)試看視頻后，彈窗提示購(gòu)買會(huì)員，購(gòu)買會(huì)員后繼續(xù)觀看。ButtonButton是按鈕組件，按鈕是UI中最直接的交互元素，它們告訴用戶可以觸發(fā)哪些操作。（1）組件接口Button(label?:ResourceStr,options?:{type?:ButtonType,stateEffect?:boolean})label：按鈕顯示的文字options：type用于設(shè)置按鈕的類型，有Normal（正常矩形）、Capsule（膠囊形）、Circle（圓形）三種；stateEffect用于