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

leson 2025-10-09 18:55:04 发布

11136 浏览 271 点赞 0 收藏

“当你的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
    })
  }
}

效果

©本站发布的所有内容，包括但不限于文字、图片、音频、视频、图表、标志、标识、广告、商标、商号、域名、软件、程序等，除特别标明外，均来源于网络或用户投稿，版权归原作者或原出处所有。我们致力于保护原作者版权，若涉及版权问题，请及时联系我们进行处理。

分类

HarmonyOS

标签

HarmonyOS

暂无评论数据

发布

容器组件使用

线性容器布局的使用

相关推荐