HarmonyOS 鸿蒙Next中使用Prop接收父组件传入的State值，子组件出现了奇怪的情况
HarmonyOS 鸿蒙Next中使用Prop接收父组件传入的State值，子组件出现了奇怪的情况 子组件代码
// LucideAccessibility - Lucide icon component for HarmonyOS
// @preview  - https://lucide.dev/icons/accessibility
// @see https://lucide.dev/guide/packages/lucide-harmony
@Component
export struct LucideAccessibility {
@Prop iconSize: number = 24
@Prop strokeColor: ResourceColor = '#000000'
@Prop fillColor: ResourceColor = Color.Transparent
@Prop strokeWidth: number | string = '2px'
build() {
Shape() {
Circle({ width: '2px', height: '2px' })
.offset({ x: '15px', y: '3px' })
Path()
.commands('m18 19 1-7-6 1')
Path()
.commands('m5 8 3-3 5.5 3-2.36 3.5')
Path()
.commands('M4.24 14.5a5 5 0 0 0 6.88 6')
Path()
.commands('M13.76 17.5a5 5 0 0 0-6.88-6')
}
.viewPort({ x: 0, y: 0, width: 24, height: 24 })
.width(this.iconSize)
.height(this.iconSize)
.stroke(this.strokeColor)
.fill(this.fillColor)
.strokeWidth(this.strokeWidth)
.strokeLineCap(LineCapStyle.Round)
.strokeLineJoin(LineJoinStyle.Round)
}
}
父组件代码
import { LucideAArrowUp, LucideAccessibility, LucideLock } from 'lucide';
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
@State iconColor: string = '#00FF00'
@State iconSize: number = 200
build() {
RelativeContainer() {
LucideAArrowUp({ iconSize: this.iconSize, strokeColor: this.iconColor })
Text(this.message)
.id('HelloWorld')
.fontSize($r('app.float.page_text_font_size'))
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
.onClick(() => {
this.iconColor = '#FF0000';
this.iconSize = 180
})
// Shape() {
// Rect().width(30).height(30)
// Rect().width(30).height(30).fill('#FF0000').offset({ x: 30, y: 30 })
// }.width(240).height(240).viewPort({
// width: 180,
// height: 180,
// }).fill('#00FF00').position({ x: 100, y: 100 })
LucideAccessibility({ iconSize: 300, strokeColor: this.iconColor })
}
.height('100%')
.width('100%')
}
}
点击按钮，改变之后的截图
图标字体大小并没有改变，颜色出现了奇怪的变化；另外我的子组件其实是在另外的模块里的
更多关于HarmonyOS 鸿蒙Next中使用Prop接收父组件传入的State值，子组件出现了奇怪的情况的实战教程也可以访问 https://www.itying.com/category-93-b0.html
6 回复
【问题定位】
- 利用ArkUI Inspector查看页面结构，分析点击切换前后的页面布局区别，发现参数能正常传递，颜色和图案位置异常是参数设置问题。
- 颜色异常是由于Path未设置stroke属性。
- Shape组件的viewPort属性定义了逻辑绘制区域的大小，而width/height属性定义了物理显示区域的大小，当物理尺寸变大，但viewPort仍保持不变会导致逻辑绘制区域未同步扩展，因此导致“看起来没变化”的视觉效果。
【分析结论】
- Path组件未设置stroke属性导致切换时颜色异常。
- Shape组件viewPort属性定义了逻辑绘制区域的大小，当物理尺寸变大而逻辑视图不变时会导致切换时图案位置异常。
【修改建议】
- 颜色未同步修改如下：
Shape() {
Circle({ width: '2px', height: '2px' })
.offset({ x: '15px', y: '3px' })
Path()
.commands('m18 19 1-7-6 1')
.stroke(this.strokeColor)
Path()
.commands('m5 8 3-3 5.5 3-2.36 3.5')
.stroke(this.strokeColor)
Path()
.commands('M4.24 14.5a5 5 0 0 0 6.88 6')
.stroke(this.strokeColor)
Path()
.commands('M13.76 17.5a5 5 0 0 0-6.88-6')
.stroke(this.strokeColor)
}
- 图案位置异常问题：
Path中绘制的符合SVG路径描述规范的命令字符串，均设置为绝对路径，并且viewPort无法在点击切换后刷新效果，所以不建议修改Shape的宽高和viewPort属性，如需放大建议直接修改Path中的命令字符串或者直接把Shape改成SVG图片。
SVG图片参考如下：
<svg width="200" height="200" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="3" r="2" stroke="black" fill="none"/>
<path d="m18 19 1-7-6 1" stroke="black" fill="none"/>
<path d="m5 8 3-3 5.5 3-2.36 3.5" stroke="black" fill="none"/>
<path d="M4.24 14.5a5 5 0 0 0 6.88 6" stroke="black" fill="none"/>
<path d="M13.76 17.5a5 5 0 0 0-6.88-6" stroke="black" fill="none"/>
</svg>
更多关于HarmonyOS 鸿蒙Next中使用Prop接收父组件传入的State值，子组件出现了奇怪的情况的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
代码没问题，具体请仔细检查你子组件中使用参数的地方。
注意以下 iconSize ，它是的状态s子组件自己完成的初始化，并没有绑定到父组件的状态变量上，所以点击的话，仅仅只会改变父组件中的状态变量，子组件中的 iconSize 并不会跟着改变。
LucideAccessibility({ iconSize: 300, strokeColor: this.iconColor })
在HarmonyOS Next中，子组件使用Prop接收父组件的State值时，若出现异常，通常与状态管理机制有关。鸿蒙采用ArkTS声明式UI，Prop传递的是单向数据流。子组件无法直接修改Prop值，若父组件State更新而子组件未响应，检查是否使用了@State装饰器正确管理状态。确保Prop类型匹配，避免在子组件内对Prop赋值，否则会破坏数据流导致渲染异常。
