linux做网站服务器吗,seo营销技巧,微信做淘宝优惠券但网站是怎么建设但,wordpress 外跳视频课程:
东西比较多, 这里主要分享一些代码和案例.
开关灯效果案例: 开灯
开关灯效果案例: 关灯
Column 和 Row 的基本用法
Entry
Component
struct Index {State message: string 张三;build() {// 一行内容Row() {// 一列内容Column() {// 文本内容Text(this.mess…视频课程:
东西比较多, 这里主要分享一些代码和案例.
开关灯效果案例: 开灯
开关灯效果案例: 关灯
Column 和 Row 的基本用法
Entry
Component
struct Index {State message: string 张三;build() {// 一行内容Row() {// 一列内容Column() {// 文本内容Text(this.message).fontSize(50)// 字体大小.fontWeight(FontWeight.Bold) // 字体粗细}.width(100%)}.height(100%)}
}一行两列的布局
Entry
Component
struct Index {State message: string 张三;build() {// 一行内容Row() {// 一列内容Column() {// 文本内容Text(this.message).fontSize(50)// 字体大小.fontWeight(FontWeight.Bold) // 字体粗细}.width(50%)// 一列内容Column() {// 文本内容Text(this.message).fontSize(50)// 字体大小.fontWeight(FontWeight.Bold) // 字体粗细}.width(50%)}.height(100%)}
}开关灯效果案例的基本实现
Entry
Component
struct Index {State isOn: boolean falsebuild() {Column({space: 10}) {if (this.isOn) {Image(pages/images/img_light.png).width(300).height(300)} else {Image(pages/images/img_dark.png).width(300).height(300)}Row({space: 30}) {Button(开灯).onClick(() this.isOn true)Button(关灯).onClick(() this.isOn false)}}.width(100%).height(100%).justifyContent(FlexAlign.Center)}
}
图标按钮案例
Entry
Component
struct Index {State isOn: boolean falsebuild() {Column() {Button(){Image(pages/images/ic_delete.png).width(25).height(25)}.width(50).height(50).type(ButtonType.Circle).backgroundColor(Color.Red).onClick(()console.log(删除成功))}.width(100%).height(100%).justifyContent(FlexAlign.Center)}
}自定义组件案例
Entry
Component
struct Index {State isOn: boolean falsebuild() {Column({ space: 10 }) {if (this.isOn) {Image(pages/images/img_light.png).width(300).height(300).borderRadius(20)} else {Image(pages/images/img_dark.png).width(300).height(300).borderRadius(20)}Row({ space: 30 }) {GreenButton().onClick(() this.isOn true)RedButton().onClick(() this.isOn false)}}.width(100%).height(100%).justifyContent(FlexAlign.Center)}
}Component
struct RedButton {build() {Button({ type: ButtonType.Circle }) {Image(pages/images/icon_switch.png).width(25).height(25)}.width(50).height(50).backgroundColor(Color.Red)}
}Component
struct GreenButton {build() {Button({ type: ButtonType.Circle }) {Image(pages/images/icon_switch.png).width(25).height(25)}.width(50).height(50).backgroundColor(Color.Green)}
}自定义组件参数案例
Entry
Component
struct Index {State isOn: boolean falsebuild() {Column({ space: 10 }) {if (this.isOn) {Image(pages/images/img_light.png).width(300).height(300).borderRadius(20)} else {Image(pages/images/img_dark.png).width(300).height(300).borderRadius(20)}Row({ space: 30 }) {SwitchButton({ color: Color.Green }).onClick(() this.isOn true)SwitchButton().onClick(() this.isOn false)}}.width(100%).height(100%).justifyContent(FlexAlign.Center)}
}Component
struct SwitchButton {color: Color Color.Redbuild() {Button({ type: ButtonType.Circle }) {Image(pages/images/icon_switch.png).width(25).height(25)}.width(50).height(50).backgroundColor(this.color)}
}组件文件案例
index.ets
import { SwitchButton } from ./SwitchButtonEntry
Component
struct Index {State isOn: boolean falsebuild() {Column({ space: 10 }) {if (this.isOn) {Image(pages/images/img_light.png).width(300).height(300).borderRadius(20)} else {Image(pages/images/img_dark.png).width(300).height(300).borderRadius(20)}Row({ space: 30 }) {SwitchButton({ color: Color.Green }).onClick(() this.isOn true)SwitchButton().onClick(() this.isOn false)}}.width(100%).height(100%).justifyContent(FlexAlign.Center)}
}SwitchButton.ets
Component
export struct SwitchButton {color: Color Color.Redbuild() {Button({ type: ButtonType.Circle }) {Image(pages/images/icon_switch.png).width(25).height(25)}.width(50).height(50).backgroundColor(this.color)}
}
