涓€銆侀缚钂欏簲鐢ㄥ紑鍙?鍒濅綋楠?
浜屻€侀缚钂欏簲鐢ㄥ紑鍙?鍩虹缁勪欢
涓夈€侀缚钂欏簲鐢ㄥ紑鍙?缁勪欢鏍峰紡
鍥涖€侀缚钂欏簲鐢ㄥ紑鍙?缁勪欢鏋勫缓鍑芥暟
浜斻€侀缚钂欏簲鐢ㄥ紑鍙?缁勪欢缁勪欢鐘舵€佸叡浜?br>
鍏€侀缚钂欏簲鐢ㄥ紑鍙?搴旂敤鐘舵€佸瓨鍌?/p>
鐩綍
- 鏍峰紡澶勭悊
- 鏍峰紡-@Styles 澶嶇敤
- 鏍峰紡-@Extends 澶嶇敤)
- 鍩虹-缁勪欢鐘舵€?/li>
鏍峰紡澶勭悊
1. 鏍峰紡-璇硶(閾惧紡&鏋氫妇)
ArkTS浠ュ0鏄庢柟寮忕粍鍚堝拰鎵╁睍缁勪欢鏉ユ弿杩板簲鐢ㄧ▼搴忕殑UI 鍚屾椂杩樻彁渚涗簡鍩烘湰鐨勫睘鎬с€佷簨浠跺拰瀛愮粍浠堕厤缃柟娉曪紝甯姪寮€鍙戣€呭疄鐜板簲鐢ㄤ氦浜掗€昏緫銆?/code>
1.鏍峰紡灞炴€?/p>
- 灞炴€ф柟娉曚互
.
閾惧紡璋冪敤鐨勬柟寮忛厤缃郴缁熺粍浠剁殑鏍峰紡鍜屽叾浠栧睘鎬э紝寤鸿姣忎釜灞炴€ф柟娉曞崟鐙啓涓€琛屻€?/li>
@Entry
@Component
struct Index {
build() {
Text('婕旂ず')
.backgroundColor('red')
.fontSize(50)
.width('100%')
.height(100)
}
}
2.鏋氫妇鍊?/p>
- 瀵逛簬绯荤粺缁勪欢锛孉rkUI杩樹负鍏跺睘鎬ч瀹氫箟浜嗕竴浜涙灇涓剧被鍨嬨€傛枃妗i摼鎺?
@Entry
@Component
struct Index {
build() {
Text('婕旂ず')
.fontSize(50)
.width('100%')
.height(100)
.backgroundColor(Color.Blue)
.textAlign(TextAlign.Center)
.fontColor(Color.White)
}
}
- 鏍峰紡鐩稿叧灞炴€ч€氳繃閾惧紡鍑芥暟鐨勬柟寮忚繘琛岃缃?/li>
- 濡傛灉绫诲瀷鏄灇涓剧殑锛岄€氳繃鏋氫妇浼犲叆瀵瑰簲鐨勫€?/li>
2. 鏍峰紡-鍗曚綅 vp
鍜岄€傞厤
-
vp
鏄粈涔堬紵virtual pixel
- 灞忓箷瀵嗗害鐩稿叧鍍忕礌锛屾牴鎹睆骞曞儚绱犲瘑搴﹁浆鎹负灞忓箷鐗╃悊鍍忕礌锛屽綋鏁板€间笉甯﹀崟浣嶆椂锛岄粯璁ゅ崟浣?
vp
锛涘湪瀹為檯瀹藉害涓?440鐗╃悊鍍忕礌鐨勫睆骞曚笂锛?code>1vp 绾︾瓑浜?3px
锛堢墿鐞嗗儚绱狅級
- 涓婂浘鐨勬剰鎬濇槸锛屼娇鐢ㄨ繖涓崟浣嶅湪涓嶅悓灞忓箷鐗╃悊鍒嗚鲸鐜囩殑瀹為檯灏哄涓€鑷?A璁惧1鑻卞锛孊璁惧1鑻卞)銆?/li>
2.涔嬪墠 vw
銆?code>rem 鍜?rpx
鐩稿浜庡睆骞曞搴︾殑鍗曚綅锛屽彲浠ュ疄鐜扮瓑姣斾緥閫傞厤锛?code>vp 鍙互鍚楋紵
import promptAction from '@ohos.promptAction'
@Entry
@Component
struct Index {
build() {
Text('婕旂ず')
.width('100%')
.backgroundColor('red')
.onAreaChange((oldArea, newArea) => {
promptAction.showToast({
// 1. onAreaChange鏀瑰彉灏哄鍚庝細瑙﹀彂
// 2. newArea涓虹幇鍦ㄥ厓绱犲昂瀵?
message: newArea.width.toString()
})
})
}
}
鎴戜滑鍙戠幇锛氫笉鍚岀殑璁惧灞忓箷鐨勫搴?vp
鏄笉涓€鑷寸殑锛岄偅鎬庝箞閫傞厤鍛紵
- 鏍规嵁瀹樻柟鐨勬枃妗o紝缁撳悎鑷繁鐨勭悊瑙o紝閲囩敤锛氫几缂╁竷灞€锛岀綉鏍肩郴缁燂紝鏍呮牸绯荤粺杩涜甯冨眬閫傞厤銆?/li>
浼哥缉 layoutWeight(flex: number)
鍗犲墿浣欑┖闂村灏戜唤锛屽彲浠ョ悊瑙f垚CSS鐨?flex: 1
@Entry
@Component
struct Index {
build() {
Row(){
Text('left')
.layoutWeight(1)
.backgroundColor('red')
Text('right')
.layoutWeight(2)
.backgroundColor('green')
}
.width('100%')
}
}
绛夋瘮渚嬶紝璁剧疆鍏冪礌瀹介珮姣? aspectRatio(ratio: number)
@Entry
@Component
struct Index {
build() {
Text('left')
.width('50%')
// 瀹介珮姣斾緥
.aspectRatio(1)
.backgroundColor('red')
}
}
-
vp
鏄缚钂欓粯璁ゅ崟浣嶏紝鍜屽睆骞曞儚绱犳湁鍏筹紝鏈€缁堣〃鐜拌瑙夊ぇ灏忓湪浠讳綍璁惧涓€鑷?/li> - 楦胯挋涓€鑸互浼哥缉
layoutWeight
銆佺綉鏍笺€佹爡鏍艰繘琛屽竷灞€閫傞厤锛屽瑕佺瓑姣斾緥缂╂斁鍙互璁剧疆楂樺姣?aspectRatio
璁捐绋夸竴鑸槸1080px锛?杩欓噷娌℃湁璁捐绋匡紝鎻愪緵浜嗕竴浜涘昂瀵?
- Nav
- 宸︿晶杩斿洖鎸夐挳
24vp
楂樺鑳屾櫙棰滆壊#f5f5f5
锛屽浘鏍?2vp灏哄棰滆壊#848484
- 鏍囬
18vp
- 宸︿晶杩斿洖鎸夐挳
- Comment
- 澶村儚灏哄32vp楂樺锛屽彸渚ч棿璺?0vp
- 鏍囬15vp锛岄鑹查粯璁?/li>
- 鍐呭16vp锛岄鑹?code>#565656
- 搴曢儴12vp锛岄鑹?code>#c3c4c5
@Entry
@Component
struct Index {
build() {
Column(){
// 瀵艰埅
Row(){
Row(){
Image($r('app.media.ic_public_arrow_left'))
.width(16)
.aspectRatio(1)
// svg 鍥炬爣鍙互浣跨敤濉厖棰滆壊
// .fillColor('red')
}
.width(24)
.aspectRatio(1)
.backgroundColor('#f5f5f5')
.borderRadius(12)
.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.avatar'))
.width(32)
.aspectRatio(1)
.borderRadius(16)
Column({ space: 5 }){
Text('鍛ㄦ澃浼?)
.width('100%')
.fontWeight(FontWeight.Bold)
.fontSize(15)
Text('澶х悊鐭宠兘闆曞埢鍑鸿倢鑲夊拰鐨偆鐨勮川鎰燂紝閭d釜骞翠唬鐨勫伐鍖犲ソ鐗涘晩')
.width('100%')
Row(){
Text('10-21 路 IP灞炲湴鍖椾含')
.fontSize(12)
.fontColor('#c3c4c5')
Row({ space: 4 }){
Image($r('app.media.ic_public_heart'))
.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)
}
}
}
- 鍗庝负瀹樻柟鍥炬爣涓嬭浇 閾炬帴
鏍峰紡-@Styles 澶嶇敤
鍦ㄥ紑鍙戣繃绋嬩腑浼氬嚭鐜板ぇ閲忎唬鐮佸湪杩涜閲嶅鏍峰紡璁剧疆锛孈Styles 鍙互甯垜浠繘琛屾牱寮忓鐢?/p>
- 褰撳墠
@Styles
浠呮敮鎸?閫氱敤灞炴€?鍜?閫氱敤浜嬩欢銆?/li> - 鏀寔 鍏ㄥ眬 瀹氫箟鍜?缁勪欢鍐?/strong> 瀹氫箟锛屽悓鏃跺瓨鍦ㄧ粍浠跺唴瑕嗙洊鍏ㄥ眬鐢熸晥銆?/li>
// 鍏ㄥ眬
@Styles
function functionName() { ... }
@Entry
@Component
sturt Index{
// 缁勪欢鍐?
@Styles
functionName() { ... }
build() {
Text('Text')
.functionName()
}
}
妗堜緥锛氭枃瀛楀拰鎸夐挳鐩稿悓鑳屾櫙锛岀偣鍑?1
- 鍏ㄥ眬
@Styles function sameStyle() {
.backgroundColor(Color.Green)
.onClick(() => {
this.count++
})
}
@Entry
@Component
struct Index {
@State
count: number = 10
build() {
Column() {
Text(this.count.toString())
.width(100)
.height(50)
.margin({ bottom: 10 })
.textAlign(TextAlign.Center)
.sameStyle()
Button('+1')
.sameStyle()
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
}
}
- 缁勪欢鍐?/li>
@Entry
@Component
struct Index {
@State
count: number = 10
// 涓嶉渶瑕?`function` 鍏抽敭瀛楋紝瑕嗙洊鍏ㄥ眬
@Styles
sameStyle (){
.backgroundColor(Color.Pink)
.onClick(() => {
this.count += 10
})
}
build() {
Column() {
Text(this.count.toString())
.width(100)
.height(50)
.margin({ bottom: 10 })
.textAlign(TextAlign.Center)
.sameStyle()
Button('+1')
.sameStyle()
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
}
}
馃摃馃摃馃摃 缁冧範妗堜緥-鐧诲綍琛ㄥ崟-鏍峰紡浼樺寲
import promptAction from '@ohos.promptAction'
@Entry
@Component
struct Index {
@State
mobile: string = ''
@State
code: string = ''
@Styles
inputStyle () {
.border({ width: 1, color: Color.Gray })
.layoutWeight(1)
.margin({ left: 10, bottom: 10, top: 10 })
.backgroundColor(Color.White)
}
build() {
Column(){
Row(){
Text('鎵嬫満鍙?)
TextInput({ text: this.mobile })
.inputStyle()
.onChange((value)=>this.mobile = value)
}
Row(){
Text('楠岃瘉鐮?)
TextInput({ text: this.code })
.inputStyle()
.onChange((value)=>this.code = value)
}
Row({ space: 15 }){
Button('閲嶇疆')
.backgroundColor('#ccc')
.onClick(()=>{
this.mobile = ''
this.code = ''
})
Button('鐧诲綍')
.onClick(()=>{
if (this.mobile && this.code) {
promptAction.showToast({ message: `${this.mobile} 鐧诲綍鎴愬姛` })
} else {
promptAction.showToast({ message: `璇疯緭鍏ユ墜鏈哄彿鎴栭獙璇佺爜` })
}
})
}
}
.padding({ left: 15, right: 15 })
}
}
鏍峰紡-@Extends 澶嶇敤
@Extend 鐢ㄤ簬鎵╁睍鍘熺敓缁勪欢鏍峰紡锛岄€氳繃浼犲弬鎻愪緵鏇寸伒娲荤殑鏍峰紡澶嶇敤
- 浣跨敤
@Extend
瑁呴グ鍣ㄤ慨楗扮殑鍑芥暟鍙兘鏄?鍏ㄥ眬
- 鍑芥暟鍙互杩涜
浼犲弬
锛屽鏋滃弬鏁版槸鐘舵€佸彉閲忥紝鐘舵€佹洿鏂板悗浼氬埛鏂癠I - 涓斿弬鏁板彲浠ユ槸涓€涓嚱鏁帮紝瀹炵幇澶嶇敤浜嬩欢涓斿彲澶勭悊涓嶅悓閫昏緫
// 鍏ㄥ眬 鍘熺敓缁勪欢 鍙傛暟
// 鈫? 鈫? 鈫?
@Extend(Text) function functionName(w: number) {
.width(w)
}
闇€姹傦細鎶?Text 鏀规垚鎸夐挳鏍峰紡锛屼笖缁戝畾 click 浜嬩欢鎵ц涓嶅悓閫昏緫
import promptAction from '@ohos.promptAction'
@Extend(Text) function myClick(color: string, cb: () => void) {
.backgroundColor(color)
.width(100)
.height(50)
.textAlign(TextAlign.Center)
.borderRadius(25)
.onClick(() => cb())
}
@Entry
@Component
struct Other {
@State
color: string = '#ccc'
build() {
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)
}
}
鏍峰紡-澶氭€?/h4>
stateStyles
鏄睘鎬ф柟娉曪紝鍙互鏍规嵁UI鍐呴儴鐘舵€佹潵璁剧疆鏍峰紡锛岀被浼间簬 css 浼被锛屼絾璇硶涓嶅悓銆侫rkUI 鎻愪緵浠ヤ笅鍥涚鐘舵€侊細
focused锛氳幏鐒︽€併€?/p>
normal锛氭甯告€併€?/p>
pressed锛氭寜鍘嬫€併€?/p>
disabled锛氫笉鍙敤鎬併€?/p>
import promptAction from '@ohos.promptAction'
// 鑳跺泭鎸夐挳
@Extend(Text)
function capsule(){
.height(40)
.borderRadius(20)
.backgroundColor(Color.Gray)
.padding({ left: 15, right: 15 })
.margin({ bottom: 15 })
}
@Entry
@Component
struct Index {
@State
disabled: boolean = false
@State
focused: boolean = false
build() {
Column() {
// Button TextInput 榛樿寮€鍚幏鍙栫劍鐐癸紝椤甸潰涓粯璁ょ涓€涓繖鏍风殑鍏冪礌鑾峰彇鐒︾偣
// Button 姣旇緝澶氶檺鍒讹紝涓€涓槸榛樿寮€鍚幏鍙栫劍鐐硅兘鐪嬶紝浜屾槸绂佺敤鐘舵€佷笅鏍峰紡鏃犳硶淇敼
// Button('Button').focusable(false)
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)
}
})
}
}
}
- 浣跨敤姣旇緝澶氱殑搴旇鏄?
norma
pressed
缁撳悎涓嬬殑鎸夊帇鏁堟灉 -
enabled(true|false)
寮€鍚瘄绂佺敤focusable(true|false)
寮€鍚幏鍙栫劍鐐硅兘鍔泑鍏抽棴