توسعه Harmonyos: چگونه مؤلفه ها تنظیمات پویا از خواص را اجرا می کنند

مقدمه

موارد کد بر اساس API12

در بسیاری از سناریوها ، ما باید به صورت پویا انتخاب کنیم که آیا از خواص مؤلفه مانند نمایش و مخفی کردن مؤلفه استفاده می کنیم ، مانند تنظیمات تغییر رنگ پس زمینه ، تنظیمات تغییر قد ، اگر در بسیاری از سناریوها تغییر می کند ، کنترل می شود ، کنترل می کند. به عنوان مثال ، در Android ، برای کنترل صفحه نمایش و مخفی کردن یک جزء ، می توانیم به شرح زیر عمل کنیم ، و شبه کد به شرح زیر است:

if(条件){
   显示
}else{
    隐藏
}

برای زبانهای اعلانی ، چگونه می توانیم تنظیمات خاصیت خاص در Arkui را به صورت پویا کنترل کنیم؟

با توجه به تنظیمات ویژگی های پویا ، سه روش استفاده خلاصه شده است که می تواند سناریوهای مختلف تجاری را برآورده کند و امیدوارم که بتواند به شما کمک کند.

روش 1 ، اپراتور سه گانه ، خصوصیات مستقیماً به صورت پویا تنظیم شده است.

به عنوان مثال ، اگر ما می خواهیم به صورت پویا یک مؤلفه خاص را بر اساس داوری یک دولت نمایش دهیم و مخفی کنیم ، می توانیم به شرح زیر عمل کنیم.

.visibility(this.isVisibility ? Visibility.Visible : Visibility.None)

برای کد فوق ، ما فقط نیاز به کنترل isisision متغیر داریم و ویژگی های دیگری مانند رنگ ، اندازه ، پس زمینه و غیره را تنظیم می کنیم. همه ویژگی ها اساساً یکسان هستند و ما نمونه ای نخواهیم داشت.

روش 2: کنترل دینامیکی AttributeModifier

با توجه به روش 1 ، ما از لحاظ تئوری تغییر ویژگی ها را کنترل می کنیم ، ما باید این ویژگی را تنظیم کنیم ، و مقادیر چیزی غیر از متفاوت بودن است.

البته ، اگر شما فقط یک تغییر ویژگی ساده مانند پس زمینه ، رنگ ، اندازه متن و غیره دارید ، استفاده از روش یک به اندازه کافی است و روش دو تمایل بیشتری به این دارد که آیا شما به جای تغییر ارزش ویژگی آن ، باید این ویژگی را تنظیم کنید.

به عنوان مثال ، در یک حالت خاص باید به یک مقدار ثابت تنظیم شود.هر صفتی که باید به صورت پویا تنظیم شود ، می توانیم از آن استفاده کنیم AttributeModifier بیایید یک مثال کوتاه بیان کنیم.

اولین قدم اعلام ویژگی های پویا مورد نیاز ، کلاس های سفارشی رابط انتساب شده و پشتیبانی از بیشتر ویژگی های مؤلفه است.

در حال حاضر چندین روش وجود دارد که می توانند سناریوهای مختلف تجاری را برآورده کنند:

applyNormalAttribute(instance: T) : void//组件普通状态时的样式。

applyPressedAttribute(instance: T) : void//组件按压状态的样式。

applyFocusedAttribute(instance: T) : void//组件获焦状态的样式。

applyDisabledAttribute(instance: T) : void//组件禁用状态的样式。

applySelectedAttribute(instance: T) : void//组件选中状态的样式

class MyTextModifier implements AttributeModifier<TextAttribute> {
  textHeight?: Length

  //组件普通状态时的样式。
  applyNormalAttribute(instance: TextAttribute): void {
    if (this.textHeight != undefined) {
      //不为空，设置height属性
      instance.height(this.textHeight)
    }
  }
}

مرحله 2: مستقیم از آن استفاده کنید:

//定义变量
@State modifier: MyTextModifier = new MyTextModifier()

//组件使用
Text("文本描述")
  .attributeModifier(this.modifier)

//通过this.modifier，可以动态设置定义里面的属性

موارد فوق فقط یک مورد بسیار ساده است.

روش 3 ، فرم چند جزء

UI اعلان از ارائه مشروط پشتیبانی می کند ، می تواند همزمان با روش یک و روش دو را برآورده کند.

if(this.isColor){
  Text("文本描述").fontColor(Color.Red)
}else {
  Text("文本描述").fontColor(Color.Black)
}

روش 3 تعویض ویژگی ها یا تعویض مقادیر نیست ، اما جایگزینی کلی اجزای آن می توانیم به تأثیر خود برسیم ، اما کنترل پویا از ویژگی ها توصیه نمی شود.

خلاصه کردن

اگر این یک تغییر پویا از مقادیر ویژگی باشد ، اگر یک تنظیم پویا از ویژگی ها باشد ، می تواند نیازها را برآورده کند.