当前位置: 首页>后端>正文

鸿蒙应用开发-组件样式

涓€銆侀缚钂欏簲鐢ㄥ紑鍙?鍒濅綋楠?
浜屻€侀缚钂欏簲鐢ㄥ紑鍙?鍩虹缁勪欢
涓夈€侀缚钂欏簲鐢ㄥ紑鍙?缁勪欢鏍峰紡
鍥涖€侀缚钂欏簲鐢ㄥ紑鍙?缁勪欢鏋勫缓鍑芥暟
浜斻€侀缚钂欏簲鐢ㄥ紑鍙?缁勪欢缁勪欢鐘舵€佸叡浜?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 鍜岄€傞厤
  1. vp 鏄粈涔堬紵virtual pixel
  • 灞忓箷瀵嗗害鐩稿叧鍍忕礌锛屾牴鎹睆骞曞儚绱犲瘑搴﹁浆鎹负灞忓箷鐗╃悊鍍忕礌锛屽綋鏁板€间笉甯﹀崟浣嶆椂锛岄粯璁ゅ崟浣?vp锛涘湪瀹為檯瀹藉害涓?440鐗╃悊鍍忕礌鐨勫睆骞曚笂锛?code>1vp 绾︾瓑浜?3px锛堢墿鐞嗗儚绱狅級
    鸿蒙应用开发-组件样式,第1张
  • 涓婂浘鐨勬剰鎬濇槸锛屼娇鐢ㄨ繖涓崟浣嶅湪涓嶅悓灞忓箷鐗╃悊鍒嗚鲸鐜囩殑瀹為檯灏哄涓€鑷?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 鏄笉涓€鑷寸殑锛岄偅鎬庝箞閫傞厤鍛紵

  1. 鏍规嵁瀹樻柟鐨勬枃妗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
鸿蒙应用开发-组件样式,第2张
1.jpeg

璁捐绋夸竴鑸槸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

鸿蒙应用开发-组件样式,第3张
2.jpeg
  • 鍏ㄥ眬
@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)
  }
}

馃摃馃摃馃摃 缁冧範妗堜緥-鐧诲綍琛ㄥ崟-鏍峰紡浼樺寲


鸿蒙应用开发-组件样式,第4张
4.jpeg
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 浜嬩欢鎵ц涓嶅悓閫昏緫

鸿蒙应用开发-组件样式,第5张
WechatIMG25.jpeg
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) 寮€鍚幏鍙栫劍鐐硅兘鍔泑鍏抽棴

娉ㄦ剰锛?/h4>
  • 椤甸潰鍒濆鍖栫殑鏃跺€欙紝榛樿绗竴涓兘鑾峰彇鐒︾偣鐨勫厓绱狅紝浼氳嚜鍔ㄨ幏鍙栫劍鐐?/li>


https://www.xamrdz.com/backend/3ab1994687.html

相关文章: