亚洲国产成人av毛片大全,www欧美

介紹

如何使用彈窗功能，實(shí)現(xiàn)四種類(lèi)型彈窗。分別是：警告彈窗、自定義彈窗、日期滑動(dòng)選擇器彈窗、文本滑動(dòng)選擇器彈窗。需要完成以下功能：

點(diǎn)擊左上角返回按鈕展示警告彈窗。
點(diǎn)擊出生日期展示日期滑動(dòng)選擇器彈窗。
點(diǎn)擊性別展示文本滑動(dòng)選擇器彈窗。
點(diǎn)擊興趣愛(ài)好（多選）展示自定義彈窗。

環(huán)境搭建

軟件要求

[DevEco Studio]版本：DevEco Studio 3.1 Release。
OpenHarmony SDK版本：API version 9。

硬件要求

開(kāi)發(fā)板類(lèi)型：[潤(rùn)和RK3568開(kāi)發(fā)板]。
OpenHarmony系統(tǒng)：3.2 Release。

環(huán)境搭建

完成本篇Codelab我們首先要完成開(kāi)發(fā)環(huán)境的搭建，本示例以RK3568開(kāi)發(fā)板為例，參照以下步驟進(jìn)行：

[獲取OpenHarmony系統(tǒng)版本]：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）。以3.2 Release版本為例：
搭建燒錄環(huán)境。
1. [完成DevEco Device Tool的安裝]
2. [完成RK3568開(kāi)發(fā)板的燒錄](méi)
搭建開(kāi)發(fā)環(huán)境。
1. 開(kāi)始前請(qǐng)參考[工具準(zhǔn)備]，完成DevEco Studio的安裝和開(kāi)發(fā)環(huán)境配置。
2. 開(kāi)發(fā)環(huán)境配置完成后，請(qǐng)參考[使用工程向?qū)創(chuàng)建工程（模板選擇“Empty Ability”）。
3. 工程創(chuàng)建完成后，選擇使用[真機(jī)進(jìn)行調(diào)測(cè)]。
4. 鴻蒙開(kāi)發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

代碼結(jié)構(gòu)解讀

本篇Codelab只對(duì)核心代碼進(jìn)行講解，對(duì)于完整代碼，我們會(huì)在gitee中提供。

├──entry/src/main/ets             // 代碼區(qū) 
│  ├──common
│  │  ├──constants
│  │  │  └──CommonConstants.ets   // 常量類(lèi)
│  │  └──utils
│  │     ├──CommonUtils.ets       // 彈窗操作工具類(lèi)
│  │     └──Logger.ets            // 日志打印工具類(lèi)
│  ├──entryability
│  │  └──EntryAbility.ets         // 程序入口類(lèi)
│  ├──pages
│  │  └──HomePage.ets             // 主頁(yè)面
│  ├──view
│  │  ├──CustomDialogWidget.ets   // 自定義彈窗組件
│  │  ├──TextCommonWidget.ets     // 自定義Text組件
│  │  └──TextInputWidget.ets      // 自定義TextInput組件
│  └──viewmodel
│     └──HobbyModel.ets           // 興趣愛(ài)好model類(lèi)
└──entry/src/main/resources       // 資源文件目錄

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

搜狗高速瀏覽器截圖20240326151450.png

構(gòu)建主頁(yè)面

應(yīng)用主頁(yè)面采用Column容器嵌套自定義組件形式完成頁(yè)面整體布局，效果如圖所示：

從上面效果圖可以看出，主界面由2個(gè)相同樣式的文本輸入框和3個(gè)相同樣式的文本布局組成。我們可以將文本輸入框抽取成TextInputWidget子組件。再將文本布局抽取成TextCommonWidget子組件。

在ets目錄下，點(diǎn)擊鼠標(biāo)右鍵 > New > Directory，新建名為view的自定義子組件目錄。然后在view目錄下，點(diǎn)擊鼠標(biāo)右鍵 > New > ArkTS File，新建兩個(gè)ArkTS文件，分別為T(mén)extInputWidget子組件、TextCommonWidget子組件。

文本輸入框抽取成TextInputWidget子組件，效果如圖所示：

// TextInputWidget.ets
@Component
export default struct TextInputWidget {
  // 文本框左側(cè)圖片
  private inputImage?: Resource; 
  // 文本框提示
  private hintText?: Resource;

  build() {
    Row() {
      Image(this.inputImage)
        ...
      TextInput({ placeholder: this.hintText })
        ...
    }
    ...
  }
}

文本布局抽取成TextCommonWidget子組件，效果如圖所示：

// TextCommonWidget.ets
@Component
export default struct TextCommonWidget {
  // 顯示內(nèi)容
  @Link content: string;
  // 文字標(biāo)題左側(cè)圖片
  private textImage?: Resource;
  // 文本標(biāo)題
  private title?: Resource;
  // 點(diǎn)擊事件回調(diào)
  onItemClick: () = > void = () = > {};

