HarmonyOS开发(五)：常用基础组件

最新推荐文章于 2024-05-06 16:19:54 发布
最新推荐文章于 2024-05-06 16:19:54 发布
阅读量1.2k 收藏
点赞数
文章标签： harmonyos 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/advent_java/article/details/134551221
版权

1、组件介绍

组件（Component）,是界面搭建及显示的最小单元。

组件根据功能可以分为五大类：基础组件、容器组件、媒体组件、绘制组件、画布组件

2、基础组件

基础组件是视图层的基本组成单元，它包含：Text、Image、TextInput、Button、LoadingProgress……

2.1、Text

Text组件可以在界面上展示一段文本信息，它可以包含子组件Span。

对于包含文本文本元素的组件（如：Text,Span,Button,TextInput……）可以使用fontSize()，fontColor()，fontWeight()，fontFamily()，fontStyle()这些文本样式设置文本的大小、颜色、粗细、字体等信息。

名称参数类型描述
fontColorResourceColor设置文本颜色
fontSizeLength | Resource设置文本尺寸，Length为number类型时，使用fp单位
fontStyleFontStyle设置文本的字体样式、默认值：FontStyle.Normal
fontWeightnumber | FontWeight| string

设置文本字体的粗细

number取值是[400,900],间隔是100，值越大越粗

string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular”、“medium”，分别对应FontWeight中相应的枚举值。

默认值：FontWeight.Normal

fontFamilystring | Resource  设置文本的字体列表。使用多个字体，使用“，”进行分割，优先级按顺序生效。例如：“Arial，sans-serif

2.1.1、通用属性与文本样式设置

@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Text('Harmony OS')
          .margin({bottom:15})
        Text('鸿蒙系统')
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
      }
      .width('100%')
    }
    .backgroundColor(0xF1F3F5)
    .height('100%')
  }
}

2.1.2、文本对齐方式设置

@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Text('Harmony OS')
          .margin({bottom:15})
          .width(200)
          .height(50)
          .textAlign(TextAlign.Start)    // 对齐方式
          .backgroundColor(0xE6F2FD)
        Text('鸿蒙系统')
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
      }
      .width('100%')
    }
    .backgroundColor(0xF1F3F5)
    .height('100%')
  }
}

textAlign参数类型为TextAlign,定义了几种类型

  • Start：默认值，水平对齐首部
  • Center：水平居中对齐
  • End：水平对齐尾部

2.1.3、设置文本超长显示

当文本的内容过多超出了Text组件范围时，可以使用textOverflow设置文本截取方式，配合maxLines使用，单独设置不生效

maxLines用来设置文本显示的最大行数

如果把textOverflow设置为Ellipsis，那么它会把显示不下的文本使用“...”表示

@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Text('Harmony OS')
          .margin({bottom:15})
          .width(200)
          .height(50)
          .textAlign(TextAlign.Start)
          .backgroundColor(0xE6F2FD)
        Text('鸿蒙系统')
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
          .margin({bottom:15})
        Text('滨海昌正企业管理有限公司成立于2011年，主要从事母婴行业品牌开发与销售，是集产品研发、品牌运营、销售服务及物流供应链为一体的公司。现有团队人数800人，其中管理人员100+人。')
          .fontSize(18)
          // 文本超长显示设置使用textOverflow配合maxLines一起使用
          .maxLines(1)
          .textOverflow({overflow: TextOverflow.Ellipsis})
          .backgroundColor(0xE6F2FD)
      }
      .width('100%')
    }
    .backgroundColor(0xF1F3F5)
    .height('100%')
  }
}

2.1.4、设置文本装饰线

使用decoration设置文本的装饰线样式及其颜色

它包含两个参数：type用来指定装饰线的样式，其参数类型是TextDecorationType；color用来指定装饰线的颜色，其参数类型是Color，它是一个可选参数。

