《HarmonyOS应用开发基础》 课件知识点2-4-1 弹性布局与层叠布局.pptx

弹性布局与层叠布局

弹性布局Flex弹性布局Flex可以灵活的实现线性布局Row和Column的设置效果，Flex的排列方向和对齐格式是在参数中设置的。参数direction的值决定Flex的排列方向。

弹性布局Flex参数justifyContent的值决定主轴的对齐格式。参数alignItems的值决定交叉轴的对齐格式。

弹性布局Flex-使用示例@Entry@Componentstruct?FlexExample?{??build()?{??????Flex({?direction:?FlexDirection.Row,?justifyContent:?FlexAlign.End,?alignItems:?ItemAlign.Center?})?{????????Text(文本1)??????????.width(30%)??????????.height(50)??????????.backgroundColor(0xF5DEB3)??????????.textAlign(TextAlign.Center)????????Text(文本2)??????????.width(30%)??????????.height(70)??????????.backgroundColor(0xD2B48C)??????????.textAlign(TextAlign.Center)????????Text(文本3)??????????.width(30%)??????????.height(100%)??????????.backgroundColor(0xF5DEB3)??????????.textAlign(TextAlign.Center)??????}.width(100%).height(120).padding(10).backgroundColor(0xAFEEEE)??}}

层叠布局容器Stack层叠布局容器组件Stack，是把子组件按照设置的对齐格式顺序依次堆叠，后一个子组件覆盖在前一个子组件上边。子组件的对齐方式使用alignContent参数来设置。

层叠布局容器Stack-使用示例@Entry@Componentstruct?StackExample?{??build()?{????Stack({?alignContent:?Alignment.Bottom?})?{??????Text(第一个子组件).width(90%).height(100%).backgroundColor(#d2cab3).align(Alignment.Top)??????Text(第二个子组件).width(70%).height(60%).backgroundColor(#c1cbac).align(Alignment.Top)??????Text(第三个子组件).width(50%).height(30%).backgroundColor(#e0e3d8).align(Alignment.Top)????}.width(100%).height(150).margin({?top:?5?})??}}