  build() {
    Row() {
      Image(this.textImage)
        ...
      Text(this.title)
        ...
      Text(this.content)
        ...
      Image($r('app.media.ic_arrow'))
        ....
    }
    .onClick(this.onItemClick)
    ...
  } 
}

在HomePage主界面引用TextInputWidget和TextCommonWidget子組件，然后初始化出生日期、性別、興趣愛(ài)好默認(rèn)數(shù)據(jù)。

// HomePage.ets
@Entry
@Component
struct HomePage {
  @State birthdate: string = '';
  @State sex: string = '';
  @State hobbies: string = '';

  build() {
    Column() {
      ...
      TextInputWeight({
        inputImage: $r("app.media.ic_nickname"),
        hintText: $r("app.string.text_input_hint")
      })
      TextCommonWeight({
        textImage: $r("app.media.ic_birthdate"),
        title: $r("app.string.title_birthdate"),
        content: $birthdate,
        onItemClick: () = > {
          CommonUtils.datePickerDialog((birthValue: string) = > {
            this.birthdate = birthValue;
          });
        }
      }) 
      TextCommonWeight({
        textImage: $r("app.media.ic_sex"),
        title: $r("app.string.title_sex"),
        content: $sex,
        onItemClick: () = > {
          CommonUtils.textPickerDialog(this.sexArray, (sexValue: string) = > {
            this.sex = sexValue;
          });
        }
      })
      TextInputWeight({
        inputImage: $r("app.media.ic_signature"),
        hintText: $r("app.string.text_input_signature")
      })
      TextCommonWeight({
        textImage: $r("app.media.ic_hobbies"),
        title: $r("app.string.title_hobbies"),
        content: $hobbies,
        onItemClick: () = > {
          this.customDialogController.open();
        }
      })
    }
    ...
  }
}

警告彈窗

點(diǎn)擊主頁(yè)面左上角返回按鈕，通過(guò)CommonUtils.alertDialog方法彈出警告彈窗，提醒用戶是否進(jìn)行當(dāng)前操作，效果如圖所示：

// CommonUtils.ets
alertDialog(context: Context.UIAbilityContext) {
  AlertDialog.show({
    // 提示信息
    message: $r('app.string.alert_dialog_message'), 
    // 彈窗顯示位置
    alignment: DialogAlignment.Bottom,
    // 彈窗偏移位置
    offset: {
      dx: 0,
      dy: CommonConstants.DY_OFFSET
    },
    primaryButton: {
      ...
    },
    secondaryButton: {
      // 退出應(yīng)用
      context.terminateSelf();
      ...
    }
  });
}

日期滑動(dòng)選擇器彈窗

點(diǎn)擊出生日期選項(xiàng)，通過(guò)CommonUtils.datePickerDialog方法彈出日期選擇器彈窗，根據(jù)需要選擇相應(yīng)時(shí)間，效果如圖所示：

// CommonUtils.ets
datePickerDialog(dateCallback) {
  DatePickerDialog.show({
    // 開(kāi)始時(shí)間
    start: new Date(CommonConstants.START_TIME),
    // 結(jié)束時(shí)間
    end: new Date(CommonConstants.END_TIME), 
    // 當(dāng)前選中時(shí)間
    selected: new Date(),
    // 是否顯示農(nóng)歷
    lunar: false,
    onAccept: (value: DatePickerResult) = > {
      let year = value.year as number;
      let month = value.month as number + CommonConstants.PLUS_ONE;
      let day = value.day as number;
      let birthdate: string = this.getBirthDateValue(year, month, day);
      dateCallback(birthdate);
    }
  });
}

// 獲取出生日期值
getBirthDateValue(year: number, month: number, day: number): string {
  let birthdate: string = `${year}${CommonConstants.DATE_YEAR}${month}` +
    `${CommonConstants.DATE_MONTH}${day}${CommonConstants.DATE_DAY}`;
  return birthdate;
}  

// HomePage.ets
build() {
  Column() {
    ...
    TextCommonWeight({
      textImage: $r('app.media.ic_birthdate'),
      title: $r("app.string.title_birthdate"),
      content: $birthdate,
      onItemClick: () = > {
        CommonUtils.datePickerDialog((birthValue: string) = > {
          this.birthdate = birthValue;
        });
      }
    })
    ...
  }
  ...
}

文本滑動(dòng)選擇器彈窗

點(diǎn)擊性別選項(xiàng)，通過(guò)CommonUtils.textPickerDialog方法彈出性別選擇器彈窗，根據(jù)需要選擇相應(yīng)性別，效果如圖所示：

