1. Toy模板网首页
  2. > Toy博客

鸿蒙Harmony-线性布局（Row/Column）详解

9月前 作者：袁震 分类：Toy博客 阅读(43) 违法举报

这篇具有很好参考价值的文章主要介绍了鸿蒙Harmony-线性布局（Row/Column）详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

人生的下半场，做个简单的人，少与人纠缠，多看大自然，在路上见世界，在途中寻自己。往后余生唯愿开心健康，至于其他，随缘就好！ 

目录

一，定义

二，基本概念

三，布局子元素在排列方向上的间距

四，布局子元素在交叉轴上的对齐方式

4.1 Column容器内子元素在水平方向上的排列

 4.1.1 HorizontalAlign.Start

 4.1.2 HorizontalAlign.Center

4.1.3 HorizontalAlign.End

4.2 Row容器内子元素在垂直方向上的排列

4.2.1 VerticalAlign.Top

4.2.2  VerticalAlign.Center

4.2.3 VerticalAlign.Bottom

五，布局子元素在主轴上的排列方式

5.1 Column容器内子元素在垂直方向上的排列

5.1.1 FlexAlign.Start

5.1.2 FlexAlign.Center

5.1.3 FlexAlign.End

5.1.4 FlexAlign.SpaceBetween

5.1.5 FlexAlign.SpaceAround

5.1.6 FlexAlign.SpaceEvenly

5.2 Row容器内子元素在水平方向上的排列

5.2.1 FlexAlign.Start

5.2.2 FlexAlign.Center

5.2.3 FlexAlign.End

5.2.4 FlexAlign.SpaceBetween

5.2.5 FlexAlign.SpaceAround

5.2.6 FlexAlign.SpaceEvenly

六，自适应拉伸

七， 自适应缩放

八，自适应延伸

8.1 在list中添加滚动条

 8.2 水平方向布局中使用Scroll组件

一，定义

鸿蒙采用了声明式的UI，它的线性布局是Row/Column，类似于Android中的LinearLayout。

线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。

二，基本概念

布局容器：具有布局能力的容器组件，相当于Android中的viewgroup，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。

布局子元素：布局容器内部的元素。

主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向，Column容器主轴为垂直方向。

交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为垂直方向，Column容器交叉轴为水平方向。

间距：布局子元素的间距。

三，布局子元素在排列方向上的间距

在布局容器内，可以通过space属性设置排列方向上子元素的间距，使各子元素在排列方向上有等间距效果。

Column:

@Entry()
@Component
struct Index {

  build() {
    Column({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }
  }
}

效果：

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android

Row:

@Entry()
@Component
struct RowTest {

  build() {
    Row({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }
  }
}

运行效果

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android

四，布局子元素在交叉轴上的对齐方式

在布局容器内，可以通过alignItems属性设置子元素在交叉轴（排列方向的垂直方向）上的对齐方式。且在各类尺寸屏幕中，表现一致。其中，交叉轴为垂直方向时，取值为VerticalAlign类型，水平方向取值为HorizontalAlign

alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式，其优先级高于alignItems属性，如果设置了alignSelf属性，则在单个子元素上会覆盖alignItems属性。

4.1 Column容器内子元素在水平方向上的排列

注意：必须指定Column的宽度，否则无效

 4.1.1 HorizontalAlign.Start

@Entry()
@Component
struct Index {

  build() {
    Column({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }.width("100%")
    .alignItems(HorizontalAlign.Start)
  }
}

运行效果：

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android

 4.1.2 HorizontalAlign.Center

@Entry()
@Component
struct Index {

  build() {
    Column({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }.width("100%")
    .alignItems(HorizontalAlign.Center)
  }
}

运行效果

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android

4.1.3 HorizontalAlign.End

@Entry()
@Component
struct Index {

