“当你的CSS肌肉记忆遇到鸿蒙ArkUI——不是挑战，而是降维打击！
作为前端开发者，你早已征服Flexbox、玩转Grid布局、驯服响应式设计。现在，鸿蒙生态正以万亿级市场红利敞开大门，而我要告诉你一个被无数同行验证的事实：迁移鸿蒙布局的核心技能，你只需30分钟！喝杯咖啡的时间，你就能让代码在HarmonyOS上华丽绽放！ ”
容器组件使用
前端中声明一个容器 高100 宽100 背景色 边框的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 100px;
height: 100px;
background-color: red;
border: 10px solid black;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
鸿蒙中声明一个容器 高100 宽100 背景色 边框的写法
@Entry
@Component
struct Index {
build() {
//看这里就可以了
Column() {
}.width(100).height(100).backgroundColor(Color.Red)
.border({
width:10,
color:Color.Black,
style:BorderStyle.Solid
})
}
}
PS：鸿蒙中需要单位可以不加默认是vp 前端中单位要写px，核心单词都是一样的，只不过鸿蒙中都是属性方法 一个个点出来的
效果如下 红色的背景，黑色的边框
编辑
线性容器布局的使用
作为前端开发者 容器布局只需要掌握弹性盒（Flex） 在鸿蒙中如果是线性布局相关内容可以直接会
需求：一个大盒子里面有三个小盒子 横向排列 平均分
前端中
<style>
.box{
width: 100%;
display: flex;
flex-direction: row;
}
.box .item{
flex: 1;
background-color: red;
color: wheat;
}
</style>
</head>
<body>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
鸿蒙中
@Entry
@Component
struct 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
@Component
struct 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 子元素水平布局 垂直方向（交叉轴） 垂直居中
前端代码如下
<style>
.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;
}
</style>
</head>
<body>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
前端页面效果
编辑
鸿蒙中代码
@Entry
@Component
struct 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
})
}
}
效果
编辑
同理 如果内容没有平均分 可以设置主轴去控制位置
前端中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
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;
}
</style>
</head>
<body>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
效果 两端对齐中间平分
编辑
鸿蒙中
@Entry
@Component
struct 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
})
}
}
效果
编辑
未完待续，休息时间可以加入班级 看免费的视频学习一下