// CommonUtils.ets
textPickerDialog(sexArray: Resource, sexCallback: (sexValue: string) = > void) {
  TextPickerDialog.show({
    range: sexArray,
    selected: 0,
    onAccept: (result: TextPickerResult) = > {
      sexCallback(result.value);
    },
    onCancel: () = > {
      ...
    }
  });
}

// HomePage.ets
build() {
  Column() {
    ...
    TextCommonWeight({
      textImage: $r('app.media.ic_sex'),
      title: $r("app.string.title_sex"),
      content: $sex,
      onItemClick: () = > {
        CommonUtils.textPickerDialog(this.sexArray, (sexValue: string) = > {
          this.sex= sexValue;
        });
      }
    })
    ...
  }
  ...
}

自定義彈窗

點(diǎn)擊興趣愛(ài)好選項(xiàng)，通過(guò)customDialogController.open方法彈出自定義彈窗，根據(jù)需要選擇相應(yīng)的興趣愛(ài)好，效果如圖所示：

自定義彈窗實(shí)現(xiàn)分為以下步驟：

在view目錄下，點(diǎn)擊鼠標(biāo)右鍵 > New > ArkTS File，新建一個(gè)ArkTS文件，然后命名為CustomDialogWeight子組件。

在CustomDialogWeight的aboutToAppear方法，通過(guò)manager.getStringArrayValue方法獲取本地資源數(shù)據(jù)進(jìn)行初始化。

// CustomDialogWeight.ets
@State hobbyModels: HobbyModel[] = [];

aboutToAppear() {
  let context: Context = getContext(this);
  if (CommonUtils.isEmpty(context) || CommonUtils.isEmpty(context.resourceManager)) {
    Logger.error(CommonConstants.TAG_CUSTOM, 'context or resourceManager is null');
    return;
  }
  let manager = context.resourceManager;
  manager.getStringArrayValue($r("app.strarray.hobbies_data").id, (error, hobbyArray) = > {
    if (!CommonUtils.isEmpty(error)) {
      Logger.error(CommonConstants.TAG_CUSTOM, 'error = ' + JSON.stringify(error));
    } else {
      hobbyArray.forEach((hobbyItem: string) = > {
        let hobbyModel = new HobbyModel();
        hobbyModel.label = hobbyItem;
        hobbyModel.isChecked = false;
        this.hobbyModels.push(hobbyModel);
      });
    }
  });
}

當(dāng)用戶點(diǎn)擊確定按鈕時(shí)，通過(guò)setHobbiesValue方法處理自定義彈窗選項(xiàng)結(jié)果。

// CustomDialogWeight.ets
@State hobbyModels: HobbyModel[] = [];
@Link hobbies: string;

// 處理自定義彈窗選項(xiàng)結(jié)果
setHobbiesValue(hobbyModels: HobbyModel[]) {
  if (CommonUtils.isEmptyArr(hobbyModels)) {
    Logger.error(CommonConstants.TAG_CUSTOM, 'hobbyModels length is 0');
    return;
  }
  let hobbiesText: string = '';
  hobbiesText = hobbyModels.filter((isCheckItem: HobbyModel) = > isCheckItem?.isChecked)
    .map((checkedItem: HobbyModel) = > {
      return checkedItem.label;
    })
    .join(CommonConstants.COMMA);
  if (hobbiesText.length > 0) {
    this.hobbies = hobbiesText;
  }
}

build() {
  Column() {
    ...
    Row() {
      Button($r('app.string.cancel_button'))
        .dialogButtonStyle()
        .onClick(() = > {
          this.controller.close();
        })
      Blank()
        ...
      Button($r('app.string.definite_button'))
        .dialogButtonStyle()
        .onClick(() = > {
          this.setHobbiesValue(this.hobbyModels);
          this.controller.close();
        })
    }
  }
  ...
}

@Extend(Button) function dialogButtonStyle() {
  ....
}

通過(guò)@Link修飾的hobbies把值賦給HomePage的hobbies，然后hobbies刷新顯示內(nèi)容。

// HomePage.ets
@State hobbies: string = '';
customDialogController: CustomDialogController = new CustomDialogController({
  builder: CustomDialogComponent({
    hobbies: $hobbies
  }),
  alignment: DialogAlignment.Bottom,
  customStyle: true,
  offset: {
    dx: 0,
    dy: CommonConstants.DY_OFFSET
  }
});

build() {
  Column() {
    ...
    TextCommonWeight({
      textImage: $r('app.media.ic_hobbies'),
      title: $r("app.string.title_hobbies"),
      content: $hobbies,
      onItemClick: () = > {
        // 打開(kāi)自定義彈窗
        this.customDialogController.open();
      }
    })
  }
  ...
}

審核編輯黃宇

聲明：本文內(nèi)容及配圖由入駐作者撰寫(xiě)或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題，請(qǐng)聯(lián)系本站處理。舉報(bào)投訴