@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Text('Harmony OS')
          .margin({bottom:15})
          .width(200)
          .height(50)
          .textAlign(TextAlign.Start) // 设置文本对齐方式
          .backgroundColor(0xE6F2FD)
          .fontSize(20)
          .decoration({type: TextDecorationType.Underline, color: Color.Black}) // 设置文本装饰线
        Text('鸿蒙系统')
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
          .margin({bottom:15})
        Text('滨海昌正企业管理有限公司成立于2011年，主要从事母婴行业品牌开发与销售，是集产品研发、品牌运营、销售服务及物流供应链为一体的公司。现有团队人数800人，其中管理人员100+人。')
          .fontSize(18)
          // 超长文本使用textOverflow与maxLines配合设置
          .maxLines(1)
          .textOverflow({overflow: TextOverflow.Ellipsis})
          .backgroundColor(0xE6F2FD)
      }
      .width('100%')
    }
    .backgroundColor(0xF1F3F5)
    .height('100%')
  }
}

TexDecorationType包含以下几种类型：

  • None：表示不使用装饰线
  • Overline：表示使用上划线装饰
  • LineThrough：表示使用删除线来装饰
  • Underline：表示使用下划线装饰

2.2、Image

Image组件用来渲染展示图片，只需要给定图片地址、宽和高，图片就可以加载出来

@Entry
@Component
struct Test {

