Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
251ed86f
D
Docs
项目概览
OpenHarmony
/
Docs
大约 2 年 前同步成功
通知
161
Star
293
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看板
未验证
提交
251ed86f
编写于
8月 31, 2023
作者:
耿
耿文广
提交者:
Gitee
8月 31, 2023
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update zh-cn/application-dev/quick-start/arkts-rendering-control-foreach.md.
Signed-off-by:
N
耿文广
<
gengwenguang@huawei.com
>
上级
266f2da2
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
39 addition
and
31 deletion
+39
-31
zh-cn/application-dev/quick-start/arkts-rendering-control-foreach.md
...cation-dev/quick-start/arkts-rendering-control-foreach.md
+39
-31
未找到文件。
zh-cn/application-dev/quick-start/arkts-rendering-control-foreach.md
浏览文件 @
251ed86f
# ForEach:循环渲染
# ForEach:循环渲染
ForEach基于数组类型数据执行循环渲染。
ForEach基于数组类型数据执行循环渲染。
> **说明:**
> **说明:**
...
@@ -13,9 +12,9 @@ ForEach基于数组类型数据执行循环渲染。
...
@@ -13,9 +12,9 @@ ForEach基于数组类型数据执行循环渲染。
```
ts
```
ts
ForEach
(
ForEach
(
arr
:
any
[],
arr
:
Array
,
itemGenerator
:
(
item
:
an
y
,
index
?:
number
)
=>
void
,
itemGenerator
:
(
item
:
Arra
y
,
index
?:
number
)
=>
void
,
keyGenerator
?:
(
item
:
any
,
index
?:
number
)
=>
string
keyGenerator
?:
(
item
:
Array
,
index
?:
number
):
string
=>
string
)
)
```
```
...
@@ -38,9 +37,16 @@ ForEach(
...
@@ -38,9 +37,16 @@ ForEach(
-
itemGenerator函数的调用顺序不一定和数组中的数据项相同,在开发过程中不要假设itemGenerator和keyGenerator函数是否执行及其执行顺序。例如,以下示例可能无法正确运行:
-
itemGenerator函数的调用顺序不一定和数组中的数据项相同,在开发过程中不要假设itemGenerator和keyGenerator函数是否执行及其执行顺序。例如,以下示例可能无法正确运行:
```
ts
```
ts
ForEach
(
anArray
.
map
((
item1
,
index1
)
=>
{
return
{
i
:
index1
+
1
,
data
:
item1
};
}),
let
obj
:
Object
item
=>
Text
(
`
${
item
.
i
}
. item.data.label`
),
ForEach
(
anArray
.
map
((
item1
:
Object
,
index1
:
number
):
Object
=>
{
item
=>
item
.
data
.
id
.
toString
())
obj
.
i
=
index1
+
1
obj
.
data
=
item1
return
obj
;
}),
(
item
:
string
)
=>
Text
(
`
${
item
.
i
}
. item.data.label`
),
(
item
:
string
):
string
=>
{
return
item
.
data
.
id
.
toString
()
})
```
```
...
@@ -91,7 +97,7 @@ struct MyComponent {
...
@@ -91,7 +97,7 @@ struct MyComponent {
```
ts
```
ts
@
Component
@
Component
struct
CounterView
{
struct
CounterView
{
label
:
string
;
@
State
label
:
string
=
""
;
@
State
count
:
number
=
0
;
@
State
count
:
number
=
0
;
build
()
{
build
()
{
...
@@ -148,10 +154,10 @@ struct MainView {
...
@@ -148,10 +154,10 @@ struct MainView {
})
})
.
width
(
300
).
height
(
40
)
.
width
(
300
).
height
(
40
)
ForEach
(
this
.
arr
,
ForEach
(
this
.
arr
,
(
item
)
=>
{
(
item
:
string
)
=>
{
CounterView
({
label
:
item
.
toString
()
})
CounterView
({
label
:
item
.
toString
()
})
},
},
(
item
)
=>
item
.
toString
()
(
item
:
string
)
=>
item
.
toString
()
)
)
}
}
}
}
...
@@ -176,9 +182,11 @@ MainView拥有一个\@State装饰的数字数组。添加、删除和替换数
...
@@ -176,9 +182,11 @@ MainView拥有一个\@State装饰的数字数组。添加、删除和替换数
如前所述,id生成函数是可选的。以下是不带项索引函数的ForEach:
如前所述,id生成函数是可选的。以下是不带项索引函数的ForEach:
```
ts
```
ts
ForEach
(
this
.
arr
,
let
list
:
Object
(
item
)
=>
{
ForEach
(
this
.
arr
,
CounterView
({
label
:
item
.
toString
()
})
(
item
:
Object
):
string
=>
{
list
.
label
=
item
.
toString
();
CounterView
(
list
)
}
}
)
)
```
```
...
@@ -229,10 +237,10 @@ struct MainView {
...
@@ -229,10 +237,10 @@ struct MainView {
build
()
{
build
()
{
Column
()
{
Column
()
{
ForEach
(
this
.
counters
.
slice
(
this
.
firstIndex
,
this
.
firstIndex
+
3
),
ForEach
(
this
.
counters
.
slice
(
this
.
firstIndex
,
this
.
firstIndex
+
3
),
(
item
)
=>
{
(
item
:
MyCounter
)
=>
{
CounterView
({
label
:
`Counter item #
${
item
.
id
}
`
,
counter
:
item
})
CounterView
({
label
:
`Counter item #
${
item
.
id
}
`
,
counter
:
item
})
},
},
(
item
)
=>
item
.
id
.
toString
()
(
item
:
MyCounter
)
=>
item
.
id
.
toString
()
)
)
Button
(
`Counters: shift up`
)
Button
(
`Counters: shift up`
)
.
width
(
200
).
height
(
50
)
.
width
(
200
).
height
(
50
)
...
@@ -275,14 +283,14 @@ class Month {
...
@@ -275,14 +283,14 @@ class Month {
}
}
@
Component
@
Component
struct
CalendarExample
{
struct
CalendarExample
{
//
模拟6个月
//
Simulate with six months.
@
State
calendar
:
Month
[]
=
[
@
State
calendar
:
Month
[]
=
[
new
Month
(
2020
,
1
,
[
...
Array
(
31
)
.
keys
()]),
new
Month
(
2020
,
1
,
[
Array
(
31
)[
0
].
keys
(),
Array
(
31
)[
1
].
keys
(),
Array
(
31
)[
2
].
keys
(),
Array
(
31
)[
3
].
keys
(),
Array
(
31
)[
4
].
keys
(),
Array
(
31
)[
5
].
keys
(),
Array
(
31
)[
6
].
keys
(),
Array
(
31
)[
7
].
keys
(),
Array
(
31
)[
8
].
keys
(),
Array
(
31
)[
9
].
keys
(),
Array
(
31
)[
10
].
keys
(),
Array
(
31
)[
11
].
keys
(),
Array
(
31
)[
12
].
keys
(),
Array
(
31
)[
13
].
keys
(),
Array
(
31
)[
14
].
keys
(),
Array
(
31
)[
15
].
keys
(),
Array
(
31
)[
16
].
keys
(),
Array
(
31
)[
17
].
keys
(),
Array
(
31
)[
18
].
keys
(),
Array
(
31
)[
19
].
keys
(),
Array
(
31
)[
20
].
keys
(),
Array
(
31
)[
21
].
keys
(),
Array
(
31
)[
22
].
keys
(),
Array
(
31
)[
23
].
keys
(),
Array
(
31
)[
24
].
keys
(),
Array
(
31
)[
25
].
keys
(),
Array
(
31
)[
26
].
keys
(),
Array
(
31
)[
27
].
keys
(),
Array
(
31
)[
28
].
keys
(),
Array
(
31
)[
29
].
keys
(),
Array
(
31
)[
30
].
keys
(),
Array
(
31
)[
31
]
.
keys
()]),
new
Month
(
2020
,
2
,
[
...
Array
(
28
)
.
keys
()]),
new
Month
(
2020
,
2
,
[
Array
(
28
)[
0
].
keys
(),
Array
(
31
)[
1
].
keys
(),
Array
(
31
)[
2
].
keys
(),
Array
(
31
)[
3
].
keys
(),
Array
(
31
)[
4
].
keys
(),
Array
(
31
)[
5
].
keys
(),
Array
(
31
)[
6
].
keys
(),
Array
(
31
)[
7
].
keys
(),
Array
(
31
)[
8
].
keys
(),
Array
(
31
)[
9
].
keys
(),
Array
(
31
)[
10
].
keys
(),
Array
(
31
)[
11
].
keys
(),
Array
(
31
)[
12
].
keys
(),
Array
(
31
)[
13
].
keys
(),
Array
(
31
)[
14
].
keys
(),
Array
(
31
)[
15
].
keys
(),
Array
(
31
)[
16
].
keys
(),
Array
(
31
)[
17
].
keys
(),
Array
(
31
)[
18
].
keys
(),
Array
(
31
)[
19
].
keys
(),
Array
(
31
)[
20
].
keys
(),
Array
(
31
)[
21
].
keys
(),
Array
(
31
)[
22
].
keys
(),
Array
(
31
)[
23
].
keys
(),
Array
(
31
)[
24
].
keys
(),
Array
(
31
)[
25
].
keys
(),
Array
(
31
)[
26
].
keys
(),
Array
(
31
)[
27
].
keys
(),
Array
(
31
)[
28
]
.
keys
()]),
new
Month
(
2020
,
3
,
[
...
Array
(
31
)
.
keys
()]),
new
Month
(
2020
,
3
,
[
Array
(
31
)[
0
].
keys
(),
Array
(
31
)[
1
].
keys
(),
Array
(
31
)[
2
].
keys
(),
Array
(
31
)[
3
].
keys
(),
Array
(
31
)[
4
].
keys
(),
Array
(
31
)[
5
].
keys
(),
Array
(
31
)[
6
].
keys
(),
Array
(
31
)[
7
].
keys
(),
Array
(
31
)[
8
].
keys
(),
Array
(
31
)[
9
].
keys
(),
Array
(
31
)[
10
].
keys
(),
Array
(
31
)[
11
].
keys
(),
Array
(
31
)[
12
].
keys
(),
Array
(
31
)[
13
].
keys
(),
Array
(
31
)[
14
].
keys
(),
Array
(
31
)[
15
].
keys
(),
Array
(
31
)[
16
].
keys
(),
Array
(
31
)[
17
].
keys
(),
Array
(
31
)[
18
].
keys
(),
Array
(
31
)[
19
].
keys
(),
Array
(
31
)[
20
].
keys
(),
Array
(
31
)[
21
].
keys
(),
Array
(
31
)[
22
].
keys
(),
Array
(
31
)[
23
].
keys
(),
Array
(
31
)[
24
].
keys
(),
Array
(
31
)[
25
].
keys
(),
Array
(
31
)[
26
].
keys
(),
Array
(
31
)[
27
].
keys
(),
Array
(
31
)[
28
].
keys
(),
Array
(
31
)[
29
].
keys
(),
Array
(
31
)[
30
].
keys
(),
Array
(
31
)[
31
]
.
keys
()]),
new
Month
(
2020
,
4
,
[
...
Array
(
30
)
.
keys
()]),
new
Month
(
2020
,
4
,
[
Array
(
30
)[
0
].
keys
(),
Array
(
31
)[
1
].
keys
(),
Array
(
31
)[
2
].
keys
(),
Array
(
31
)[
3
].
keys
(),
Array
(
31
)[
4
].
keys
(),
Array
(
31
)[
5
].
keys
(),
Array
(
31
)[
6
].
keys
(),
Array
(
31
)[
7
].
keys
(),
Array
(
31
)[
8
].
keys
(),
Array
(
31
)[
9
].
keys
(),
Array
(
31
)[
10
].
keys
(),
Array
(
31
)[
11
].
keys
(),
Array
(
31
)[
12
].
keys
(),
Array
(
31
)[
13
].
keys
(),
Array
(
31
)[
14
].
keys
(),
Array
(
31
)[
15
].
keys
(),
Array
(
31
)[
16
].
keys
(),
Array
(
31
)[
17
].
keys
(),
Array
(
31
)[
18
].
keys
(),
Array
(
31
)[
19
].
keys
(),
Array
(
31
)[
20
].
keys
(),
Array
(
31
)[
21
].
keys
(),
Array
(
31
)[
22
].
keys
(),
Array
(
31
)[
23
].
keys
(),
Array
(
31
)[
24
].
keys
(),
Array
(
31
)[
25
].
keys
(),
Array
(
31
)[
26
].
keys
(),
Array
(
31
)[
27
].
keys
(),
Array
(
31
)[
28
].
keys
(),
Array
(
31
)[
29
].
keys
(),
Array
(
31
)[
30
]
.
keys
()]),
new
Month
(
2020
,
5
,
[
...
Array
(
31
)
.
keys
()]),
new
Month
(
2020
,
5
,
[
Array
(
31
)[
0
].
keys
(),
Array
(
31
)[
1
].
keys
(),
Array
(
31
)[
2
].
keys
(),
Array
(
31
)[
3
].
keys
(),
Array
(
31
)[
4
].
keys
(),
Array
(
31
)[
5
].
keys
(),
Array
(
31
)[
6
].
keys
(),
Array
(
31
)[
7
].
keys
(),
Array
(
31
)[
8
].
keys
(),
Array
(
31
)[
9
].
keys
(),
Array
(
31
)[
10
].
keys
(),
Array
(
31
)[
11
].
keys
(),
Array
(
31
)[
12
].
keys
(),
Array
(
31
)[
13
].
keys
(),
Array
(
31
)[
14
].
keys
(),
Array
(
31
)[
15
].
keys
(),
Array
(
31
)[
16
].
keys
(),
Array
(
31
)[
17
].
keys
(),
Array
(
31
)[
18
].
keys
(),
Array
(
31
)[
19
].
keys
(),
Array
(
31
)[
20
].
keys
(),
Array
(
31
)[
21
].
keys
(),
Array
(
31
)[
22
].
keys
(),
Array
(
31
)[
23
].
keys
(),
Array
(
31
)[
24
].
keys
(),
Array
(
31
)[
25
].
keys
(),
Array
(
31
)[
26
].
keys
(),
Array
(
31
)[
27
].
keys
(),
Array
(
31
)[
28
].
keys
(),
Array
(
31
)[
29
].
keys
(),
Array
(
31
)[
30
].
keys
(),
Array
(
31
)[
31
]
.
keys
()]),
new
Month
(
2020
,
6
,
[
...
Array
(
30
)
.
keys
()])
new
Month
(
2020
,
6
,
[
Array
(
30
)[
0
].
keys
(),
Array
(
31
)[
1
].
keys
(),
Array
(
31
)[
2
].
keys
(),
Array
(
31
)[
3
].
keys
(),
Array
(
31
)[
4
].
keys
(),
Array
(
31
)[
5
].
keys
(),
Array
(
31
)[
6
].
keys
(),
Array
(
31
)[
7
].
keys
(),
Array
(
31
)[
8
].
keys
(),
Array
(
31
)[
9
].
keys
(),
Array
(
31
)[
10
].
keys
(),
Array
(
31
)[
11
].
keys
(),
Array
(
31
)[
12
].
keys
(),
Array
(
31
)[
13
].
keys
(),
Array
(
31
)[
14
].
keys
(),
Array
(
31
)[
15
].
keys
(),
Array
(
31
)[
16
].
keys
(),
Array
(
31
)[
17
].
keys
(),
Array
(
31
)[
18
].
keys
(),
Array
(
31
)[
19
].
keys
(),
Array
(
31
)[
20
].
keys
(),
Array
(
31
)[
21
].
keys
(),
Array
(
31
)[
22
].
keys
(),
Array
(
31
)[
23
].
keys
(),
Array
(
31
)[
24
].
keys
(),
Array
(
31
)[
25
].
keys
(),
Array
(
31
)[
26
].
keys
(),
Array
(
31
)[
27
].
keys
(),
Array
(
31
)[
28
].
keys
(),
Array
(
31
)[
29
].
keys
(),
Array
(
31
)[
30
]
.
keys
()])
]
]
build
()
{
build
()
{
Column
()
{
Column
()
{
...
@@ -290,19 +298,19 @@ struct CalendarExample {
...
@@ -290,19 +298,19 @@ struct CalendarExample {
Text
(
'
next month
'
)
Text
(
'
next month
'
)
}.
onClick
(()
=>
{
}.
onClick
(()
=>
{
this
.
calendar
.
shift
()
this
.
calendar
.
shift
()
this
.
calendar
.
push
(
new
Month
(
year
:
2020
,
month
:
7
,
days
:
[...
Array
(
31
)
.
keys
()]))
this
.
calendar
.
push
(
new
Month
(
2020
,
7
,
[
Array
(
31
)[
0
].
keys
(),
Array
(
31
)[
1
].
keys
(),
Array
(
31
)[
2
].
keys
(),
Array
(
31
)[
3
].
keys
(),
Array
(
31
)[
4
].
keys
(),
Array
(
31
)[
5
].
keys
(),
Array
(
31
)[
6
].
keys
(),
Array
(
31
)[
7
].
keys
(),
Array
(
31
)[
8
].
keys
(),
Array
(
31
)[
9
].
keys
(),
Array
(
31
)[
10
].
keys
(),
Array
(
31
)[
11
].
keys
(),
Array
(
31
)[
12
].
keys
(),
Array
(
31
)[
13
].
keys
(),
Array
(
31
)[
14
].
keys
(),
Array
(
31
)[
15
].
keys
(),
Array
(
31
)[
16
].
keys
(),
Array
(
31
)[
17
].
keys
(),
Array
(
31
)[
18
].
keys
(),
Array
(
31
)[
19
].
keys
(),
Array
(
31
)[
20
].
keys
(),
Array
(
31
)[
21
].
keys
(),
Array
(
31
)[
22
].
keys
(),
Array
(
31
)[
23
].
keys
(),
Array
(
31
)[
24
].
keys
(),
Array
(
31
)[
25
].
keys
(),
Array
(
31
)[
26
].
keys
(),
Array
(
31
)[
27
].
keys
(),
Array
(
31
)[
28
].
keys
(),
Array
(
31
)[
29
].
keys
(),
Array
(
31
)[
30
].
keys
(),
Array
(
31
)[
31
]
.
keys
()]))
})
})
ForEach
(
this
.
calendar
,
ForEach
(
this
.
calendar
,
(
item
:
Month
)
=>
{
(
item
:
Month
)
=>
{
ForEach
(
item
.
days
,
ForEach
(
item
.
days
,
(
day
:
number
)
=>
{
(
day
:
number
)
=>
{
//
构建日期块
//
Build a date block.
},
},
(
day
:
number
)
=>
day
.
toString
()
(
day
:
number
)
=>
day
.
toString
()
)
//
内部
ForEach
)
//
Inner
ForEach
},
},
(
item
:
Month
)
=>
(
item
.
year
*
12
+
item
.
month
).
toString
()
//
字段与年和月一起使用,作为月份的唯一ID。
(
item
:
Month
)
=>
(
item
.
year
*
12
+
item
.
month
).
toString
()
//
This field is used together with the year and month as the unique ID of the month.
)
//
外部
ForEach
)
//
Outer
ForEach
}
}
}
}
}
}
...
@@ -331,11 +339,11 @@ struct ForEachWithIndex {
...
@@ -331,11 +339,11 @@ struct ForEachWithIndex {
build
()
{
build
()
{
Column
()
{
Column
()
{
ForEach
(
this
.
arr
,
ForEach
(
this
.
arr
,
(
it
,
ind
x
)
=>
{
(
it
:
number
,
inde
x
)
=>
{
Text
(
`Item:
${
indx
}
-
${
it
}
`
)
Text
(
`Item:
${
ind
e
x
}
-
${
it
}
`
)
},
},
(
it
,
ind
x
)
=>
{
(
it
:
number
,
inde
x
)
=>
{
return
`
${
indx
}
-
${
it
}
`
return
`
${
ind
e
x
}
-
${
it
}
`
}
}
)
)
}
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录