未验证 提交 d21318b9 编写于 作者: O openharmony_ci 提交者: Gitee

!13702 13379挑单到monthly1018

Merge pull request !13702 from 田雨/monthly_20221018
...@@ -267,7 +267,7 @@ struct MyComponent { ...@@ -267,7 +267,7 @@ struct MyComponent {
> >
> - 生成的子组件必须是允许包含在LazyForEach父容器组件中的子组件。 > - 生成的子组件必须是允许包含在LazyForEach父容器组件中的子组件。
> >
> - 允许LazyForEach包含在if/else条件渲染语句中,但不允许LazyForEach中出现if/else条件渲染语句 > - 允许LazyForEach包含在if/else条件渲染语句中。
> >
> - 为了高性能渲染,通过DataChangeListener对象的onDataChange方法来更新UI时,仅当itemGenerator中创建的子组件内使用了状态变量时,才会触发组件刷新。 > - 为了高性能渲染,通过DataChangeListener对象的onDataChange方法来更新UI时,仅当itemGenerator中创建的子组件内使用了状态变量时,才会触发组件刷新。
> >
......
...@@ -58,7 +58,7 @@ stepsCurve(count: number, end: boolean):ICurve ...@@ -58,7 +58,7 @@ stepsCurve(count: number, end: boolean):ICurve
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ------ | ------- | ----| ------------------------------------------------------------ | | ------ | ------- | ----| ------------------------------------------------------------ |
| count | number | 是 | 阶梯的数量,需要为正整数。 | | count | number | 是 | 阶梯的数量,需要为正整数。 |
| end | boolean | 是 | 在每个间隔的起点或是终点发生阶跃变化。<br>-true:在终点发生阶跃变化。<br>-false:在起点发生阶跃变化。 | | end | boolean | 是 | 在每个间隔的起点或是终点发生阶跃变化。<br>-true:在终点发生阶跃变化。<br>-false在起点发生阶跃变化。 |
**返回值:** **返回值:**
...@@ -265,7 +265,7 @@ steps(count: number, end: boolean): string ...@@ -265,7 +265,7 @@ steps(count: number, end: boolean): string
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ------ | ------- | ----| ------------------------------------------------------------ | | ------ | ------- | ----| ------------------------------------------------------------ |
| count | number | 是 | 阶梯的数量,需要为正整数。 | | count | number | 是 | 阶梯的数量,需要为正整数。 |
| end | boolean | 是 | 在每个间隔的起点或是终点发生阶跃变化。<br>-true:在终点发生阶跃变化。<br>-false:在起点发生阶跃变化。 | | end | boolean | 是 | 在每个间隔的起点或是终点发生阶跃变化。<br>-true:在终点发生阶跃变化。<br>-false在起点发生阶跃变化。 |
## Curves.cubicBezier<sup>(deprecated)</sup> ## Curves.cubicBezier<sup>(deprecated)</sup>
......
...@@ -47,25 +47,21 @@ pushUrl(options: RouterOptions): Promise&lt;void&gt; ...@@ -47,25 +47,21 @@ pushUrl(options: RouterOptions): Promise&lt;void&gt;
**示例:** **示例:**
```js ```js
try { router.pushUrl({
router.pushUrl({ url: 'pages/routerpage2',
url: 'pages/routerpage2', params: {
params: { data1: 'message',
data1: 'message', data2: {
data2: { data3: [123, 456, 789]
data3: [123, 456, 789]
}
} }
}
})
.then(() => {
// success
})
.catch(err => {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
}) })
.then(() => {
// success
})
.catch(err => {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
})
} catch (error) {
console.error(`pushUrl args error code is ${error.code}, message is ${error.message}`);
};
``` ```
## router.pushUrl<sup>9+</sup> ## router.pushUrl<sup>9+</sup>
...@@ -96,25 +92,21 @@ pushUrl(options: RouterOptions, callback: AsyncCallback&lt;void&gt;): void ...@@ -96,25 +92,21 @@ pushUrl(options: RouterOptions, callback: AsyncCallback&lt;void&gt;): void
**示例:** **示例:**
```js ```js
try { router.pushUrl({
router.pushUrl({ url: 'pages/routerpage2',
url: 'pages/routerpage2', params: {
params: { data1: 'message',
data1: 'message', data2: {
data2: { data3: [123, 456, 789]
data3: [123, 456, 789]
}
}
}, (err) => {
if (err) {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
return;
} }
console.info('pushUrl success'); }
}); }, (err) => {
} catch (error) { if (err) {
console.error(`pushUrl args error code is ${error.code}, message is ${error.message}`); console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
}; return;
}
console.info('pushUrl success');
});
``` ```
## router.pushUrl<sup>9+</sup> ## router.pushUrl<sup>9+</sup>
...@@ -135,7 +127,7 @@ pushUrl(options: RouterOptions, mode: RouterMode): Promise&lt;void&gt; ...@@ -135,7 +127,7 @@ pushUrl(options: RouterOptions, mode: RouterMode): Promise&lt;void&gt;
| 类型 | 说明 | | 类型 | 说明 |
| ------------------- | --------- | | ------------------- | --------- |
| Promise&lt;void&gt; | 异常返回结果 | | Promise&lt;void&gt; | 异常返回结果 |
**错误码:** **错误码:**
...@@ -150,25 +142,21 @@ pushUrl(options: RouterOptions, mode: RouterMode): Promise&lt;void&gt; ...@@ -150,25 +142,21 @@ pushUrl(options: RouterOptions, mode: RouterMode): Promise&lt;void&gt;
**示例:** **示例:**
```js ```js
try { router.pushUrl({
router.pushUrl({ url: 'pages/routerpage2',
url: 'pages/routerpage2', params: {
params: { data1: 'message',
data1: 'message', data2: {
data2: { data3: [123, 456, 789]
data3: [123, 456, 789]
}
} }
}, router.RouterMode.Standard) }
.then(() => { }, router.RouterMode.Standard)
// success .then(() => {
}) // success
.catch(err => { })
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`); .catch(err => {
}) console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
} catch (error) { })
console.error(`pushUrl args error code is ${error.code}, message is ${error.message}`);
};
``` ```
## router.pushUrl<sup>9+</sup> ## router.pushUrl<sup>9+</sup>
...@@ -200,25 +188,21 @@ pushUrl(options: RouterOptions, mode: RouterMode, callback: AsyncCallback&lt;voi ...@@ -200,25 +188,21 @@ pushUrl(options: RouterOptions, mode: RouterMode, callback: AsyncCallback&lt;voi
**示例:** **示例:**
```js ```js
try { router.pushUrl({
router.pushUrl({ url: 'pages/routerpage2',
url: 'pages/routerpage2', params: {
params: { data1: 'message',
data1: 'message', data2: {
data2: { data3: [123, 456, 789]
data3: [123, 456, 789]
}
}
}, router.RouterMode.Standard, (err) => {
if (err) {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
return;
} }
console.info('pushUrl success'); }
}); }, router.RouterMode.Standard, (err) => {
} catch (error) { if (err) {
console.error(`pushUrl args error code is ${error.code}, message is ${error.message}`); console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
}; return;
}
console.info('pushUrl success');
});
``` ```
## router.replaceUrl<sup>9+</sup> ## router.replaceUrl<sup>9+</sup>
...@@ -253,22 +237,18 @@ replaceUrl(options: RouterOptions): Promise&lt;void&gt; ...@@ -253,22 +237,18 @@ replaceUrl(options: RouterOptions): Promise&lt;void&gt;
**示例:** **示例:**
```js ```js
try { router.replaceUrl({
router.replaceUrl({ url: 'pages/detail',
url: 'pages/detail', params: {
params: { data1: 'message'
data1: 'message' }
} })
.then(() => {
// success
})
.catch(err => {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
}) })
.then(() => {
// success
})
.catch(err => {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
})
} catch (error) {
console.error(`replaceUrl args error code is ${error.code}, message is ${error.message}`);
};
``` ```
## router.replaceUrl<sup>9+</sup> ## router.replaceUrl<sup>9+</sup>
...@@ -298,22 +278,18 @@ replaceUrl(options: RouterOptions, callback: AsyncCallback&lt;void&gt;): void ...@@ -298,22 +278,18 @@ replaceUrl(options: RouterOptions, callback: AsyncCallback&lt;void&gt;): void
**示例:** **示例:**
```js ```js
try { router.replaceUrl({
router.replaceUrl({ url: 'pages/detail',
url: 'pages/detail', params: {
params: { data1: 'message'
data1: 'message' }
} }, (err) => {
}, (err) => { if (err) {
if (err) { console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`); return;
return; }
} console.info('replaceUrl success');
console.info('replaceUrl success'); });
});
} catch (error) {
console.error(`replaceUrl args error code is ${error.code}, message is ${error.message}`);
};
``` ```
## router.replaceUrl<sup>9+</sup> ## router.replaceUrl<sup>9+</sup>
...@@ -350,22 +326,18 @@ replaceUrl(options: RouterOptions, mode: RouterMode): Promise&lt;void&gt; ...@@ -350,22 +326,18 @@ replaceUrl(options: RouterOptions, mode: RouterMode): Promise&lt;void&gt;
**示例:** **示例:**
```js ```js
try { router.replaceUrl({
router.replaceUrl({ url: 'pages/detail',
url: 'pages/detail', params: {
params: { data1: 'message'
data1: 'message' }
} }, router.RouterMode.Standard)
}, router.RouterMode.Standard) .then(() => {
.then(() => { // success
// success })
}) .catch(err => {
.catch(err => { console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`); })
})
} catch (error) {
console.error(`replaceUrl args error code is ${error.code}, message is ${error.message}`);
};
``` ```
## router.replaceUrl<sup>9+</sup> ## router.replaceUrl<sup>9+</sup>
...@@ -396,22 +368,18 @@ replaceUrl(options: RouterOptions, mode: RouterMode, callback: AsyncCallback&lt; ...@@ -396,22 +368,18 @@ replaceUrl(options: RouterOptions, mode: RouterMode, callback: AsyncCallback&lt;
**示例:** **示例:**
```js ```js
try { router.replaceUrl({
router.replaceUrl({ url: 'pages/detail',
url: 'pages/detail', params: {
params: { data1: 'message'
data1: 'message' }
} }, router.RouterMode.Standard, (err) => {
}, router.RouterMode.Standard, (err) => { if (err) {
if (err) { console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`); return;
return; }
} console.info('replaceUrl success');
console.info('replaceUrl success'); });
});
} catch (error) {
console.error(`replaceUrl args error code is ${error.code}, message is ${error.message}`);
};
``` ```
## router.back ## router.back
...@@ -590,7 +558,7 @@ router.getParams(); ...@@ -590,7 +558,7 @@ router.getParams();
| 名称 | 类型 | 必填 | 说明 | | 名称 | 类型 | 必填 | 说明 |
| ------ | ------ | ---- | ------------------------------------------------------------ | | ------ | ------ | ---- | ------------------------------------------------------------ |
| url | string | 是 | 表示目标页面的url,可以用以下两种格式:<br/>-&nbsp;页面绝对路径,由配置文件中pages列表提供,例如:<br/>&nbsp;&nbsp;-&nbsp;pages/index/index<br/>&nbsp;&nbsp;-&nbsp;pages/detail/detail<br/>-&nbsp;特殊值,如果url的值是"/",则跳转到首页。 | | url | string | 是 | 表示目标页面的url,可以用以下两种格式:<br/>-&nbsp;页面绝对路径,由配置文件中pages列表提供,例如:<br/>&nbsp;&nbsp;-&nbsp;pages/index/index<br/>&nbsp;&nbsp;-&nbsp;pages/detail/detail<br/>-&nbsp;特殊值,如果url的值是"/",则跳转到首页。 |
| params | Object | 否 | 表示路由跳转时要同时传递到目标页面的数据。跳转到目标页面后,使用router.getParams()获取传递的参数,此外,在类web范式中,参数也可以在页面中直接使用,如this.keyValue(keyValue为跳转时params参数中的key值),如果目标页面中已有该字段,则其值会被传入的字段值覆盖。 | | params | object | 否 | 表示路由跳转时要同时传递到目标页面的数据。跳转到目标页面后,使用router.getParams()获取传递的参数,此外,在类web范式中,参数也可以在页面中直接使用,如this.keyValue(keyValue为跳转时params参数中的key值),如果目标页面中已有该字段,则其值会被传入的字段值覆盖。 |
> **说明:** > **说明:**
...@@ -636,7 +604,7 @@ export default { ...@@ -636,7 +604,7 @@ export default {
### 基于TS扩展的声明式开发范式 ### 基于TS扩展的声明式开发范式
```ts ```ts
// 通过router.push跳转至目标页携带params参数 // 通过router.pushUrl跳转至目标页携带params参数
import router from '@ohos.router' import router from '@ohos.router'
@Entry @Entry
......
# ListItem # ListItem
用来展示列表具体item,宽度默认充满List组件,必须配合List来使用。 用来展示列表具体item,必须配合List来使用。
> **说明:** > **说明:**
> >
......
...@@ -131,7 +131,7 @@ scrollToIndex(value: number): void ...@@ -131,7 +131,7 @@ scrollToIndex(value: number): void
> **说明:** > **说明:**
> >
> 仅支持list组件。 > 仅支持Grid、list、WaterFlow组件。
**参数:** **参数:**
......
...@@ -60,4 +60,20 @@ struct TransitionExample { ...@@ -60,4 +60,20 @@ struct TransitionExample {
} }
``` ```
![animateTo](figures/animateTo.gif) 示意图:
\ No newline at end of file
图片完全显示时:
![animationComponent1](figures/animationComponent1.png)
图片消失时配置顺时针旋转180°的过渡效果:
![animationComponent3](figures/animationComponent3.png)
图片完全消失时:
![animationComponent2](figures/animationComponent2.png)
图片显示时配置横向放大一倍的过渡效果:
![animationComponent4](figures/animationComponent4.png)
\ No newline at end of file
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
] ]
``` ```
实际开发中,开发者可以自定义更多的数据资源,当食物资源很多时,建议使用数据懒加载LazyForEach 实际开发中,开发者可以自定义更多的数据资源,当食物资源很多时,建议使用[数据懒加载LazyForEach](../quick-start/arkts-rendering-control.md#数据懒加载)
5. 创建initializeOnStartUp方法来初始化FoodData的数组。在FoodDataModels.ets中使用了定义在FoodData.ets的FoodData和Category,所以要将FoodData.ets的FoodData类export,在FoodDataModels.ets内import FoodData和Category。 5. 创建initializeOnStartUp方法来初始化FoodData的数组。在FoodDataModels.ets中使用了定义在FoodData.ets的FoodData和Category,所以要将FoodData.ets的FoodData类export,在FoodDataModels.ets内import FoodData和Category。
```ts ```ts
......
...@@ -27,12 +27,12 @@ ...@@ -27,12 +27,12 @@
栅格系统以设备的水平宽度(屏幕密度像素值,单位vp)作为断点依据,定义设备的宽度类型,形成了一套断点规则。开发者可根据需求在不同的断点区间实现不同的页面布局效果。 栅格系统以设备的水平宽度(屏幕密度像素值,单位vp)作为断点依据,定义设备的宽度类型,形成了一套断点规则。开发者可根据需求在不同的断点区间实现不同的页面布局效果。
栅格系统默认断点将设备宽度分为xs、sm、md、lg四类,尺寸范围如下: 栅格系统默认断点将设备宽度分为xs、sm、md、lg四类,尺寸范围如下:
| 断点名称 | 取值范围(vp)| | 断点名称 | 取值范围(vp)|
| --------| ------ | | --------| ------ |
| xs | [0, 320) | | xs | [0, 320) |
| sm | [320, 520) | | sm | [320, 520) |
| md | [520, 840) | | md | [520, 840) |
| lg | [840, +∞) | | lg | [840, +∞) |
在GridRow新栅格组件中,允许开发者使用breakpoints自定义修改断点的取值范围,最多支持6个断点,除了默认的四个断点外, 在GridRow新栅格组件中,允许开发者使用breakpoints自定义修改断点的取值范围,最多支持6个断点,除了默认的四个断点外,
还可以启用xl,xxl两个断点,支持六种不同尺寸(xs, sm, md, lg, xl, xxl)设备的布局设置。 还可以启用xl,xxl两个断点,支持六种不同尺寸(xs, sm, md, lg, xl, xxl)设备的布局设置。
...@@ -88,10 +88,10 @@ GridRow({ ...@@ -88,10 +88,10 @@ GridRow({
}.backgroundColor(color) }.backgroundColor(color)
}) })
} }
``` ```
![](figures/breakpoints.gif) ![](figures/breakpoints.gif)
### 栅格布局的总列数 ### 栅格布局的总列数
...@@ -333,8 +333,8 @@ GridCol组件作为GridRow组件的子组件,通过给GridCol传参或者设 ...@@ -333,8 +333,8 @@ GridCol组件作为GridRow组件的子组件,通过给GridCol传参或者设
### order ### order
栅格子组件的序号,决定子组件排列次序。当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件设置不同的order时,order较大的组件在前,较小的在后。 栅格子组件的序号,决定子组件排列次序。当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件设置不同的order时,order较小的组件在前,较大的在后。
当子组件部分设置order,部分不设置order时,未设置order的子组件依次排序靠前,设置了order的子组件按照数值从大到小排列。 当子组件部分设置order,部分不设置order时,未设置order的子组件依次排序靠前,设置了order的子组件按照数值从小到大排列。
- 当类型为number时,子组件在任何尺寸下排序次序一致。 - 当类型为number时,子组件在任何尺寸下排序次序一致。
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册