前端开发者30分钟搞定鸿蒙布局一

“当你的CSS肌肉记忆遇到鸿蒙ArkUI——不是挑战，而是降维打击！
作为前端开发者，你早已征服Flexbox、玩转Grid布局、驯服响应式设计。现在，鸿蒙生态正以万亿级市场红利敞开大门，而我要告诉你一个被无数同行验证的事实：迁移鸿蒙布局的核心技能，你只需30分钟！喝杯咖啡的时间，你就能让代码在HarmonyOS上华丽绽放！”

容器组件使用

前端中声明一个容器   高100  宽100  背景色   边框的写法

     *{ margin: 0; padding: 0; list-style: none; } .box{ width: 100px; height: 100px; background-color: red; border: 10px solid black; }  
 

鸿蒙中声明一个容器   高100  宽100  背景色   边框的写法

 @Entry@Componentstruct Index { build() { //看这里就可以了 Column() { }.width(100).height(100).backgroundColor(Color.Red) .border({ width:10, color:Color.Black, style:BorderStyle.Solid }) }}

PS：鸿蒙中需要单位可以不加默认是vp  前端中单位要写px，核心单词都是一样的，只不过鸿蒙中都是属性方法  一个个点出来的

效果如下  红色的背景，黑色的边框

线性容器布局的使用

作为前端开发者 容器布局只需要掌握弹性盒（Flex） 在鸿蒙中如果是线性布局相关内容可以直接会

需求：一个大盒子里面有三个小盒子 横向排列 平均分

前端中

   .box{ width: 100%; display: flex; flex-direction: row; } .box .item{ flex: 1; background-color: red; color: wheat; }  
 
1
 
2
 
3
 
4
 

鸿蒙中

@Entry@Componentstruct Second { @Styles MyStyle(){ .backgroundColor(Color.Red) } build() { Flex({ direction: FlexDirection.Row }) { Row() { Text(\"1\").fontColor(Color.White) }.flexGrow(1).MyStyle() Row() { Text(\"2\").fontColor(Color.White) }.flexGrow(1).MyStyle() Row() { Text(\"3\").fontColor(Color.White) }.flexGrow(1).MyStyle() } .height(\'100%\') .width(\'100%\') }}

PS：鸿蒙中主要容器是Flex   控制在Flex的方法中添加属性  属性名称和前端Flex的属性名称一样

公共样式可以抽出来用@Styles来包裹 使用的时候点击公共样式的名称就可以了

效果

实操

1：改变主轴方向

代码

@Entry@Componentstruct Second { @Styles MyStyle(){ .backgroundColor(Color.Red) } build() { Flex({ direction: FlexDirection.Column }) { Row() { Text(\"1\").fontColor(Color.White) }.flexGrow(1).MyStyle() Row() { Text(\"2\").fontColor(Color.White) }.flexGrow(1).MyStyle() Row() { Text(\"3\").fontColor(Color.White) }.flexGrow(1).MyStyle() } .height(\'100%\') .width(\'100%\') }}

2：改变交叉轴的位置（交叉轴水平布局的交叉轴是垂直方向，  垂直方向布局的交叉轴就是水平）

修改刚才的代码

容器高度为200  里面子元素高度20  子元素水平布局   垂直方向（交叉轴） 垂直居中

前端代码如下

   .box{ width: 100%; height: 100px; display: flex; flex-direction: row; align-items: center; border: 5px solid blue; } .box .item{ flex: 1; background-color: red; color: wheat; height: 20px; }  
 
1
 
2
 
3
 
4
 

前端页面效果

鸿蒙中代码

@Entry@Componentstruct Second { @Styles MyStyle(){ .backgroundColor(Color.Red) .height(20) } build() { Flex({ direction: FlexDirection.Row, alignItems:ItemAlign.Center }) { Row() { Text(\"1\").fontColor(Color.White) }.flexGrow(1).MyStyle() Row() { Text(\"2\").fontColor(Color.White) }.flexGrow(1).MyStyle() Row() { Text(\"3\").fontColor(Color.White) }.flexGrow(1).MyStyle() } .height(200) .width(\'100%\') .border({ width:10, color:Color.Blue, style:BorderStyle.Solid }) }}

效果

同理 如果内容没有平均分   可以设置主轴去控制位置

前端中

     *{ margin: 0; padding: 0; list-style: none; }  .box{ width: 100%; height: 100px; display: flex; flex-direction: row; align-items: center; justify-content:space-between;/*新增两端对齐 这样的属性有六个 start end center space—around space-evenly*/ border: 5px solid blue; } .box .item{ /* flex: 1;这里注释了 */ background-color: red; color: wheat; height: 20px; }  
 
1
 
2
 
3
 
4
 

效果  两端对齐中间平分

鸿蒙中

@Entry@Componentstruct Second { @Styles MyStyle(){ .backgroundColor(Color.Red) .height(20) } build() { Flex({ direction: FlexDirection.Row, alignItems:ItemAlign.Center, justifyContent:FlexAlign.SpaceBetween }) { Row() { Text(\"1\").fontColor(Color.White) }.MyStyle() Row() { Text(\"2\").fontColor(Color.White) }.MyStyle() Row() { Text(\"3\").fontColor(Color.White) }.MyStyle() } .height(200) .width(\'100%\') .border({ width:10, color:Color.Blue, style:BorderStyle.Solid }) }}

效果

未完待续，休息时间可以加入班级 看免费的视频学习一下

鸿蒙学习认证地址