学网站开发应该学什么,微信小程序ui设计,百度竞价排名平台,凡科建站官网需要什么鸿蒙9 目前不支持鸿蒙系统电视#xff0c;但是往后肯定是必须会支持的#xff0c;所以直接学arkts就完事了#xff0c;目前的api9对焦点控制还是不够直接简洁#xff0c;估计还在完善中#xff0c;但是可以通过自定义component来实现一下 首先踩坑#xff1a;
Row官方说…鸿蒙9 目前不支持鸿蒙系统电视但是往后肯定是必须会支持的所以直接学arkts就完事了目前的api9对焦点控制还是不够直接简洁估计还在完善中但是可以通过自定义component来实现一下 首先踩坑
Row官方说自身属性是可获焦的但是单独使用是没法获焦的所以必须在里面添加一个可获焦的子view但是通常所有的子view都是由获焦和离焦状态的所以不能所有的子view都加上focusabletrue这里可以通过Consume来同步整个组件内部的焦点状态, 注意这个修饰符达到同步的前提是参数名一模一样
Component
export struct RowFocusable {compWidth: Length 90vpcompHeight: Length 28vpcompBorderRadius: Length 14vpalignItems: VerticalAlign VerticalAlign.CenterjustifyContent: FlexAlign FlexAlign.CenterConsume focusState: numberBuilder doAddChild(){}BuilderParam addChild: () void this.doAddChild;build() {Row() {//扯淡的玩意容器布局的子节点没有获焦能力的话容器布局就不会获焦//但是子节点能获焦的话那其他所有有焦点态的子节点也必须设置可获焦那走焦的时候会在子节点之间走动不合理非常的不合理//竟然没有父组件拦截焦点的方法Text().focusable(true).onFocus((){this.focusState ComponentsConstants.FOCUS_STATE_FOCUSED}).onBlur((){this.focusState ComponentsConstants.FOCUS_STATE_NORMAL}).width(0vp)this.addChild()}.width(this.compWidth).height(this.compHeight).justifyContent(this.justifyContent).alignItems(this.alignItems).focusOnTouch(true).borderWidth(2).borderRadius(this.compBorderRadius).borderStyle(BorderStyle.Solid).onFocus((){}).onBlur((){}).stateStyles({focused: {.backgroundColor($r(app.color.transparent)},normal: {.backgroundColor($r(app.color.transparent)},})}
}自定义component 后面直接设置基础属性像上面这种只有一个BuildParam方法的可以直接这样写在大括号后面接上需要添加的子组件即可
Component
export struct ImageButton {btnWidth: Length 90vpbtnHeight: Length 28vpimgWidth: Length 15vpimgHeight: Length 15vptvCfg: TextFocusConfig | undefined undefinedimgCfg: ImageFocusConfig | undefined undefinedProvide focusState: number ComponentsConstants.FOCUS_STATE_NORMALBuilder buildImage() {ImageFocusable({imgCfg: this.imgCfg}).width(this.imgWidth).height(this.imgHeight)}Builder buildText() {TextFocusable({tvCfg: this.tvCfg})}build() {RowFocusable({ compWidth: this.btnWidth, compHeight: this.btnHeight }) {this.buildImage()this.buildText()}}
}//自定义统一设置占位图
Component
export struct ImageFocusable {Consume focusState: numberimgCfg: ImageFocusConfig|undefinedbuild() {Image(this.focusStateComponentsConstants.FOCUS_STATE_FOCUSED ? this.imgCfg.imgResFocused : this.imgCfg.imgResNormal).objectFit(ImageFit.Contain).enabled(true).alt($r(app.media.poster_placeholder))}
}//这里定义成config类是为了方便组件层级太深时更好的透传比如上面ImageButton
export class ImageFocusConfig {imgResNormal: ResourceStrimgResFocused: ResourceStrconstructor(imgResNormal,imgResFocused) {this.imgResNormal imgResNormalthis.imgResFocused imgResFocused}
}Component
export struct TextFocusable {Consume focusState: numbertvCfg: TextFocusConfig | undefinedbuild() {if (this.tvCfg ! null) {Text(this.tvCfg!.text).fontColor(this.focusState ComponentsConstants.FOCUS_STATE_FOCUSED ? this.tvCfg!.focusColor : this.tvCfg.normalColor).textAlign(this.tvCfg.textAlign).maxLines(this.tvCfg.maxLine).textOverflow({overflow: this.tvCfg.textOverFlow}).align(Alignment.Center).width(this.tvCfg.width).height(this.tvCfg.height).fontSize(this.tvCfg.textSize)}}
}export class TextFocusConfig {text: ResourceStrtextSize: Lengthwidth: Lengthheight: LengthnormalColor: ResourceColorfocusColor: ResourceColorselectColor: ResourceColortextAlign: TextAlignmaxLine: numbertextOverFlow: TextOverflowconstructor()constructor(text?)constructor(text?, tvSize?)constructor(text?, tvSize?, width?, height?)constructor(text?, tvSize?, width?, height?, normalColor?, focusColor?, selectColor?)constructor(text?, tvSize?, width?, height?, normalColor?, focusColor?, selectColor?, textAlign?, maxLine?, textOverFlow?) {this.text text ?? this.textSize tvSize ?? 14vpthis.width width ?? autothis.height height ?? autothis.normalColor normalColor ?? $r(app.color.white_70)this.focusColor focusColor ?? $r(app.color.white_100)this.selectColor selectColor ?? $r(app.color.tv_color_selected)this.textAlign textAlign ?? TextAlign.Startthis.maxLine maxLine ?? 1this.textOverFlow textOverFlow ?? TextOverflow.Ellipsis}setText(text): TextFocusConfig {this.text textreturn this}setTextSize(size): TextFocusConfig {this.textSize sizereturn this}setWith(w): TextFocusConfig {this.width wreturn this}setHeight(h): TextFocusConfig {this.height hreturn this}
}
像自定义text这种组件很多属性都没法直接设置所以需要添加自己命名的属性然后也没有焦点态的方法所以只能通过Consume focusState: number 来同步父子组件之间的焦点状态另外封装成config的好处还是挺多的自我挖掘吧
