鸿蒙系统提供了大量的UI组件可以使用,通过不同的UI组件组合就可以完成复杂的UI布局。 比如:
容器类的组件如:RelativeContainer、Stack、Row、Column、Flex等
栅格分栏的组件如:GridRow、CridCol等
滚动与滑动组件如:List、Grid、Scroll、Swiper、WaterFlow等
导航类组件如:Navigation、NavRouter、Tabs等
以及很多展示具体UI的组件如:Button、Checkbox、Text、Image、Video等等。
可以发现系统提供的UI组件还是非常多的,
但这些都相当于是预设的组件,面对类似前端那种占位的情况就不太好解决了,所以可以使用如下组件解决:NodeContainer、ContentSlot。
NodeContainer
NodeContainer是一个基础组件,不支持尾随添加子节点。组件接受一个NodeController的实例接口。需要和NodeController组合使用。 示例代码如下: model:
import { NodeController, BuilderNode, FrameNode, UIContext } from '@kit.ArkUI';
declare class Params {
text: string
}
builder:
@Builder
function buttonBuilder(params: Params) {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceEvenly }) {
Text(params.text)
.fontSize(12)
Button(`This is a Button`, { type: ButtonType.Normal, stateEffect: true })
.fontSize(12)
.borderRadius(8)
.backgroundColor(0x317aff)
}
.height(100)
.width(200)
}
NodeController:
class MyNodeController extends NodeController {
private rootNode: BuilderNode<[Params]> | null = null;
private wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(buttonBuilder);
makeNode(uiContext: UIContext): FrameNode | null {
if (this.rootNode === null) {
this.rootNode = new BuilderNode(uiContext);
this.rootNode.build(this.wrapBuilder, { text: "This is a Text" })
}
return this.rootNode.getFrameNode();
}
}
Component:
@Entry
@Component
struct Index {
private baseNode: MyNodeController = new MyNodeController()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceEvenly }) {
Text("This is a NodeContainer contains a text and a button ")
.fontSize(9)
.fontColor(0xCCCCCC)
NodeContainer(this.baseNode)
.borderWidth(1)
.onClick(() => {
console.log("click event");
})
}
.padding({ left: 35, right: 35, top: 35 })
.height(200)
.width(300)
}
}
ContentSlot
用于渲染并管理Native层使用C-API创建的组件。 支持混合模式开发,当容器是ArkTs组件,子组件在Native侧创建时,推荐使用ContentSlot占位组件。 代码如下:
import { nativeNode } from 'libNativeNode.so' // 开发者自己实现的so
import { NodeContent } from '@kit.ArkUI'
@Entry
@Component
struct Parent {
private nodeContent: Content = new NodeContent();
aboutToAppear() {
// 通过C-API创建节点,并添加到管理器nodeContent上
nativeNode.createNativeNode(this.nodeContent);
}
build() {
Column() {
// 显示nodeContent管理器里存放的Native侧的组件
ContentSlot(this.nodeContent)
}
}
}
从以上代码可以看出与正常的UI渲染组件的区别,在需要使用占位组件时,可以参考以上方法。