Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 5dec9444 编写于 作者: Y yamila
浏览文件
操作

update ui-ts-newGridContainer 

Signed-off-by: Nyamila <tianyu55@huawei.com>
上级 35e7a42a
隐藏空白更改
内联 并排
Showing with 151 addition and 166 deletion
zh-cn/application-dev/quick-start/arkts-rendering-control.md
浏览文件 @ 5dec9444
......@@ -267,7 +267,7 @@ struct MyComponent {
>
> - 生成的子组件必须是允许包含在LazyForEach父容器组件中的子组件。
>
> - 允许LazyForEach包含在if/else条件渲染语句中，但不允许LazyForEach中出现if/else条件渲染语句。
> - 允许LazyForEach包含在if/else条件渲染语句中。
>
> - 为了高性能渲染，通过DataChangeListener对象的onDataChange方法来更新UI时，仅当itemGenerator中创建的子组件内使用了状态变量时，才会触发组件刷新。
>
......
zh-cn/application-dev/reference/apis/js-apis-curve.md
浏览文件 @ 5dec9444
......@@ -58,7 +58,7 @@ stepsCurve(count: number, end: boolean)：ICurve
| 参数名 | 类型 | 必填 | 说明 |
| ------ | ------- | ----| ------------------------------------------------------------ |
| count | number | 是 | 阶梯的数量，需要为正整数。 |
| end | boolean | 是 | 在每个间隔的起点或是终点发生阶跃变化。<br>-true：在终点发生阶跃变化。<br>-false:在起点发生阶跃变化。 |
| end | boolean | 是 | 在每个间隔的起点或是终点发生阶跃变化。<br>-true：在终点发生阶跃变化。<br>-false：在起点发生阶跃变化。 |
**返回值：**
......
zh-cn/application-dev/reference/apis/js-apis-router.md
浏览文件 @ 5dec9444
......@@ -32,7 +32,7 @@ pushUrl(options: RouterOptions): Promise&lt;void&gt;
| 类型 | 说明 |
| ------------------- | --------- |
| Promise&lt;void&gt; | 异常返回结果 |
| Promise&lt;void&gt; | 异常返回结果。 |
**错误码：**
......@@ -47,25 +47,21 @@ pushUrl(options: RouterOptions): Promise&lt;void&gt;
**示例：**
```js
try {
router.pushUrl({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
router.pushUrl({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
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>
......@@ -81,7 +77,7 @@ pushUrl(options: RouterOptions, callback: AsyncCallback&lt;void&gt;): void
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ------------------------------- | ---- | --------- |
| options | [RouterOptions](#routeroptions) | 是 | 跳转页面描述信息。 |
| callback | AsyncCallback&lt;void&gt; | 是 | 异常响应回调 |
| callback | AsyncCallback&lt;void&gt; | 是 | 异常响应回调。 |
**错误码：**
......@@ -96,25 +92,21 @@ pushUrl(options: RouterOptions, callback: AsyncCallback&lt;void&gt;): void
**示例：**
```js
try {
router.pushUrl({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
}
}, (err) => {
if (err) {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
return;
router.pushUrl({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
console.info('pushUrl success');
});
} catch (error) {
console.error(`pushUrl args error code is ${error.code}, message is ${error.message}`);
};
}
})
.then(() => {
// success
})
.catch(err => {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
})
```
## router.pushUrl<sup>9+</sup>
......@@ -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;
**示例：**
```js
try {
router.pushUrl({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
router.pushUrl({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
}, router.RouterMode.Standard)
.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.RouterMode.Standard)
.then(() => {
// success
})
.catch(err => {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
})
```
## router.pushUrl<sup>9+</sup>
......@@ -185,7 +173,7 @@ pushUrl(options: RouterOptions, mode: RouterMode, callback: AsyncCallback&lt;voi
| ------- | ------------------------------- | ---- | ---------- |
| options | [RouterOptions](#routeroptions) | 是 | 跳转页面描述信息。 |
| mode | [RouterMode](#routermode9) | 是 | 跳转页面使用的模式。 |
| callback | AsyncCallback&lt;void&gt; | 是 | 异常响应回调 |
| callback | AsyncCallback&lt;void&gt; | 是 | 异常响应回调。 |
**错误码：**
......@@ -200,25 +188,21 @@ pushUrl(options: RouterOptions, mode: RouterMode, callback: AsyncCallback&lt;voi
**示例：**
```js
try {
router.pushUrl({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
}
}, router.RouterMode.Standard, (err) => {
if (err) {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
return;
router.pushUrl({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
console.info('pushUrl success');
});
} catch (error) {
console.error(`pushUrl args error code is ${error.code}, message is ${error.message}`);
};
}
}, router.RouterMode.Standard, (err) => {
if (err) {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('pushUrl success');
})
```
## router.replaceUrl<sup>9+</sup>
......@@ -239,7 +223,7 @@ replaceUrl(options: RouterOptions): Promise&lt;void&gt;
| 类型 | 说明 |
| ------------------- | --------- |
| Promise&lt;void&gt; | 异常返回结果 |
| Promise&lt;void&gt; | 异常返回结果。 |
**错误码：**
......@@ -253,22 +237,18 @@ replaceUrl(options: RouterOptions): Promise&lt;void&gt;
**示例：**
```js
try {
router.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message'
}
router.replaceUrl({
url: 'pages/detail',
params: {
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>
......@@ -284,7 +264,7 @@ replaceUrl(options: RouterOptions, callback: AsyncCallback&lt;void&gt;): void
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ------------------------------- | ---- | ------------------ |
| options | [RouterOptions](#routeroptions) | 是 | 替换页面描述信息。 |
| callback | AsyncCallback&lt;void&gt; | 是 | 异常响应回调 |
| callback | AsyncCallback&lt;void&gt; | 是 | 异常响应回调。 |
**错误码：**
......@@ -298,22 +278,18 @@ replaceUrl(options: RouterOptions, callback: AsyncCallback&lt;void&gt;): void
**示例：**
```js
try {
router.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message'
}
}, (err) => {
if (err) {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('replaceUrl success');
});
} catch (error) {
console.error(`replaceUrl args error code is ${error.code}, message is ${error.message}`);
};
router.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message'
}
}, (err) => {
if (err) {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('replaceUrl success');
})
```
## router.replaceUrl<sup>9+</sup>
......@@ -336,7 +312,7 @@ replaceUrl(options: RouterOptions, mode: RouterMode): Promise&lt;void&gt;
| 类型 | 说明 |
| ------------------- | --------- |
| Promise&lt;void&gt; | 异常返回结果 |
| Promise&lt;void&gt; | 异常返回结果。 |
**错误码：**
......@@ -350,22 +326,18 @@ replaceUrl(options: RouterOptions, mode: RouterMode): Promise&lt;void&gt;
**示例：**
```js
try {
router.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message'
}
}, router.RouterMode.Standard)
.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({
url: 'pages/detail',
params: {
data1: 'message'
}
}, router.RouterMode.Standard)
.then(() => {
// success
})
.catch(err => {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
})
```
## router.replaceUrl<sup>9+</sup>
......@@ -382,7 +354,7 @@ replaceUrl(options: RouterOptions, mode: RouterMode, callback: AsyncCallback&lt;
| ------- | ------------------------------- | ---- | ---------- |
| options | [RouterOptions](#routeroptions) | 是 | 替换页面描述信息。 |
| mode | [RouterMode](#routermode9) | 是 | 跳转页面使用的模式。 |
| callback | AsyncCallback&lt;void&gt; | 是 | 异常响应回调 |
| callback | AsyncCallback&lt;void&gt; | 是 | 异常响应回调。 |
**错误码：**
......@@ -396,22 +368,19 @@ replaceUrl(options: RouterOptions, mode: RouterMode, callback: AsyncCallback&lt;
**示例：**
```js
try {
router.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message'
}
}, router.RouterMode.Standard, (err) => {
if (err) {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('replaceUrl success');
});
} catch (error) {
console.error(`replaceUrl args error code is ${error.code}, message is ${error.message}`);
};
router.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message'
}
}, router.RouterMode.Standard, (err) => {
if (err) {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('replaceUrl success');
});
```
## router.back
......@@ -571,9 +540,9 @@ getParams(): Object
**返回值：**
| 类型 | 说明 |
| ------ | ----------------- |
| Object | 发起跳转的页面往当前页传入的参数。 |
| 类型 | 说明 |
| ------ | ---------------------------------- |
| object | 发起跳转的页面往当前页传入的参数。 |
**示例：**
......@@ -636,7 +605,7 @@ export default {
### 基于TS扩展的声明式开发范式
```ts
//通过router.push跳转至目标页携带params参数
// 通过router.pushUrl跳转至目标页携带params参数
import router from '@ohos.router'
@Entry
......@@ -682,7 +651,7 @@ struct Index {
```
```ts
//在second页面中接收传递过来的参数
// 在second页面中接收传递过来的参数
import router from '@ohos.router'
@Entry
......
zh-cn/application-dev/reference/apis/js-apis-system-router.md
浏览文件 @ 5dec9444
......@@ -395,6 +395,6 @@ export default {
## ParamsInterface
| 名称 | 参数类型 | 说明 |
| ------------- | ------ | ------- |
| [key: string] | Object | 路由参数列表。 |
| 名称 | 参数类型 | 说明 |
| ------------- | -------- | -------------- |
| [key: string] | object | 路由参数列表。 |
zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
浏览文件 @ 5dec9444
# ListItem
用来展示列表具体item，宽度默认充满List组件，必须配合List来使用。
用来展示列表具体item，必须配合List来使用。
> **说明：**
>
......
zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
浏览文件 @ 5dec9444
......@@ -131,7 +131,7 @@ scrollToIndex(value: number): void
> **说明：**
>
> 仅支持list组件。
> 仅支持Grid、list、WaterFlow组件。
**参数：**
......
zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md
浏览文件 @ 5dec9444
......@@ -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
zh-cn/application-dev/ui/ui-ts-building-data-model.md
浏览文件 @ 5dec9444
......@@ -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。
```ts
......
zh-cn/application-dev/ui/ui-ts-layout-grid-container-new.md
浏览文件 @ 5dec9444
......@@ -27,12 +27,12 @@
栅格系统以设备的水平宽度（屏幕密度像素值，单位vp)作为断点依据，定义设备的宽度类型，形成了一套断点规则。开发者可根据需求在不同的断点区间实现不同的页面布局效果。
栅格系统默认断点将设备宽度分为xs、sm、md、lg四类，尺寸范围如下：
| 断点名称 | 取值范围（vp）|
| --------| ------ |
| xs | [0, 320） |
| sm | [320, 520) |
| md | [520, 840) |
| lg | [840, +∞) |
| 断点名称 | 取值范围（vp）|
| --------| ------ |
| xs | [0, 320） |
| sm | [320, 520) |
| md | [520, 840) |
| lg | [840, +∞) |
在GridRow新栅格组件中，允许开发者使用breakpoints自定义修改断点的取值范围，最多支持6个断点，除了默认的四个断点外，
还可以启用xl，xxl两个断点，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的布局设置。
......@@ -88,10 +88,10 @@ GridRow({
}.backgroundColor(color)
})
}
```
```
![](figures/breakpoints.gif)
### 栅格布局的总列数
......@@ -333,8 +333,8 @@ GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设
### order
栅格子组件的序号，决定子组件排列次序。当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件设置不同的order时，order较大的组件在前，较小的在后。
当子组件部分设置order，部分不设置order时，未设置order的子组件依次排序靠前，设置了order的子组件按照数值从大到小排列。
栅格子组件的序号，决定子组件排列次序。当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件设置不同的order时，order较小的组件在前，较大的在后。
当子组件部分设置order，部分不设置order时，未设置order的子组件依次排序靠前，设置了order的子组件按照数值从小到大排列。
- 当类型为number时，子组件在任何尺寸下排序次序一致。
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或