HarmonyOS鸿蒙NEXT开发找不到UI组件

HarmonyOS鸿蒙NEXT开发找不到UI组件 想在自己的app中绘制一个如图类似的组件，却没有找到合适的组件类，是否是自定义组件？

有大佬讲解一下基于哪些基础组件可以开发出这种组件吗？

图片


更多关于HarmonyOS鸿蒙NEXT开发找不到UI组件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

这边建议你先把这个网站先看一遍
ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

这个组件官网有现成的
SegmentButtonV2-按钮与选择-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

如果觉得不好用的话，可以自己写
你这个就是一个 Row 包裹了 两个 Button

更多关于HarmonyOS鸿蒙NEXT开发找不到UI组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


找到啦 谢谢大佬，

项目名称

描述

这是一段描述。

基本信息

  • 项目状态: 进行中
  • 开始日期: 2023-01-01
  • 结束日期: 2023-12-31

成员

  • 张三
  • 李四

详细描述

这是项目的详细描述。

https://developer.huawei.com/consumer/cn/samples/ 这是是模板代码，可以找下适合的

可以根据这个三方库进行参考实现

https://ohpm.openharmony.cn/#/cn/detail/lynn_tab_library

你好楼主，我自己写了一个，希望能帮到你。

@Entry
@Component
struct Index {
  @State IsClicked: boolean = true //布尔类型状态变量

  build() {
    Column() {
      Row({ space: 2 }) { //行容器组件，里面包含2个Button按钮
        Button('备忘')
          .width('50%')
          .height(76)
          .type(ButtonType.Capsule) //胶囊类型
          .margin({ left: 2 })
          .backgroundColor(this.IsClicked? Color.White:Color.Transparent) //控制背景色
          .fontColor(this.IsClicked?'#E6BA0B':'#5C5D5D') //控制字体色
          .onClick(() =>{
            this.IsClicked = true
          })
        Button('待办')
          .layoutWeight(1)
          .height(76)
          .type(ButtonType.Capsule)
          .margin({ right: 2 })
          .backgroundColor(this.IsClicked?Color.Transparent:Color.White)
          .fontColor(this.IsClicked? '#5C5D5D':'#E6BA0B')
          .onClick(() =>{
            this.IsClicked = false
          })

      }.height(80).width(300).backgroundColor('#E6E8E9').borderRadius(100)

    }.height('100%').width('100%').justifyContent(FlexAlign.Center)
  }
}

鸿蒙NEXT开发中UI组件位于ArkUI框架中，主要分为两类：

  1. 声明式组件：使用@Entry、@Component装饰器构建，如Column、Text等基础组件
  2. 动态组件：通过API动态创建，如XComponent

关键路径：

  • 基础组件：import { ComponentName } from ‘@ohos.arkui.base’
  • 容器组件：import { Stack, Grid } from ‘@ohos.arkui.advanced’
  • 图形组件：import { Circle, Path } from ‘@ohos.arkui.graphics’

确保SDK版本≥3.1.0，组件文档可在DevEco Studio的API Reference中直接查看。

在HarmonyOS Next中实现类似UI组件，建议基于以下基础组件组合开发：

  1. 使用Column容器作为主布局
  2. 顶部标题栏可以使用Row+Text+Button组合
  3. 中间内容区域建议使用Swiper组件实现滑动切换效果
  4. 底部Tab栏可以使用Row+多个Button组合

关键点：

  • 通过@State管理当前选中状态
  • 使用Swiper的onChange事件同步更新Tab选中状态
  • 样式方面建议使用通用样式能力统一管理

示例代码框架：

@Entry
@Component
struct MyComponent {
  [@State](/user/State) currentIndex: number = 0

  build() {
    Column() {
      // 顶部标题栏
      Row() {
        Text('标题')
        Button('操作')
      }

      // 内容区
      Swiper() {
        // 页面内容...
      }
      .onChange((index: number) => {
        this.currentIndex = index
      })

      // 底部Tab
      Row() {
        Button('Tab1')
          .selected(this.currentIndex === 0)
        Button('Tab2')
          .selected(this.currentIndex === 1)
      }
    }
  }
}

这种组合方式可以灵活实现图示效果，且性能较好。

回到顶部