import Footer from './components/Footer.ets'
import promptAction from '@ohos.promptAction'
// 样式抽离封装
@Styles function sameStyle() {
.backgroundColor(Color.Green)
.onClick(() => {
this.count++
})
}
@Extend(Text) function myClick(color: string, cb: () => void) {
.backgroundColor(color)
.width(100)
.height(50)
.textAlign(TextAlign.Center)
.borderRadius(25)
.onClick(() => cb())
}
// 胶囊按钮
@Extend(Text)
function capsule(){
.height(40)
.borderRadius(20)
.backgroundColor(Color.Gray)
.padding({ left: 15, right: 15 })
.margin({ bottom: 15 })
}
// 对象模型
class User {
id: string
nickname: string
age: number
}
class UserData {
code: number
message: string
// 嵌套对象
data: User
}
@Component
struct CounterComp {
@State
counts: number = 0
build() {
Text(this.counts.toString())
.onClick(() => {
this.counts ++
})
}
}
@Entry
@Component
struct Index {
@State count:number = 100
@State mobile:string = ''
@State password: string = ''
@State color: string = '#ccc'
@State
disabled: boolean = false
@State
focused: boolean = false
// 不需要 `function` 关键字,覆盖全局
@Styles
sameStyle (){
.backgroundColor(Color.Pink)
.onClick(() => {
this.count += 10
})
}
@Styles
inputStyle () {
.border({ width: 1, color: Color.Gray })
.layoutWeight(1)
.margin({ left: 10, bottom: 10, top: 10 })
.backgroundColor(Color.White)
}
@State
res: UserData = {
code: 10000,
message: '获取用户信息成功',
// 嵌套对象
data: { nickname: 'jack', age: 18, id: '1' }
}
@State
list: User[] = [
{ nickname: 'jack', age: 18, id: '1' },
{ nickname: 'tom', age: 16, id: '2' }
]
@State loading: boolean = false
@State
userList: User[] = []
build() {
Column({ space: 20 }){
// 循环渲染
ForEach(
// 1. 数据源
this.userList,
// 2. 组件生成函数
(item: User) => {
// 内容
Text(`${item.nickname} 今年 ${item.age} 岁`)
},
// 3. 键值生成函数
item => item.id
)
Button('加载更多')
.onClick(() => {
const arr: User[] = []
for (let index = 0; index < 10; index++) {
arr.push({ id: Math.random().toString(), nickname: 'jack', age: Math.ceil(Math.random() * 100) })
}
this.userList.push(...arr)
})
if (this.loading) {
// 累计的 count 切换时候不会保留
CounterComp()
LoadingProgress()
.width(100)
.height(100)
} else {
Text('后台数据')
Text('后台数据')
Text('后台数据')
}
Text(JSON.stringify(this.list[0]))
Text(JSON.stringify(this.list[1]))
Text(this.res.data.nickname)
Text(this.res.data.age.toString())
Button('age++')
.onClick(() => {
this.loading = true
setTimeout(() => {
this.loading = false
}, 2000)
// this.res.data.age ++
const user = this.res.data
// 替换属性,触发UI更新 要重新赋值整个对象才行 响应式
this.res.data = { ...user, age: user.age + 1 }
const users = this.list[1]
this.list[1] = {...users, age: users.age + 1 }
})
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
// Button TextInput 默认开启获取焦点,页面中默认第一个这样的元素获取焦点
// Button 比较多限制,一个是默认开启获取焦点能看,二是禁用状态下样式无法修改
// Button('Button').focusable(false)
// Column() {
// Text('toggle disabled:' + this.disabled)
// .capsule()
// .onClick(()=>{
// this.disabled = !this.disabled
// })
// Text('toggle focused:' + this.focused)
// .capsule()
// .onClick(()=>{
// this.focused = !this.focused
// })
// Text('clickMe')
// .capsule()
// .enabled(!this.disabled)
// .focusable(this.focused)
// .onClick(() => {
// promptAction.showToast({ message: 'click' })
// })
// .fontColor('#fff')
// .stateStyles({
// normal: {
// .backgroundColor(Color.Blue)
// },
// focused: {
// .backgroundColor(Color.Red)
// },
// disabled: {
// .backgroundColor(Color.Black)
// },
// pressed: {
// .backgroundColor(Color.Orange)
// }
// })
// }
// Column({ space: 20 }) {
// Text('Text1')
// .myClick(this.color, () => {
// this.color = '#069'
// })
// Text('Text2')
// .myClick('green', () => {
// promptAction.showToast({ message: '做其他事~' })
// })
// }
// .width('100%')
// .height('100%')
// .justifyContent(FlexAlign.Center)
// Column() {
// Text(this.count.toString())
// .width(100)
// .height(50)
// .sameStyle()
// .margin({ bottom: 10 })
// .textAlign(TextAlign.Center)
//
// Button('+1')
// .sameStyle()
// }
// .width('100%')
// .height('100%')
// .justifyContent(FlexAlign.Center)
// Column(){
// 使用 `Footer` 组件
// Footer()
// Row() {
// Text('手机号')
// TextInput({text: this.mobile})
// .inputStyle()
// .onChange((value: string) => {
// this.mobile = value
// })
// }
// Row() {
// Text('验证码')
// TextInput({text: this.password})
// .type(InputType.Password)
// .inputStyle()
// .onChange((value: string) => {
// this.password = value
// })
// }
// Row({space: 15}){
// Button('重置').backgroundColor('#ccc').onClick(()=>{
// this.mobile = ''
// this.password = ''
// })
// Button('登录').onClick(()=>{
// if (this.mobile && this.password) {
// promptAction.showToast({ message: `${this.mobile} 登录成功` })
// } else {
// promptAction.showToast({ message: `请输入手机号或验证码` })
// }
// })
// }
// Row() {
// Text(this.count.toString())
// .onClick(() => {
// this.count++
// })
// }
// Row(){
// Text('left')
// .layoutWeight(1)
// .backgroundColor('red')
// Text('right')
// .layoutWeight(2)
// .backgroundColor('green')
// }
// .width('100%')
// Text('left')
// .width('50%')
// // 宽高比例
// .aspectRatio(1)
// .backgroundColor('red')
//
// Image(this.src)
// .width(120).height(120)
// }
// .padding({ left: 15, right: 15 })
// Column() {
// // 导航
// Row() {
// Row() {
// Image($r('app.media.ic_public_arrow_left'))
// .width(16)
// .aspectRatio(1) // 指定当前组件的宽高比
// // svg 图标可以使用填充颜色
// // .fillColor('red')
// }
// .width(24)
// .aspectRatio(1)
// .borderRadius(12)
// .backgroundColor('#f5f5f5')
// .justifyContent(FlexAlign.Center)
// .margin({left: 16})
//
// Text('评论回复')
// .layoutWeight(1)
// .textAlign(TextAlign.Center)
// .padding({ right: 40 })
// }
// .height(40)
// .border({ width: { bottom: 0.5 }, color: '#e4e4e4' })
//
// // 评论
// Row() {
// Image($r('app.media.ic_public_contacts_filled'))
// .width(32)
// .aspectRatio(1)
// .borderRadius(16)
//
// Column({space: 5}) {
// Text('周杰伦')
// .width('100%')
// .fontWeight(FontWeight.Bold)
// .fontSize(15)
// Text('大理石能雕刻出肌肉和皮肤的质感,那个年代的工匠好牛啊')
// .width('100%')
//
// Row() {
// Text('10-21 · IP属地北京')
// .fontSize(12)
// .fontColor('#c3c4c5')
// Row({ space: 4 }){
// Image($r('app.media.ic_public_favor'))
// .width(14)
// .aspectRatio(1)
// .fillColor('#c3c4c5')
// Text('100')
// .fontSize(12)
// .fontColor('#c3c4c5')
// }
// }
// .width('100%')
// .justifyContent(FlexAlign.SpaceBetween)
// }
// .layoutWeight(1)
// .padding({ left: 10 })
// }
// .padding(15)
// .alignItems(VerticalAlign.Top)
// }
}
}
鸿蒙入门语法
最新推荐文章于 2024-07-12 15:34:42 发布