  build() {
    Row() {
      Column() {
       Image($r("app.media.icon"))
         .width(100)
         .height(100)
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.2.1、设置图片的缩放类型

图片资源放在项目的：src/main/resources/base/media 目录

为了使用图片在页面中有更好的显示效果，有时候需要对图片进行缩放处理。

可以使用objectFit属性来设置图片的缩放类型，其参数的类型是ImageFit。

@Entry
@Component
struct Test {

  build() {
    Row() {
      Column() {
       Image($r("app.media.image"))
         .objectFit(ImageFit.Cover) // 默认的缩放方式
         .width(200)
         .height(300)
         .backgroundColor(0xCCCCCC)
      }
      .width('100%')
    }
    .height('100%')
  }
}

ImageFit包含如下几种类型：

  • Contain：保持宽高比进行缩小或放大，使用得图片完全显示在显示边界中
  • Cover：默认值，保持宽高比进行缩小或放大，使得图边两边都大于或等于显示边界
  • Auto：自适应显示
  • Fill：不保持宽高比进行放大或缩小，使用图片充满显示边界
  • ScaleDown：保持宽高比显示，图片缩小或者保持不变
  • None：保持原极尺寸显示

2.2.2、加载网络图片

如果需要加载网络图片需要在module.json5中申请网络访问权限

{
    "module" : {
        "requestPermissions":[
           {
             "name": "ohos.permission.INTERNET"
           }
        ]
    }
}
@Entry
@Component
struct Test {

  build() {
    Row() {
      Column() {
       Image($r("app.media.image"))
         .objectFit(ImageFit.Contain) // 默认的缩放方式
         .width(200)
         .height(300)
         .backgroundColor(0xCCCCCC)
         .margin({bottom:15})
        // 加载网图图片
        Image('https://p1.itc.cn/q_70/images03/20210217/d74ec9f0a1dc431a87c5cb4742ee17b1.jpeg')
          .width(200)
          .height(200)
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.3、TextInput

TextInput组件用来输入单行文本，响应输入事件。

@Entry
@Component
struct TextInputTest {


  build() {
    Row() {
      Column() {
        TextInput()
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
      }
      .width('100%')
    }
    .height('100%')
  }
}

与Text组件一样，也支持文本样式的设置。

2.3.1、设置输入提示语

要在输入框中添加提示语可以使用placeholder属性来实现，同时还可以使用placeholderColor和placeholderFont来分别设置提示文本的颜色和样式。

@Entry
@Component
struct TextInputTest {


  build() {
    Row() {
      Column() {
        TextInput()
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
          .margin({bottom: 15})
        TextInput({placeholder: '请输入账号'})
          .placeholderColor(0x999999)
          .placeholderFont({size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic})
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.3.2、设置输入类型

可以使用type属性来设置输入框类型。其类型是InputType

@Entry
@Component
struct TextInputTest {


  build() {
    Row() {
      Column() {
        TextInput()
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
          .margin({bottom: 15})
        TextInput({placeholder: '请输入账号'})
          .placeholderColor(0x999999)
          .placeholderFont({size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic})
          .margin({bottom: 15})
        TextInput({placeholder: '请输入密码'})
          .type(InputType.Password) // 指定输入的类型
      }
      .width('100%')
    }
    .height('100%')
  }
}

InputType包含以下几种输入类型：

  • Normal：基本输入模式。支持输入数字、字母、下划线、空格、特殊字符
  • Password：密码输入模式
  • Email：e-mail地址输入模式
  • Number：纯数字输入模式

2.3.3、设置光标的位置

@Entry
@Component
struct TextInputTest {

  controller: TextInputController = new TextInputController();

  build() {
    Row() {
      Column() {
        TextInput()
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
          .margin({bottom: 15})
        TextInput({placeholder: '请输入账号'})
          .placeholderColor(0x999999)
          .placeholderFont({size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic})
          .margin({bottom: 15})
        TextInput({placeholder: '请输入密码'})
          .type(InputType.Password) // 指定输入的类型
          .margin({bottom: 15})
        TextInput({controller: this.controller})
          .margin({bottom: 15})
        Button('设置光标的位置')
          .onClick(() => {
            this.controller.caretPosition(2)  // 设置光标的位置在第二个字符之后
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

上面使用了TextInputColler的caretPosition方法来设置光标所在的位置。

2.3.4、获取输入文本

可以给TextInput设置onChange事件，输入文本发生变化时触发回调，从而拿到输入框中的文本信息。

@Entry
@Component
struct TextInputTest {

  controller: TextInputController = new TextInputController();
  @State username: string = ''; // 保存用户输入的账号

  build() {
    Row() {
      Column() {
        TextInput()
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
          .margin({bottom: 15})
        TextInput({placeholder: '请输入账号'})
          .placeholderColor(0x999999)
          .placeholderFont({size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic})
          .margin({bottom: 15})
        TextInput({placeholder: '请输入密码'})
          .type(InputType.Password) // 指定输入的类型
          .margin({bottom: 15})
        TextInput({controller: this.controller})
          .margin({bottom: 15})
        Button('设置光标的位置')
          .onClick(() => {
            this.controller.caretPosition(2)  // 设置光标的位置在第二个字符之后
          })
          .margin({bottom: 15})
        TextInput({placeholder: 'username'})
          .caretColor(Color.Blue) // 光标的颜色
          .onChange((value: string) => {
            this.username = value;
          })
          .margin({bottom: 15})
        Text(this.username)
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.4、Button

Button组件主要用来响应点击操作，可以包含子组件。

@Entry
@Component
struct ButtonTest {

  build() {
    Row() {
      Column() {
        Button('登录',{type: ButtonType.Capsule, stateEffect: true})
          .width('90%')
          .height(40)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .backgroundColor('#007DFF')
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.4.1、按钮样式

type用来定义按钮的样式，其类型是ButtonType

stateEffect用于设置按钮按下时是否开启切换效果，当状态为false时，点击效果关闭，默认值为true

type的样式可以有如下：

  • Capsule：胶囊型按钮（圆角默认是高度的一半）
  • Circle：圆形按钮
  • Normal：普通按钮（默认，不带圆角）

2.4.2、按钮点击事件

可以给Button绑定onClick事件，当用户点击Button的时候，则会执行onClick方法，调用其中的逻辑代码。

@Entry
@Component
struct ButtonTest {

  @State text: string = '';
  @State isShow: boolean = false;

  build() {
    Row() {
      Column() {
        TextInput({placeholder:'请输入内容'})
          .margin({bottom: 15})
          .onChange((value: string) => {
            this.isShow = false;
            this.text = value;
          })
        Button('登录',{type: ButtonType.Capsule, stateEffect: true})
          .width('90%')
          .height(40)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .backgroundColor('#007DFF')
          .margin({bottom: 15})
          .onClick(() => {  // 绑定按钮点击事件
            this.isShow = !this.isShow;
          })
        if(this.isShow) {
          Text(this.text);
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.4.3、包含子组件按钮

@Entry
@Component
struct ButtonTest {

  @State text: string = '';
  @State isShow: boolean = false;

  build() {
    Row() {
      Column() {
        TextInput({placeholder:'请输入内容'})
          .margin({bottom: 15})
          .onChange((value: string) => {
            this.isShow = false;
            this.text = value;
          })
        Button('登录',{type: ButtonType.Capsule, stateEffect: true})
          .width('90%')
          .height(40)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .backgroundColor('#007DFF')
          .margin({bottom: 15})
          .onClick(() => {  // 绑定按钮点击事件
            this.isShow = !this.isShow;
          })
        if(this.isShow) {
          Text(this.text)
            .margin({bottom: 15})
        }
        Button({type: ButtonType.Circle, stateEffect: true}) {
          // 子组件，在其中放置一个图片
          Image($r('app.media.delete'))
            .width(32)
            .height(32)
        }
        .width(64)
        .height(64)
        .backgroundColor(0x317aff)

      }
      .width('100%')
    }
    .height('100%')
  }
}

2.5、LoadingProgress

这个组件用来显示加载进度。

@Entry
@Component
struct LoadingTest {

  build() {
    Row() {
      Column() {
        LoadingProgress()
          .color(Color.Blue)
          .height(64)
          .width(64)
      }
      .width('100%')
    }
    .height('100%')
  }
}

3、资源引用

Resource是资源引用类型，用于设置组件属性的值。

资源文件（字符串、图片、音频……）统一存放在resources目录下。

开发者可以根据屏幕尺寸呈现不同的局效果，根据语言不同使用不同的字符串。

@Entry
@Component
struct ResourceTest {

  build() {
    Row() {
      Column() {
        Button('登录', {type: ButtonType.Capsule, stateEffect: true})
          .width(300)
          .height(40)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .backgroundColor('#007DFF')
      }
      .width('100%')
    }
    .height('100%')
  }
}

上面的按钮则是写死的，我们可以把相应的资源存放在对应的资源文件中

资源文件的目录：entry/src/main/resources
string.json用来存放字符串资源

{
    "string": [
        {
            "name": "login_text",
            "value": "登录"
        }
    ]
}

同时对于字符串资源需要在en_US,zh_CN目录下对应加上这个login_text键对应的值

en_US目录下的string.json

{
    "string": [
        {
            "name": "login_text",
            "value": "login"
        }
    ]
}

zh_CN目录下的string.json

{
    "string": [
        {
            "name": "login_text",
            "value": "登录"
        }
    ]
}

在float.json中新增如下键值对

{
  "float": [
    {
      "name": "button_width",
      "value": "300vp"
    },
    {
      "name": "button_height",
      "value": "40vp"
    },
    {
      "name": "login_fontSize",
      "value": "18fp"
    }
  ]
}

在color.json中新增一个键button_color

{
  "color": [
    {
      "name": "start_window_background",
      "value": "#FFFFFF"
    },
    {
      "name": "button_color",
      "value": "#1890ff"
    }
  ]
}

配置了上面这些资源后，在使用时就中以以$r('app.type.name')的形式引用应用资源。

type代表资源的类型（或者是资源的存放位置）可以取值是：color,float,string,plural,media

name代表资源的命名

通过引用资源代码可以修改为如下：

@Entry
@Component
struct ResourceTest {

  build() {
    Row() {
      Column() {
        Button($r('app.string.login_text'), {type: ButtonType.Capsule, stateEffect: true})
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .fontSize($r('app.float.login_fontSize'))
          .fontWeight(FontWeight.Medium)
          .backgroundColor($r('app.color.button_color'))
      }
      .width('100%')
    }
    .height('100%')
  }
}

xiaoxie_advent
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HarmonyOS应用开发-常用组件与布局
11-05
简单的登录页面
harmonyos体验-harmonyos-codelabs:和声-codelabs
07-01
ComponentCodelab：这个CodeLab旨在让开发者了解常用组件的常用布局和使用方法。 链接： DistributedVideoCodelab：DistributedVideoCodelab 应用是为了展示跨设备迁移视频能力。 链接： EducationSystem：旨在帮助...
Harmony之学习Column&Row组件的使用
byyourself10的博客
12-17 1088
线性布局容器表示按照垂直方向或者水平方向排列子组件的容器，ArkTS提供了Column和Row容器来实现线性布局。Column表示沿垂直方向布局的容器。Row表示沿水平方向布局的容器。了解布局容器的主轴和交叉轴，主要是为了让大家更好地理解子组件在主轴和交叉轴的排列方式。接下来，我们将详细讲解Column和Row容器的两个属性justifyContent和alignItems。属性名称描述设置子组件在主轴方向上的对齐格式。alignItems设置子组件在交叉轴方向上的对齐格式。
鸿蒙(HarmonyOS)应用开发——基础组件
weixin_46282323的博客
11-29 1267
组件化是一种将复杂的前端应用程序分解成小的、独立的部分的方法。这些部分被称为组件，它们可以重复使用，可以与其他组件组合使用以创建更复杂的组件，并且它们有自己的生命周期和状态。组件化的目的是提高开发效率和代码重用率，使开发人员更专注于组件自身的实现，而不是整个应用程序。这样可以提高代码的可维护性和可扩展性，并且减少了程序出错的机会。组件是界面搭建与显示的最小单位；fill:#333;color:#333;color:#333;fill:none;根据功能分类基础组件容器组件媒体组件绘制组件。
基础ArkTS组件：Text文本，按钮(HarmonyOS学习第三课【3.1】)
最新发布
qq_58213084的博客
05-06 1294
(content?contenttextAlign：设置文本的对其方式，对齐参考系是Text组件本身，只有Text组件本身的宽度大于文本内容长度，textAlign属性才起作用，TextAlignStart（默认值）：根据文字书写相同的方向对齐，比如中文从左往右排版，那么文本则靠左对齐。Center：文本居中对齐。End：根据文字书写相反的方向对齐，比如中文从左往右排版，那么文本则靠右对齐。.textAlign(TextAlign.Center) // 宽度等于文本内容长度，textAlign不起作用。
鸿蒙开发 - 常用UI组件介绍
qq_50260510的博客
12-10 757
本期为鸿蒙开发小白介绍了了一些常见组件的基本用法，一起来看看吧~
HarmonyOS基础组件的使用
m0_73807287的博客
02-06 829
组件根据功能可以分为以下五大类：基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件是视图层的基本组成单元，包括Text、Image、TextInput、Button、LoadingProgress等，例如下面这个常用的登录界面就是由这些基础组件组合而成。Text组件用于在界面上展示一段文本信息，可以包含子组件Span。
鸿蒙应用开发 常用组件与布局
GitHub指北
12-24 1695
HarmonyOS ArkUI 提供了丰富多样的 UI 组件，您可以使用这些组件轻松地编写出更加丰富、漂亮的界面。在本篇 Codelab 中，您将通过一个简单的购物社交应用示例，学习如何使用常用的基础组件和容器组件。本示例主要包含：“登录”、“首页”、“我的”三个页面。
鸿蒙开发-UI-组件
中年程序员
01-05 1582
上文我们学习了解了鸿蒙UI开发基于ArkTS声明式开发方式，了解了ArkUI框架对鸿蒙UI开发的底层支撑，后面我们专注基于ArkTS声明式的鸿蒙UI开发的学习ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。允许开发者组合使用系统组件、及其属性和方法。自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用。通过状态变量的改变，来驱动UI的刷新。
HarmonyOS JS UI前端开发
02-19
随着移动端开发技术的不断发展， 传统的复杂代码开发（ Java、 C） 方式已经无 法满足现今的快速代码开发和迭代的...括开发复杂页面布局， 掌握常用组件、 容器组件和自定义组件的用法， 学会使 用JS FA访问PA的方法。
HarmonyOS应用开发-下拉刷新实现.docx
04-22
下拉刷新是移动应用程序中常用的交互方式，本文将介绍 HarmonyOS 应用开发中下拉刷新的实现。 创建项目 要实现下拉刷新，首先需要创建一个 HarmonyOS 项目。在项目创建完成后，我们可以开始编写代码。 示例代码 ...
HarmonyOS应用开发-XPopup常用的弹窗体验.docx
05-21
组件名：XPopup 作用：内置几种了常用的弹窗，十几种良好的动画，将弹窗和动画的自定义设计的极其简单；目前还没有出现XPopup实现不了的弹窗效果。 内置弹窗允许你使用项目已有的布局，同时还能用上XPopup提供的...
【愚公系列】2023年12月 HarmonyOS应用开发者高级认证（完美答案）
热门推荐
时光隧道
12-12 7万+
HarmonyOS应用开发者基础认证是华为面向广大开发者推出的一项认证计划，旨在帮助开发者提升应用开发能力，进一步推动HarmonyOS应用生态建设。该认证计划可以帮助开发者系统性地学习和掌握HarmonyOS应用开发的基础知识和技能，包括开发环境配置、应用开发、发布等方面。通过考核认证后，开发者可以获得华为官方颁发的认证证书，证明其在HarmonyOS应用开发方面的专业能力和水平，提升自身在招聘和职场等方面的竞争力。
HarmonyOS 常用容器组件1-Row与Column
yyxhzdm的博客
12-02 1833
容器组件是一种比较特殊的组件，它可以包含其他的组件，而且按照一定的规律布局，帮助开发者生成精美的页面。容器组件除了放置基础组件外，也可以放置容器组件，通过多层布局的嵌套，可以布局出更丰富的页面。主轴：在Column容器中的子组件是按照从上到下的垂直方向布局的，其主轴的方向就是垂直方向；在Row容器中的子组件是按照从左到右的水平方向布局的，其主轴的方向就是水平方向。了解布局容器的主轴与交叉轴，主要为了让大家理解组件在主轴与交叉轴上排列的方式。的主轴是垂直方向，交叉轴是水平方向，其参数类型为。
HarmonyOS应用开发者基础认证【闯关习题 满分答案】
如果相遇，那么你好哦~
01-10 1万+
HarmonyOS应用开发者基础认证题库大全
HarmonyOS鸿蒙学习基础篇 - Column/Row 组件
2303_76218115的博客
02-14 2905
Row和Column组件是线性布局容器，用于按照垂直或水平方向排列子组件。Row表示沿水平方向布局的容器，而Column表示沿垂直方向布局的容器。这些容器具有许多属性和方法，可以方便地管理子组件的位置、大小、间距和对齐方式。例如，可以设置容器内部的子组件之间的间距（space属性），以及子组件在主轴（水平或垂直方向）和交叉轴上的对齐方式。
HarmonyOS 组件6--Column和Row组件
weixin_56595425的博客
01-24 1038
窥探HarmonyOS布局之美：线性布局与常见属性解析 在HarmonyOS布局的世界中，线性布局是一个强大的工具，而常见的布局属性则为开发者提供了更多的掌控权。本文将深入探讨Column和Row组件，揭示它们在垂直和水平方向上的布局之美。通过详细解读`justifyContent`、`alignItems`、`padding`和`margin`等属性，我们将带领您创建出更具创意和灵活性的界面。无论您是新手还是经验丰富的开发者，这篇文章都将为您打开HarmonyOS布局
HarmonyOS常用基础组件
旭日的博客
02-04 1701
TabContent的tabBar属性除了支持string类型，还支持使用@Builder装饰器修饰的函数。@Entry@ComponentColumn() {})build() {.tabBar(this.TabBuilder('首页', 0, $r('app.media.home_selected'), $r('app.media.home_normal')))
梅科尔工作室-牛泽-鸿蒙笔记2
2201_75598009的博客
02-03 829
在此基础上，我们可以看到有部分内容在水平方向上由几个基础组件构成，例如页面中间的短信验证码登录与忘记密码以及页面最下方的其他方式登录，那么构建这些内容的时候，可以在Column组件中嵌套Row组件，继而在Row组件中实现水平方向的布局。LoadingProgress组件用于显示加载进展，比如应用的登录界面，当我们点击登录的时候，显示的“正在登录”的进度条状态。容器组件是一种比较特殊的组件，它可以包含其他的组件，而且按照一定的规律布局，帮助开发者生成精美的页面。第一个元素与行首对齐，最后一个元素与行尾对齐。
JS基础语法-HarmonyOS
02-19
本章节的目标是帮助学习者掌握JSUI的基础语法，为后续深入学习基于JSUI的HarmonyOS应用开发奠定基础。主要分为三个部分：HML语法、CSS语法和JS语法。 HML（HarmonyOS Markup Language）类似于HTML，用于定义页面...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值