好看的公司网站排版设计,网站失败的原因,九江市建设局官方网站,设计logo图案用什么软件鸿蒙数据传值
//* 传值
//* State
/**State创建一个响应式的数据#xff0c;但不是所有的更改都会引起刷新#xff0c;只有被框架观察到的修改才会被刷新UI* 1. 基本数据类型如 number string boolean等值的变化修改* 2. Object类型#xff0c;只会观察到第一层的数据变化或…鸿蒙数据传值
//* 传值
//* State
/**State创建一个响应式的数据但不是所有的更改都会引起刷新只有被框架观察到的修改才会被刷新UI* 1. 基本数据类型如 number string boolean等值的变化修改* 2. Object类型只会观察到第一层的数据变化或者自身数据的赋值变化.原因是监听多层会消耗巨大的性能* *///* Prop
/** Prop 父子单项传值* 在父组件中通过参数的方式传递在子组件中通过prop接收如果没有通过prop接收那么他就无法得到响应式* 即无法随着父组件的数据修改而被修改* 在子组件中可以修改prop传值但是当父组件修改之后子组件的依旧会被覆盖* 也可以给子组件传递一个函数通过接收该函数来修改数据来实现数据的同步* 在给子组件传递的函数时应该是一个箭头函数原因就是this指向问题* *///* Link 可以实现双向同步绑定 -- 不需要提供默认值//* Provide Consume 跨组件传值//* Observed ObjectLink 嵌套对象数组
/** 可以直接监听到对象的内层嵌套* 需要通过class类来创建对象* ObjectLink 不可以使用在Entry入口文件中* UI的更新,不根据数据的更新而更新而是依附于ObjectLink* */ interface ClPerson {name:stringage:number
}Observed
class Person {name:stringage:numberconstructor(infoObj:ClPerson) {this.name infoObj.namethis.age infoObj.age}
}Component
struct Son {Prop sonMessage :string Link sonName:stringsonChange(){}build() {Column(){Text(这是子组件的数据${this.sonMessage}-${this.sonName})Button(修改).onClick((){this.sonChange();this.sonName 本})}}
}Component
struct Son2 {ObjectLink info:Personbuild() {Text(学生的信息${this.info.name}-${this.info.age})}
}Entry
Component
struct Index {State message: string nihao;State name:string BenState personArr:ClPerson[] [new Person({name:ben,age:18}),new Person({name:ben,age:18})]build() {Column(){Text(这是父组件的数据${this.message}} - ${this.name}})Son({sonMessage:this.message,sonName:this.name,sonChange:(){this.message您好}})List(){ForEach(this.personArr,(item:ClPerson,index:number){ListItem(){Son2({info:item})}})}}}
}
成员变量和成员函数
//* 成员变量和成员函数
/** 定义在strcu中的变量或者函数*成员变量通过外部传参可以被修改* 成员函数只有箭头函数可以被修改* *///* BuilderParam 传递UI
/** 通过BuilderParam可以允许用户在自定义组件中传递UI* 多个BuilderParam传递通过参数的形式而不是尾随闭包* --* Son({* oneBuilderParam:结构1* twoBuilderParam:结构二* })* */
Component
struct Son {BuilderParam contentBuilderParam:() void this.builderParamState title:string 默认文本BuilderbuilderParam() {Text(默认builderParam)}build() {Column() {Row() {Text(this.title)}this.contentBuilderParam()}}
}Component
struct Son2 {BuilderParam Bp1:() void this.builderContent1BuilderParam Bp2:() void this.builderContent2BuilderbuilderContent1() {Text(son2默认文本1)}BuilderbuilderContent2() {Text(son2默认文本2)}build() {Column() {this.Bp1()this.Bp2()}}
}Entry
Component
struct Index {State message: string nihao;clickFun () {console.log(112233)}BuilderSon21() {Text(这是修改的son2中的1)}BuilderSon22() {Text(这是被修改的Son2中的2)}build() {Column() {Son({title:这是标题}){Button(这是按钮).onClick((){this.clickFun()})}Son2({Bp1:this.Son21,Bp2:this.Son22})}}Styles Builder Extend
// * swiper组件
/** loop 是否循环* autoplay 是否自动播放* interval 间隔时长* vertical 纵/横* */// * 指示器的样式修改 indicator - false 则不展示
/** Indicator.dot().itemWidth(20) 默认指示器.itemHeight(20).color(Color.Black).selectedItemWidth(40) 选中指示器.selectedItemHeight(20).selectedColor(Color.Red)* */// * aspectRatio(1) 宽高比//* Extend 扩展组件的样式 事件实现复用
/** Extend(组件名)* function funName(参1参2,...) {}* */
Extend(Text)
function swiperTextExtend(bgc: ResourceColor,msg: string) {.fontSize(20).fontWeight(700).textAlign(TextAlign.Center).backgroundColor(bgc).onClick((){AlertDialog.show({message:msg})})
} // * Styles 抽取通用属性和方法 不支持传参 局部的或者外部的调用方法一致
Styles function commitStyle() {.width(100).height(100)
}
// * Builder 自定义的构建函数 结构 样式 事件 调用内部方法需要使用 this.funName
interface ImgInter {imgUrl:stringnumber:numbergetImg:string
}Builder
function commitBuilder(number:number,getImg:string,imgUrl:string) {Badge({count:number,position:BadgePosition.RightTop,style:{fontSize:12,badgeSize:16,badgeColor:#d7000f}}){Image($r(getImg ? getImg: imgUrl)).width(60)}
}Entry
Component
struct Index {State message: string nihao;Styles commitFun() {.onClick((){this.message 你好})}State imgArr: ImgInter[] [{imgUrl:app.media.cj_01,number:0,getImg:},{imgUrl:app.media.cj_02,number:0,getImg:},{imgUrl:app.media.cj_03,number:0,getImg:},{imgUrl:app.media.cj_04,number:0,getImg:},{imgUrl:app.media.cj_05,number:0,getImg:},{imgUrl:app.media.cj_06,number:0,getImg:},]build() {Column(){Swiper(){Text(1).swiperTextExtend(Color.Orange,弹窗1)Text(2).swiperTextExtend(Color.Pink,弹窗2)Text(3).swiperTextExtend(Color.Green,弹窗3)}.width(100%).height(250).loop(true).autoPlay(true).interval(4000).vertical(false).indicator(Indicator.dot().itemWidth(20).itemHeight(20).color(Color.Black).selectedItemWidth(40).selectedItemHeight(20).selectedColor(Color.Red))Text(这是文本:this.message).commitStyle().commitFun()Grid(){ForEach(this.imgArr,(item:ImgInter,index:number) {GridItem(){commitBuilder(item.number,item.getImg,item.imgUrl)}})}.columnsTemplate(1fr 1fr 1fr).rowsTemplate(1fr 1fr 1fr).width(100%).height(200)}}
}
scroll
// * scroll
/** scroll 中只允许拥有一个子组件** 属性* scrollable:* ScrollDirection.Horizontal 横向* ScrollDirection.Vertical 纵向* scrollBar: 控制滚动条显示隐藏* BarState.On 打开* BarState.Off 关闭* edgeEffect: 滑动的动态效果* Spring Fade** 控制器* 1. 创建scroller实例* 2. 绑定scroll组件* 3. 调用方法 scrollEdge()* */Entry
Component
struct Index {State message: string nihao;scroll: Scroller new Scroller();build() {Column(){Scroll(this.scroll){Column({space:20}){ForEach(Array.from({length:20}),(item:number,index:number) {Text(这是文本index).width(100%).height(120).borderRadius(8).fontSize(20).fontWeight(800).backgroundColor(Color.Orange).fontColor(Color.White)})}}.width(100%).padding(10).height(400).scrollable(ScrollDirection.Vertical).scrollBar(BarState.Off).scrollBarColor(Color.Pink).scrollBarWidth(30).edgeEffect(EdgeEffect.Spring).onScroll((x,y){console.log(滚动到,this.scroll.currentOffset().yOffset)})Button(回到顶部).margin(20).onClick((){this.scroll.scrollEdge(Edge.Top)})Button(获取已经滚动的距离).onClick((){const y this.scroll.currentOffset().yOffsetconsole.log(这是y,y)})}}tabs
//* tabs
/** 属性* barposition 调整位置* vertical 垂直 / 水平* scrollable 是否手势滑动切换* animationDuration 滑动时间* barMode 是否滑动* */
Entry
Component
struct Index {State message: string nihao;State selectIndex: number 0BuildermyTabs(tabIndex:number,img:ResourceStr,selectImg:ResourceStr,title:string) {Column({space:4}){Image(tabIndex this.selectIndex ? selectImg : img).width(20)Text(title).fontColor(tabIndex this.selectIndex ? Color.Red : Color.Black)}}build() {// Tabs({barPosition:BarPosition.Start}){// TabContent(){// Text(首页内容)// }.tabBar(首页)// TabContent(){// Text(推荐内容)// }.tabBar(推荐)// TabContent(){// Text(列表内容)// }.tabBar(列表)// TabContent(){// Text(我的内容)// }.tabBar(我的)// }// .vertical(true)// .scrollable(false)// .animationDuration(1000)// .barMode(BarMode.Scrollable)Tabs({barPosition:BarPosition.End}){TabContent(){Text(淘宝页面)}.tabBar(this.myTabs(0,$r(app.media.cj_01),$r(app.media.cj_d01),淘宝))TabContent(){Text(QQ页面)}.tabBar(this.myTabs(1,$r(app.media.cj_02),$r(app.media.cj_d02),QQ))}.onChange((index:number) {this.selectIndex index})}
}
数据格式和state状态管理
// 数据的格式转换
// * 数字转字符串
/** Number() let a 1.1 Number(a) 1.1 转失败则为NaN* parseInt() 去掉小数点部分* parseFloat() 保留小数点部分 let a 1.1a parseFloat(a) 1.1 自动去掉字符部分* */
// * 字符串转数字
/** toString() let a 1 a.toString()* toFixed 四舍五入转文本* */// * 状态管理 state
/** 核心 state会直接决定UI的初始化渲染UI一旦发生交互就会修改state变量state变量发生变化自动触发UI渲染* 普通变量只会在初始化的时候渲染UI,后续变化无法直接渲染* 状态变量只要发生变化就可以渲染UI* */
let myName: string BenEntry
Component
struct Index {State message: string nihao;myAge:number 18build() {Column(){Text(myName)Text(this.myAge.toString())Text(this.message)Button(修改Message).onClick(() {this.message 你好你会找到一个满意的工作;console.log(1122)})}}
}
