HarmonyOS 5.0应用开发——ContentSlot的使用

【高心星出品】

文章目录

ContentSlot的使用

用于渲染并管理Native层使用C-API创建的组件同时也支持ArkTS创建的NodeContent对象。

支持混合模式开发,当容器是ArkTS组件,子组件在Native侧创建时,推荐使用ContentSlot占位组件。

ContentSlot只是一个语法节点,无通用属性,不参与布局和渲染,所以布局属性是其父容器提供。

使用方法
复制代码
ContentSlot(content: Content)

这里的content一般提供NodeContent对象,NodeContent对象里面一般放入typenode节点对象,而typenode节点对象可以增加新的typenode节点对象,也可以将@builder全局构建函数转化为ComponentContent加入到typenode对象中,所以ContentSlot的使用结构为:

复制代码
contentslot---->nodecontent--->typenode--->componentcontent--->@builder全局构建函数
案例

接下来通过一个案例展示使用typenode的appchild来增加子节点,和通过addComponentContent来增加子节点两种方式渲染UI界面的方法。

运行结果

全局构建函数

生成一个文本布局

复制代码
interface param {
  str: string
  num: number
}

@Builder
function genitem(p: param) {
  Text(p.str + p.num).fontSize(24).fontWeight(FontWeight.Bolder)
}

typenode生成线性布局

typenode生成线性布局并且设置相关属性。

复制代码
// 创建水平线性布局
let row = typeNode.createNode(this.context, 'Row')
// 设置相关属性
row.attribute.width('100%')
row.attribute.backgroundColor(Color.Red)
row.attribute.justifyContent(FlexAlign.SpaceEvenly)
row.attribute.padding(20)
// 初始化
row.initialize()

typenode生成文本组件和按钮组件

复制代码
// 创建text组件
let text1 = typeNode.createNode(this.context, 'Text')
text1.attribute.fontColor(Color.White).fontWeight(FontWeight.Bolder)
// 初始化文本
text1.initialize('typenode--child1')
// 创建button组件
let button1 = typeNode.createNode(this.context, 'Button')
// 按钮绑定事件  一处文本组件
button1.attribute.onClick(()=>{
  row.removeChild(text1)
})
// 初始化按钮文本
button1.initialize('typenode--child2')
// 加入线性布局中
row.appendChild(text1)
// 加入线性布局中
row.appendChild(button1)

typenode加入componentcontent

复制代码
// 生成componentcontent
let buildercontent = new ComponentContent(this.context, wrapBuilder<[param]>(genitem),
  { str: 'componentcontent--child', num: 1 } as param, { nestingBuilderSupported: true })
// 创建新的线性布局
let row1 = typeNode.createNode(this.context, 'Row')
row1.attribute.padding(20)
row1.initialize()
// 增加节点
row1.addComponentContent(buildercontent)
// 将两个线性布局加入nodecontent
this.content.addFrameNode(row1)
this.content.addFrameNode(row)

在build函数中显示

复制代码
build() {
  Column() {
    //contentslot---->nodecontent--->typenode--->componentcontent
    // 使用contentslot方法显示布局
    ContentSlot(this.content)

  }
  .height('100%')
  .width('100%')
}
完整代码
复制代码
import { ComponentContent, FrameNode, NodeContent, typeNode } from '@kit.ArkUI';

interface param {
  str: string
  num: number
}

@Builder
function genitem(p: param) {
  Text(p.str + p.num).fontSize(24).fontWeight(FontWeight.Bolder)
}

@Entry
@Component
struct Nodecontentpage {
  @State message: string = 'Hello World';
  private context: UIContext = this.getUIContext()
  private content: NodeContent = new NodeContent()

  aboutToAppear(): void {
    // 创建水平线性布局
    let row = typeNode.createNode(this.context, 'Row')
    // 设置相关属性
    row.attribute.width('100%')
    row.attribute.backgroundColor(Color.Red)
    row.attribute.justifyContent(FlexAlign.SpaceEvenly)
    row.attribute.padding(20)
    // 初始化
    row.initialize()
    // 创建text组件
    let text1 = typeNode.createNode(this.context, 'Text')
    text1.attribute.fontColor(Color.White).fontWeight(FontWeight.Bolder)
    // 初始化文本
    text1.initialize('typenode--child1')
    // 创建button组件
    let button1 = typeNode.createNode(this.context, 'Button')
    // 按钮绑定事件  一处文本组件
    button1.attribute.onClick(()=>{
      row.removeChild(text1)
    })
    // 初始化按钮文本
    button1.initialize('typenode--child2')
    // 加入线性布局中
    row.appendChild(text1)
    // 加入线性布局中
    row.appendChild(button1)
    // 生成componentcontent
    let buildercontent = new ComponentContent(this.context, wrapBuilder<[param]>(genitem),
      { str: 'componentcontent--child', num: 1 } as param, { nestingBuilderSupported: true })
    // 创建新的线性布局
    let row1 = typeNode.createNode(this.context, 'Row')
    row1.attribute.padding(20)
    row1.initialize()
    // 增加节点
    row1.addComponentContent(buildercontent)
    // 将两个线性布局加入nodecontent
    this.content.addFrameNode(row1)
    this.content.addFrameNode(row)
  }

  build() {
    Column() {
      //contentslot---->nodecontent--->typenode--->componentcontent
      // 使用contentslot方法显示布局
      ContentSlot(this.content)

    }
    .height('100%')
    .width('100%')
  }
}
     //contentslot---->nodecontent--->typenode--->componentcontent
      // 使用contentslot方法显示布局
      ContentSlot(this.content)

    }
    .height('100%')
    .width('100%')
  }
}
相关推荐
zhanshuo2 天前
ArkUI 玩转水平滑动视图:超全实战教程与项目应用解析
harmonyos·arkui
zhanshuo2 天前
ArkUI Canvas 实战:快速绘制柱状图图表组件
harmonyos·arkui
娅娅梨8 天前
HarmonyOS-ArkUI Web控件基础铺垫4--TCP协议- 断联-四次挥手解析
网络协议·tcp/ip·http·okhttp·harmonyos·arkui·arkweb
儿歌八万首18 天前
HarmonyOS中各种动画的使用介绍
华为·harmonyos·arkts·arkui
儿歌八万首18 天前
HarmonyOS 中状态管理 V2和 V1 的区别
harmonyos·component·arkui
simple丶20 天前
【HarmonyOS】封装用户鉴权工具类
harmonyos·arkts·arkui
simple丶20 天前
【HarmonyOS】基于Axios封装网络请求工具类
harmonyos·arkts·arkui
simple丶20 天前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
程序员小张丶1 个月前
基于React Native的HarmonyOS 5.0房产与装修应用开发
javascript·react native·react.js·房产·harmonyos5.0
程序员小张丶2 个月前
基于React Native的HarmonyOS 5.0休闲娱乐类应用开发
react native·娱乐·harmonyos5.0