Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
af6b900d
D
Docs
项目概览
OpenHarmony
/
Docs
9 个月 前同步成功
通知
158
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
未验证
提交
af6b900d
编写于
7月 12, 2023
作者:
O
openharmony_ci
提交者:
Gitee
7月 12, 2023
浏览文件
操作
浏览文件
下载
差异文件
!20778 示例代码位置调整
Merge pull request !20778 from LiAn/master
上级
266d98ec
49638582
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
142 addition
and
141 deletion
+142
-141
zh-cn/application-dev/faqs/faqs-arkui-arkts.md
zh-cn/application-dev/faqs/faqs-arkui-arkts.md
+0
-141
zh-cn/application-dev/faqs/faqs-arkui-component.md
zh-cn/application-dev/faqs/faqs-arkui-component.md
+61
-0
zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
...n/application-dev/reference/arkui-ts/ts-container-grid.md
+81
-0
未找到文件。
zh-cn/application-dev/faqs/faqs-arkui-arkts.md
浏览文件 @
af6b900d
...
...
@@ -774,147 +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编码
...
...
zh-cn/application-dev/faqs/faqs-arkui-component.md
浏览文件 @
af6b900d
...
...
@@ -701,3 +701,64 @@ struct MyComponent {
**参考链接**
焦点控制:
[
焦点控制
](
../reference/arkui-ts/ts-universal-attributes-focus.md
)
## 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)
})
}
}
```
zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
浏览文件 @
af6b900d
...
...
@@ -134,6 +134,8 @@ Grid组件根据rowsTemplate、columnsTemplate属性的设置情况,可分为
## 示例
### 示例1
```
ts
// xxx.ets
@
Entry
...
...
@@ -204,3 +206,82 @@ struct GridExample {
```
![
zh-cn_image_0000001219744183
](
figures/zh-cn_image_0000001219744183.gif
)
### 示例2
1.
设置属性editMode
\(
true
\)
设置Grid是否进入编辑模式,进入编辑模式可以拖拽Grid组件内部GridItem。
2.
在
[
onItemDragStart
](
#事件
)
回调中设置拖拽过程中显示的图片。
3.
在
[
onItemDrop
](
#事件
)
中获取拖拽起始位置,和拖拽插入位置,在
[
onDrag
](
#事件
)
回调中完成交换数组位置逻辑。
```
ts
@
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
})
}
}
```
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录