From 385c5bd62d78fea51cb2b34f55d5c8ae426dd580 Mon Sep 17 00:00:00 2001 From: LiAn Date: Wed, 12 Jul 2023 07:42:21 +0000 Subject: [PATCH] update zh-cn/application-dev/faqs/faqs-arkui-arkts.md. Signed-off-by: LiAn Signed-off-by: LiAn --- .../application-dev/faqs/faqs-arkui-arkts.md | 140 ------------------ 1 file changed, 140 deletions(-) diff --git a/zh-cn/application-dev/faqs/faqs-arkui-arkts.md b/zh-cn/application-dev/faqs/faqs-arkui-arkts.md index 2ada4b0c12..5996d60156 100644 --- a/zh-cn/application-dev/faqs/faqs-arkui-arkts.md +++ b/zh-cn/application-dev/faqs/faqs-arkui-arkts.md @@ -774,146 +774,6 @@ Text组件不用设置lineHeight属性,默认就是居中的。绘制文本是 [Text](../reference/arkui-ts/ts-basic-components-text.md#示例1) -## SideBarContainer如何设置controlButton属性 - -适用于 OpenHarmony 3.2 Beta5,API9 - -**解决措施** - -示例代码: - -``` -@Entry -@Component -struct SideBarContainerExample { - normalIcon : Resource = $r("app.media.icon") - selectedIcon: Resource = $r("app.media.icon") - @State arr: number[] = [1, 2, 3] - @State current: number = 1 - - build() { - SideBarContainer(SideBarContainerType.Embed) - { - Column() { - ForEach(this.arr, (item, index) => { - Column({ space: 5 }) { - Image(this.current === item ? this.selectedIcon : this.normalIcon).width(64).height(64) - Text("Index0" + item) - .fontSize(25) - .fontColor(this.current === item ? '#0A59F7' : '#999') - .fontFamily('source-sans-pro,cursive,sans-serif') - } - .onClick(() => { - this.current = item - }) - }, item => item) - }.width('100%') - .justifyContent(FlexAlign.SpaceEvenly) - .backgroundColor('#19000000') - - - Column() { - Text('SideBarContainer content text1').fontSize(25) - Text('SideBarContainer content text2').fontSize(25) - } - .margin({ top: 50, left: 20, right: 30 }) - } - .sideBarWidth(150) - .minSideBarWidth(50) - .controlButton({left:32, - top:32, - width:32, - height:32, - icons:{shown: $r("app.media.icon"), - hidden: $r("app.media.icon"), - switching: $r("app.media.icon")}}) - .maxSideBarWidth(300) - .onChange((value: boolean) => { - console.info('status:' + value) - }) - } -} -``` - -## Grid如何实现拖拽功能 - -适用于 OpenHarmony 3.2 Beta5 ,API9 - -**解决措施** - -1. grid组件下设置属性editMode\(true\)设置Grid是否进入编辑模式,进入编辑模式可以拖拽Grid组件内部GridItem -2. 在[onItemDragStart](../reference/arkui-ts/ts-container-grid.md#事件)回调中设置拖拽过程中显示的图片 -3. 在[onItemDrop](../reference/arkui-ts/ts-container-grid.md#事件)中获取拖拽起始位置,和拖拽插入位置,在[onDrag](../reference/arkui-ts/ts-universal-events-drag-drop.md#事件)回调中完成交换数组位置逻辑。示例代码: - - ``` - @Entry - @Component - struct GridExample { - @State numbers: String[] = [] - scroller: Scroller = new Scroller() - @State text: string = 'drag' - - @Builder pixelMapBuilder() { //拖拽过程样式 - Column() { - Text(this.text) - .fontSize(16) - .backgroundColor(0xF9CF93) - .width(80) - .height(80) - .textAlign(TextAlign.Center) - } - } - - aboutToAppear() { - for (let i = 1;i <= 15; i++) { - this.numbers.push(i + '') - } - } - - changeIndex(index1: number, index2: number) { //交换数组位置 - [this.numbers[index1], this.numbers[index2]] = [this.numbers[index2], this.numbers[index1]]; - } - - build() { - Column({ space: 5 }) { - Grid(this.scroller) { - ForEach(this.numbers, (day: string) => { - GridItem() { - Text(day) - .fontSize(16) - .backgroundColor(0xF9CF93) - .width(80) - .height(80) - .textAlign(TextAlign.Center) - .onTouch((event: TouchEvent) => { - if (event.type === TouchType.Up) { - this.text = day - } - }) - } - }) - } - .columnsTemplate('1fr 1fr 1fr') - .columnsGap(10) - .rowsGap(10) - .onScrollIndex((first: number) => { - console.info(first.toString()) - }) - .width('90%') - .backgroundColor(0xFAEEE0) - .height(300) - .editMode(true) //设置Grid是否进入编辑模式,进入编辑模式可以拖拽Grid组件内部GridItem - .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时,触发回调。 - return this.pixelMapBuilder() //设置拖拽过程中显示的图片。 - }) - .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标,当在本组件范围内停止拖拽行为时,触发回调。 - console.info('beixiang' + itemIndex + '', insertIndex + '') //itemIndex拖拽起始位置,insertIndex拖拽插入位置 - this.changeIndex(itemIndex, insertIndex) - }) - }.width('100%').margin({ top: 5 }) - } - } - ``` ## 使用什么接口进行url编码 -- GitLab