豐縣住房和城鄉(xiāng)建設局網站,wordpress加密版權,怎么找做網站的客戶,平臺網站模板素材圖片下載一、概述 彈性布局#xff08;Flex#xff09;的效果類似于線性布局#xff08;Column/Row#xff09;#xff0c;也會使子元素呈線性排列#xff0c;但是彈性布局在子元素的排列、對齊和剩余空間的分配等方面更加靈活。 二、參數 Flex組件的參數定義如下#xff0c;下…一、概述彈性布局Flex的效果類似于線性布局Column/Row也會使子元素呈線性排列但是彈性布局在子元素的排列、對齊和剩余空間的分配等方面更加靈活。二、參數Flex組件的參數定義如下下面逐一介紹每個屬性Flex(value?: { direction?: FlexDirection, justifyContent?: FlexAlign, alignItems?: ItemAlign, wrap?: FlexWrap, alignContent?: FlexAlign })2.1 布局方向directiondirection用于設置Flex容器的布局方向即子元素的排列方向其類型FlexDirection為枚舉類型可選的枚舉值如下1布局方向示例代碼pages/component/layout目錄下新建flex目錄新建DirectionPage.ets文件EntryComponentstruct DirectionPage {build() {Column({ space: 50 }) {Flex({ direction: FlexDirection.ColumnReverse }) {Text(1).width(100).height(100).itemTextStyle4()Text(2).width(100).height(100).itemTextStyle4()Text(3).width(100).height(100).itemTextStyle4()}.height(350).width(350).flexStyle4()}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}Extend(Text) function itemTextStyle4() {.textAlign(TextAlign.Center).fontColor(Color.White).fontSize(40).fontWeight(FontWeight.Bold).backgroundColor(#008a00).borderWidth(1)}Extend(Flex) function flexStyle4() {.backgroundColor(#f5f5f5).borderWidth(1)}Flex容器中也有主軸和交叉軸兩個概念其中主軸方向與direction一致交叉軸與主軸垂直具體方向如下2主軸與交叉軸2.2 主軸排列方式justifyContentjustifyContent參數的作用同Column/Row容器的justifyContent()完全相同也是用于設置子元素在主軸方向的排列方式其類型同樣為FlexAlign可選的枚舉值如下3主軸排列方式示例代碼pages/component/layout/flex目錄新建JustifyContentPage.ets文件EntryComponentstruct JustifyContentPage {build() {Column({ space: 50 }) {Flex({direction: FlexDirection.Row,justifyContent: FlexAlign.Start}) {Text(1).width(50).height(50).itemTextStyle5()Text(2).width(50).height(50).itemTextStyle5()Text(3).width(50).height(50).itemTextStyle5()}.height(50).width(300).flexStyle5()}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}Extend(Text) function itemTextStyle5() {.textAlign(TextAlign.Center).fontColor(Color.White).fontSize(40).fontWeight(FontWeight.Bold).backgroundColor(#008a00).borderWidth(1)}Extend(Flex) function flexStyle5() {.backgroundColor(#f5f5f5).borderWidth(1)}2.3 交叉軸對齊方式alignItemsalignItems參數的作用同Column/Row容器的alignItems()相同也是用于設置子元素在交叉軸的對齊方式。但該參數的類型與Column/Row容器的alignItems()方法不同為ItemAlign可選的枚舉值有4交叉軸排列方式示例代碼pages/component/layout/flex目錄新建AlignItemsFlexPage.ets文件EntryComponentstruct AlignItemsFlexPage {build() {Column({ space: 50 }) {Flex({direction: FlexDirection.Row,alignItems: ItemAlign.Baseline}) {Text(Beyond).width(100).height(100).itemTextStyle6()Text(章).width(100).height(200).itemTextStyle6()Text(章).width(100).height(150).itemTextStyle6()}.height(350).width(350).flexStyle6()}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}Extend(Text) function itemTextStyle6() {.textAlign(TextAlign.Center).fontColor(Color.White).fontSize(40).fontWeight(FontWeight.Bold).backgroundColor(#008a00).borderWidth(1)}Extend(Flex) function flexStyle6() {.backgroundColor(#f5f5f5).borderWidth(1)}2.4 布局換行列wrap默認情況下Flex容器的子組件都排在一條線主軸上。當子組件在主軸方向的尺寸之和大于Flex容器時為適應容器尺寸所有子組件的尺寸都會自動收縮。如果需要保持子組件的尺寸不收縮也可選擇令子組件換行列顯示。wrap屬性的作用就是控制如何換行該屬性的類型FlexWrap為枚舉類型可選的枚舉值如下5布局換行示例代碼pages/component/layout/flex目錄新建WrapPage.ets文件EntryComponentstruct WrapPage {build() {Column({ space: 50 }) {Flex({direction: FlexDirection.Row,wrap: FlexWrap.WrapReverse}) {Text(1).width(100).height(100).itemTextStyle7()Text(2).width(100).height(100).itemTextStyle7()Text(3).width(100).height(100).itemTextStyle7()Text(4).width(100).height(100).itemTextStyle7()Text(5).width(100).height(100).itemTextStyle7()Text(6).width(100).height(100).itemTextStyle7()}.height(350).width(350).flexStyle7()}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}Extend(Text) function itemTextStyle7() {.textAlign(TextAlign.Center).fontColor(Color.White).fontSize(40).fontWeight(FontWeight.Bold).backgroundColor(#008a00).borderWidth(1)}Extend(Flex) function flexStyle7() {.backgroundColor(#f5f5f5).borderWidth(1)}2.5 交叉軸多行排列方式alignContent當Flex容器中包含多行列時可使用alignContent設置多行在交叉軸的排列方式該屬性的類型為FlexAlign可選的枚舉值如下6交叉軸多行排列示例代碼pages/component/layout/flex目錄新建AlignContentPage.ets文件EntryComponentstruct AlignContentPage {build() {Column({ space: 50 }) {Flex({direction: FlexDirection.Row,wrap: FlexWrap.Wrap,alignContent: FlexAlign.SpaceAround,}) {Text(1).width(100).height(100).itemTextStyle8()Text(2).width(100).height(100).itemTextStyle8()Text(3).width(100).height(100).itemTextStyle8()Text(4).width(100).height(100).itemTextStyle8()Text(5).width(100).height(100).itemTextStyle8()Text(6).width(100).height(100).itemTextStyle8()}.height(350).width(350).flexStyle8()}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}Extend(Text) function itemTextStyle8() {.textAlign(TextAlign.Center).fontColor(Color.White).fontSize(40).fontWeight(FontWeight.Bold).backgroundColor(#008a00).borderWidth(1)}Extend(Flex) function flexStyle8() {.backgroundColor(#f5f5f5).borderWidth(1)}三、子組件常用屬性3.1 交叉軸對齊alignSelfFlex容器的子組件可以使用alignSelf()方法單獨設置自己的交叉軸對齊方式并且其優(yōu)先級高于Flex容器alignItems。具體效果如下說明alignSelf()的參數類型和alignItems()相同均為ItemAlign枚舉類型且各枚舉值的含義也完全相同。代碼Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start }) {Text(1).width(100).height(100).itemTextStyle()Text(2).width(100).height(200).itemTextStyle()Text(3).width(100).height(150).itemTextStyle().alignSelf(ItemAlign.End) //單獨設置交叉軸對齊方式}.height(300).width(95%).flexStyle()效果7alignSelf示例代碼pages/component/layout/flex目錄新建AlignSelfPage.ets文件EntryComponentstruct AlignSelfPage {build() {Column({ space: 50 }) {Flex({direction: FlexDirection.Row,alignItems: ItemAlign.Start}) {Text(1).width(100).height(100).itemTextStyle9()Text(2).width(100).height(200).itemTextStyle9()Text(3).width(100).height(150).itemTextStyle9().alignSelf(ItemAlign.End)}.height(350).width(350).flexStyle9()}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}Extend(Text) function itemTextStyle9() {.textAlign(TextAlign.Center).fontColor(Color.White).fontSize(40).fontWeight(FontWeight.Bold).backgroundColor(#008a00).borderWidth(1)}Extend(Flex) function flexStyle9() {.backgroundColor(#f5f5f5).borderWidth(1)}3.2 自適應伸縮彈性布局的顯著特點之一是子組件沿主軸方向的尺寸具有彈性即子組件的大小能夠隨著Flex容器尺寸的變化而自動伸縮。這種彈性特性使得Flex布局能夠使子組件更靈活地適應不同的屏幕尺寸和設備。和自適應伸縮的相關的屬性有flexShrink、flexGrow和flexBasis下面逐一介紹3.2.1 flexShrink 壓縮flexShrink用于設置父容器空間不足時子組件的壓縮比例尺寸的具體計算邏輯如下代碼//Flex容器主軸尺寸為240子組件主軸尺寸之和為100*3300Flex() {//尺寸100Text(1).width(100).height(100).flexShrink(0) //不壓縮//主軸尺寸100-(300-240)*(1/3)80Text(2).width(100).height(100).flexShrink(1) //壓縮比例為1//主軸尺寸100-(300-240)*(2/3)60Text(3).width(100).height(100).flexShrink(2) //壓縮比例為2}.height(150).width(240)效果8flexShrink示例代碼pages/component/layout/flex目錄新建FlexShrinkPage.ets文件EntryComponentstruct FlexShrinkPage {build() {Column({ space: 50 }) {Flex({direction: FlexDirection.Row,alignItems: ItemAlign.Center}) {//尺寸100Text(1).width(100).height(100).itemTextStyle10().flexShrink(0) //不壓縮//主軸尺寸100-(300-240)*(1/3)80Text(2).width(100).height(100).itemTextStyle10().flexShrink(1) //壓縮比例為1//主軸尺寸100-(300-240)*(2/3)60Text(3).width(100).height(100).itemTextStyle10().flexShrink(2) //壓縮比例為2}.height(150).width(240).flexStyle10()}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}Extend(Text) function itemTextStyle10() {.textAlign(TextAlign.Center).fontColor(Color.White).fontSize(40).fontWeight(FontWeight.Bold).backgroundColor(#008a00).borderWidth(1)}Extend(Flex) function flexStyle10() {.backgroundColor(#f5f5f5).borderWidth(1)}3.2.2 flexGrow 拉伸flexGrow用于設置父容器空間充足時組件瓜分剩余空間的比例尺寸的具體計算邏輯如下代碼Flex() {//尺寸100Text(1).width(100).height(100).flexGrow(0) //不拉伸//主軸尺寸100(360-300)*(1/3)120Text(2).width(100).height(100).flexGrow(1) //拉伸比例為1//主軸尺寸100(360-300)*(2/3)140Text(3).width(100).height(100).flexGrow(2) //拉伸比例為2}.height(150).width(360)效果9flexGrow示例代碼pages/component/layout/flex目錄新建FlexGrowPage.ets文件EntryComponentstruct FlexGrowPage {build() {Column({ space: 50 }) {Flex({direction: FlexDirection.Row,alignItems: ItemAlign.Center}) {//尺寸100Text(1).width(100).height(100).itemTextStyle11().flexGrow(0) //不拉伸//主軸尺寸100(360-300)*(1/3)120Text(2).width(100).height(100).itemTextStyle11().flexGrow(1) //拉伸比例為1//主軸尺寸100(360-300)*(2/3)140Text(3).width(100).height(100).itemTextStyle11().flexGrow(2) //拉伸比例為2}.height(150).width(360).flexStyle11()}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}Extend(Text) function itemTextStyle11() {.textAlign(TextAlign.Center).fontColor(Color.White).fontSize(40).fontWeight(FontWeight.Bold).backgroundColor(#008a00).borderWidth(1)}Extend(Flex) function flexStyle11() {.backgroundColor(#f5f5f5).borderWidth(1)}3.2.3 flexBasisflexBasis用于設置子組件沿主軸方向的尺寸相當于width或者height的作用。若設置了flexBasis則以flexBasis為準否則以widht或者height為準。