  build() {
    Column({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }.width("100%")
    .alignItems(HorizontalAlign.End)
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android

4.2 Row容器内子元素在垂直方向上的排列

注意：高度必须指定，否则无效

4.2.1 VerticalAlign.Top

@Entry()
@Component
struct RowTest {

  build() {
    Row({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }.height('100%')
    .alignItems(VerticalAlign.Top)
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android

4.2.2  VerticalAlign.Center

@Entry()
@Component
struct RowTest {

  build() {
    Row({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }.height('100%')
    .alignItems(VerticalAlign.Center)
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android 

4.2.3 VerticalAlign.Bottom

@Entry()
@Component
struct RowTest {

  build() {
    Row({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }.height('100%')
    .alignItems(VerticalAlign.Bottom)
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android

五，布局子元素在主轴上的排列方式

在布局容器内，可以通过justifyContent属性设置子元素在容器主轴上的排列方式。可以从主轴起始位置开始排布，也可以从主轴结束位置开始排布，或者均匀分割主轴的空间。

5.1 Column容器内子元素在垂直方向上的排列

5.1.1 FlexAlign.Start

@Entry()
@Component
struct Index {

  build() {
    Column({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }.width("100%")
     .height("100%")
    .justifyContent(FlexAlign.Start)
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android

5.1.2 FlexAlign.Center

@Entry()
@Component
struct Index {

  build() {
    Column({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }.width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android

5.1.3 FlexAlign.End

@Entry()
@Component
struct Index {

  build() {
    Column({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }.width("100%")
    .height("100%")
    .justifyContent(FlexAlign.End)
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android

5.1.4 FlexAlign.SpaceBetween

垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。

@Entry()
@Component
struct Index {

  build() {
    Column({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }.width("100%")
    .height("100%")
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android

5.1.5 FlexAlign.SpaceAround

垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

@Entry()
@Component
struct Index {

  build() {
    Column({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }.width("100%")
    .height("100%")
    .justifyContent(FlexAlign.SpaceAround)
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android

5.1.6 FlexAlign.SpaceEvenly

垂直方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

@Entry()
@Component
struct Index {

  build() {
    Column({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }.width("100%")
    .height("100%")
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android

5.2 Row容器内子元素在水平方向上的排列

5.2.1 FlexAlign.Start

@Entry()
@Component
struct RowTest {

  build() {
    Row({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }.height('100%')
    .width('100%')
   .justifyContent(FlexAlign.Start)
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android

5.2.2 FlexAlign.Center

@Entry()
@Component
struct RowTest {

  build() {
    Row({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }.height('100%')
    .width('100%')
   .justifyContent(FlexAlign.Center)
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android

5.2.3 FlexAlign.End

@Entry()
@Component
struct RowTest {

  build() {
    Row({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }.height('100%')
    .width('100%')
   .justifyContent(FlexAlign.End)
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android

5.2.4 FlexAlign.SpaceBetween

水平方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。

@Entry()
@Component
struct RowTest {

  build() {
    Row({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }.height('100%')
    .width('100%')
   .justifyContent(FlexAlign.SpaceBetween)
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android

5.2.5 FlexAlign.SpaceAround

水平方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

@Entry()
@Component
struct RowTest {

  build() {
    Row({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }.height('100%')
    .width('100%')
   .justifyContent(FlexAlign.SpaceAround)
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android

5.2.6 FlexAlign.SpaceEvenly

@Entry()
@Component
struct RowTest {

  build() {
    Row({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }.height('100%')
    .width('100%')
   .justifyContent(FlexAlign.SpaceEvenly)
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android

六，自适应拉伸

在线性布局下，常用空白填充组件Blank，在容器主轴方向自动填充空白空间，达到自适应拉伸效果。Row和Column作为容器，只需要添加宽高为百分比，当屏幕宽高发生变化时，会产生自适应效果。

@Entry()
@Component
struct RowTest {

  build() {
    Row({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Blank()
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }.height('100%')
      .width('100%')
    
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android​

七， 自适应缩放

自适应缩放是指子元素随容器尺寸的变化而按照预设的比例自动调整尺寸，适应各种不同大小的设备。在线性布局中，可以使用以下两种方法实现自适应缩放。

7.1 父容器尺寸确定时，使用layoutWeight属性设置子元素和兄弟元素在主轴上的权重，忽略元素本身尺寸设置，使它们在任意尺寸的设备下自适应占满剩余空间。

@Entry()
@Component
struct Index {

  build() {
    Column({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .backgroundColor("#00f")
        .layoutWeight(1)
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .backgroundColor("#0ff")
        .layoutWeight(2)
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .backgroundColor("#35f")
        .layoutWeight(3)
    }.width("100%")
    .height("100%")
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android​

7.2 父容器尺寸确定时，使用百分比设置子元素和兄弟元素的高度，使他们在任意尺寸的设备下保持固定的自适应占比。

@Entry()
@Component
struct Index {

  build() {
    Column({space:20}){
      Text("袁震1")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .backgroundColor("#00f")
        .height("20%")
      Text("袁震2")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .backgroundColor("#0ff")
        .height("30%")
      Text("袁震3")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .backgroundColor("#35f")
        .height("50%")
    }.width("100%")
    .height("100%")
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android​

八，自适应延伸

自适应延伸是指在不同尺寸设备下，当页面的内容超出屏幕大小而无法完全显示时，可以通过滚动条进行拖动展示。这种方法适用于线性布局中内容无法一屏展示的场景。通常有以下两种实现方式。

8.1 在list中添加滚动条

当List子项过多一屏放不下时，可以将每一项子元素放置在不同的组件中，通过滚动条进行拖动展示。可以通过scrollBar属性设置滚动条的常驻状态，edgeEffect属性设置拖动到内容最末端的回弹效果。

@Entry
@Component
struct ScrollExample {
  scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  build() {
    Scroll(this.scroller) {
      Column() {
        ForEach(this.arr, (item?:number|undefined) => {
          if(item){
            Text(item.toString())
              .width('90%')
              .height(150)
              .backgroundColor(0xFFFFFF)
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .margin({ top: 10 })
          }
        }, (item:number) => item.toString())
      }.width('100%')
    }
    .backgroundColor(0xDCDCDC)
    .scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向
    .scrollBar(BarState.On) // 滚动条常驻显示
    .scrollBarColor(Color.Gray) // 滚动条颜色
    .scrollBarWidth(10) // 滚动条宽度
    .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android​

 8.2 水平方向布局中使用Scroll组件

@Entry
@Component
struct ScrollExample {
  scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  build() {
    Scroll(this.scroller) {
      Row() {
        ForEach(this.arr, (item?:number|undefined) => {
          if(item){
            Text(item.toString())
              .height('90%')
              .width(150)
              .backgroundColor(0xFFFFFF)
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .margin({ left: 10 })
          }
        })
      }.height('100%')
    }
    .backgroundColor(0xDCDCDC)
    .scrollable(ScrollDirection.Horizontal) // 滚动方向为水平方向
    .scrollBar(BarState.On) // 滚动条常驻显示
    .scrollBarColor(Color.Gray) // 滚动条颜色
    .scrollBarWidth(10) // 滚动条宽度
    .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
  }
}

鸿蒙Harmony-线性布局（Row/Column）详解,鸿蒙,harmonyos,android文章来源地址https://www.toymoban.com/news/detail-789265.html

到了这里，关于鸿蒙Harmony-线性布局（Row/Column）详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • HarmonyOS 开发基础（八）Row和Column

    HarmonyOS 开发基础（八）Row和Column

    一、Column 容器 1、容器说明： 纵向容器 主轴方向：从上到下纵向 交叉轴方向：从左到右横向 2、容器属性： justifyContent：设置子元素在主轴方向的对齐格式，参数 FlexAlign 枚举 alignItems：设置子元素在交叉轴方向的对齐格式，参数 HorizontalAlign 枚举 3、参数说明： space：内元素

    2024年01月22日
    浏览(41)
  • 鸿蒙HarmonyOS应用开发能找到工作么？_harmony os 应用开发前景

    鸿蒙HarmonyOS应用开发能找到工作么？_harmony os 应用开发前景

    四、如何学习鸿蒙HarmonyOS应用开发技术？ 为了能够帮助大家快速掌握鸿蒙（Harmony NEXT）应用开发技术知识。 首先得是开发语言 ArkTS，这个尤为重要，然后就是ArkUI声明式UI开发、Stage模型、网络/数据库管理、分布式应用开发、进程间通信与线程间通信技术、OpenHarmony多媒体技

    2024年04月27日
    浏览(40)
  • 鸿蒙开发-UI-布局-线性布局

    鸿蒙开发-UI-布局-线性布局

    鸿蒙开发-序言 鸿蒙开发-工具 鸿蒙开发-初体验 鸿蒙开发-运行机制 鸿蒙开发-运行机制-Stage模型 鸿蒙开发-UI 鸿蒙开发-UI-组件 鸿蒙开发-UI-组件-状态管理 鸿蒙开发-UI-应用-状态管理 鸿蒙开发-UI-渲染控制 鸿蒙开发-UI-布局 文章目录 前言 一、基本概念 二、布局子元素 1.子元素

    2024年01月18日
    浏览(44)
  • HarmonyOS鸿蒙开发常用4种布局详细说明

    HarmonyOS鸿蒙开发常用4种布局详细说明

    一直会分享，虽然鸿蒙目前来没有多大发展，但不可否然以后发展，华为的技术是一大突破，存在即合理 可以现在没有多大发展。但不可否定未来的发展。 1、线性布局 2、层叠布局 3、网格布局 4、列表布局 线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row（行

    2024年04月14日
    浏览(53)

  • HarmonyOS鸿蒙开发指南:构建用户界面 构建布局

    目录 布局说明 添加标题行和文本区域 添加图片区域 添加留言区域 添加容器

    2024年02月22日
    浏览(52)
  • 鸿蒙：Harmony开发基础知识详解

    鸿蒙：Harmony开发基础知识详解

    工欲善其事，必先利其器。 上一篇博文实现了一个 \\\"Hello Harmony\\\" 的Demo，今天这篇博文就以 \\\"Hello Harmony\\\"  为例，以官网开发文档为依据，从鸿蒙开发主要的几个方面入手，详细了解一下鸿蒙开发所需的基础知识。 HarmonyOS提供了一套UI开发框架，即 方舟开发框架 （ ArkUI框架 ）

    2024年02月05日
    浏览(52)
  • 鸿蒙Harmony-页面路由（router）详解

    鸿蒙Harmony-页面路由（router）详解

    慢慢理解世界，慢慢更新自己，希望你的每一个昨天，今天，和明天都会很快乐，你知道的，先好起来的从来都不是生活，而是你自己  目录 一，定义 二，页面跳转 2.1使用router.pushUrl 2.2 使用router.replaceUrl 2.3 使用Single模式 2.4 带参数的跳转  三，页面返回  3.1返回到上一个页

    2024年01月20日
    浏览(46)
  • 鸿蒙Harmony-列表组件（List）详解

    鸿蒙Harmony-列表组件（List）详解

    不要和别人比生活，每个人阶段不同，追求不同，活法自然也不同。只要今天的你能比昨天的你快乐一点点，那你就是自己人生赢家。 目录 一，定义 二，布局与约束 2.1 布局 2.2 约束 三，开发布局 3.1 设置主轴方向 3.2设置交叉轴布局 四，迭代列表内容 五，自定义列表样式

    2024年01月17日
    浏览(45)

  • HarmonyOS鸿蒙基于Java开发: Java UI 自定义布局

    当Java UI框架提供的布局无法满足需求时，可以创建自定义布局，根据需求自定义布局规则。 Component类相关接口  表1  Component类相关接口 接口名称 作用 setEstimateSizeListener 设置测量组件的侦听器 setEstimatedSize 设置测量的宽度和高度 onEstimateSize 测量组件的大小以确定宽度和高度

    2024年02月19日
    浏览(53)
  • 鸿蒙Harmony--状态管理器--@Prop详解

    鸿蒙Harmony--状态管理器--@Prop详解

    纵横千里独行客，何惧前路雨潇潇。夜半浊酒慰寂寞，天明走马入红尘。且将新火试新茶，诗酒趁年华。青春以末，壮志照旧，生活以悟，前路未明。时间善变，可执着翻不了篇。时光磨我少年心，却难灭我少年志，壮士活古不活皮。加油。 目录 一，定义 二，装饰器使用规

    2024年02月01日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包