HarmonyOS鸿蒙Next中现在原生开发比较难，跟其他应用不一样，组件都是竖立的，需要全新自定义组件

HarmonyOS鸿蒙Next中现在原生开发比较难，跟其他应用不一样，组件都是竖立的，需要全新自定义组件 现在原生开发比较难，跟其他应用不一样，组件都是竖立的，需要全新自定义组件，有没有竖版的组件呢

4 回复

什么叫做组件都是竖立的，要竖版组件？

更多关于HarmonyOS鸿蒙Next中现在原生开发比较难，跟其他应用不一样，组件都是竖立的，需要全新自定义组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


解决方案：开发者您好，针对Text组件如何实现文字垂直方向显示效果，

参考文档： https://developer.huawei.com/consumer/cn/doc/architecture-guides/convenient-life-v1_2-ts_33-0000002337898788

可以参考demo如下：

@Entry
@Component
struct VerticalTextBySplit {
  private texts: string[] = ['设置', '扫一扫', '定时关闭',  '退出']

  @Builder
  verticalText(content: string) {
    Column() {  // 使用Column垂直排列字符
      ForEach(content.split(''), (char:string) => {
        Text(char)
          .fontSize(20)
          .margin(2)
      })
    }
    .width('20%')
    .height(120)
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Center)
  }

  build() {
    RelativeContainer(){
      Column(){
        Row() {
          ForEach(this.texts, (text:string) => {
            this.verticalText(text)
          })

        }
        .width('100%')
        .height(150)
        .justifyContent(FlexAlign.SpaceBetween)
        Text('derbi')
          .width(60)  // 原高度值
          .height(100) // 原宽度值
          .rotate({ angle: 90 })
      }
    }
  }
}

鸿蒙Next原生开发采用ArkTS语言，基于声明式UI范式。组件默认采用垂直布局，这是鸿蒙设计规范的一部分。如需自定义布局，需使用Flex、Grid、Column、Row等容器组件进行组合，并通过属性控制排列方向。自定义组件需继承Component或已有组件，使用@Builder、@Styles等装饰器实现。布局引擎基于弹性盒子模型，可通过justifyContent、alignItems等属性调整。

在HarmonyOS Next中，ArkUI框架默认采用声明式UI开发范式，其组件布局模型确实与传统的Android XML布局或iOS AutoLayout在思维和实现上有显著不同。您提到的“组件都是竖立的”，核心原因在于其默认的Flex弹性布局主轴方向为垂直方向（Column）。

这并不是说缺少“竖版组件”，而是整个布局逻辑需要调整。您无需寻找一个特定的“竖版容器”，关键在于理解并正确设置布局方向。

核心解决方案：使用Flex布局并设置主轴方向

  1. 构建横向布局（您理解的“横版”）： 将Flex、Column或Row容器的主轴方向设置为水平（Row或Flex的direction设置为FlexDirection.Row）。这是构建横向排列组件的标准方式。

    // 示例：使用Row容器构建横向排列
@Entry
@Component
struct MyHorizontalView {
  build() {
    Row({ space: 10 }) { // Row主轴为水平方向
      Text('文本1')
        .fontSize(20)
      Text('文本2')
        .fontSize(20)
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}

  2. 自定义组件： 当基础布局容器（Row， Column， Stack， Flex）和基础组件（Text， Image， Button等）的组合无法满足复杂UI需求时，才需要自定义组件。您可以将常用的、具有特定布局（如横向排列的图标+文字组合）封装成自定义组件，方便复用。

    // 示例：封装一个横向的图标文本组件
@Component
struct IconTextLabel {
  private iconSrc: ResourceStr
  private textContent: string

  build() {
    Row({ space: 5 }) { // 内部使用Row实现横向布局
      Image(this.iconSrc)
        .width(20)
        .height(20)
      Text(this.textContent)
        .fontSize(16)
    }
    .alignItems(VerticalAlign.Center)
  }
}
// 在父组件中使用
@Entry
@Component
struct MyPage {
  build() {
    Column() {
      IconTextLabel({ iconSrc: $r('app.media.icon'), textContent: '菜单项1' })
      IconTextLabel({ iconSrc: $r('app.media.icon'), textContent: '菜单项2' })
    }
  }
}

总结与建议：

  • 布局是关键：HarmonyOS Next ArkUI的布局能力非常强大，请首先深入学习Flex、Row、Column、Stack等布局容器的属性（justifyContent， alignItems， direction）。
  • 无需寻找特定“竖版组件”：您所遇到的情况是因为默认布局方向是垂直的。通过将Row或设置FlexDirection.Row的Flex作为根容器或局部容器，即可轻松创建横向（您描述的“非竖立”）布局。
  • 自定义组件用于复用：将频繁使用的、功能完整的UI单元封装成自定义组件，而不是为了改变基础布局方向。

建议您查阅官方文档的“ArkUI声明式开发范式”部分，重点关注布局概念和容器组件的使用，这能从根本上解决您的适配问题。

回到顶部