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

!22441 文档整改

Merge pull request !22441 from 田雨/master
......@@ -9,9 +9,9 @@
## 事件
| 名称 | 支持冒泡 | 功能描述 |
| ---------------------------------------- | ---- | ---------------------------------------- |
| onAreaChange(event: (oldValue: [Area](ts-types.md#area8), newValue: [Area](ts-types.md#area8)) => void) | 否 | 组件区域变化时触发该回调。仅会响应由布局变化所导致的组件大小、位置发生变化时的回调。由绘制变化所导致的渲染属性变化不会响应回调,如translate、offset。 |
| 名称 | 支持冒泡 | 功能描述 |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onAreaChange(event:&nbsp;(oldValue:&nbsp;[Area](ts-types.md#area8),&nbsp;newValue:&nbsp;[Area](ts-types.md#area8))&nbsp;=&gt;&nbsp;void) | 否 | 组件区域变化时触发该回调。仅会响应由布局变化所导致的组件大小、位置发生变化时的回调。由绘制变化所导致的渲染属性变化不会响应回调,如translate、offset。<br/>-&nbsp;[Area](ts-types.md#area8):返回目标元素的宽高以及目标元素相对父元素和页面左上角的坐标位置。 |
## 示例
......
......@@ -75,17 +75,15 @@ Image支持加载存档图、多媒体像素图两种类型。
支持file://路径前缀的字符串,用于访问通过媒体库提供的图片路径。
1. 调用接口获取图库的照片url。
```ts
import picker from '@ohos.file.picker';
@Entry
@Component
struct Index {
@State imgDatas: string[] = [];
// 获取照片url集
getAllImg() {
let photoPicker = new picker.PhotoViewPicker();
let result = new Array<string>();
try {
let PhotoSelectOptions = new picker.PhotoSelectOptions();
......@@ -101,7 +99,7 @@ Image支持加载存档图、多媒体像素图两种类型。
} catch (err) {
console.error(`PhotoViewPicker failed with. Code: ${err.code}, message: ${err.message}`); }
}
// aboutToAppear中调用上述函数,获取图库的所有图片url,存在imgDatas中
async aboutToAppear() {
this.getAllImg();
......@@ -121,8 +119,8 @@ Image支持加载存档图、多媒体像素图两种类型。
}
}
```
2. 从媒体库获取的url格式通常如下。
```ts
Image('file://media/Photos/5')
.width(200)
......@@ -150,14 +148,12 @@ PixelMap是图片解码后的像素图,具体用法请参考[图片开发指
请求网络图片请求,解码编码PixelMap。
1. 引用网络权限与媒体库权限。
```ts
import http from '@ohos.net.http';
import ResponseCode from '@ohos.net.http';
import image from '@ohos.multimedia.image';
```
2. 填写网络图片地址。
```ts
http.createHttp().request("https://www.example.com/xxx.png",
(error, data) => {
......@@ -168,25 +164,24 @@ PixelMap是图片解码后的像素图,具体用法请参考[图片开发指
}
)
```
3. 将网络地址成功返回的数据,编码转码成pixelMap的图片格式。
3. 将网络地址成功返回的数据,编码转码成pixelMap的图片格式。
```ts
let code = data.responseCode;
if(ResponseCode.ResponseCode.OK === code) {
if (ResponseCode.ResponseCode.OK === code) {
let imageSource = image.createImageSource(data.result);
let options = {
alphaType: 0, // 透明度
editable: false, // 是否可编辑
pixelFormat: 3, // 像素格式
scaleMode: 1, // 缩略值
size: {height: 100, width: 100}
} // 创建图片大小
imageSource.createPixelMap(options).then((pixelMap) => {
alphaType: 0, // 透明度
editable: false, // 是否可编辑
pixelFormat: 3, // 像素格式
scaleMode: 1, // 缩略值
size: { height: 100, width: 100 }
} // 创建图片大小
imageSource.createPixelMap(options).then((pixelMap) => {
this.image = pixelMap
})
})
}
```
4. 显示图片。
```ts
Button("获取网络图片")
.onClick(() => {
......
......@@ -46,7 +46,7 @@ List除了提供垂直和水平布局能力、超出屏幕时可以滚动的自
列表的主轴方向是指子组件列的排列方向,也是列表的滚动方向。垂直于主轴的轴称为交叉轴,其方向与主轴方向相互垂直。
如下图所示,垂直列表的主轴是垂直方向,交叉轴是水平方向;水平列表的主轴是水平方向,交叉轴是水平方向。
如下图所示,垂直列表的主轴是垂直方向,交叉轴是水平方向;水平列表的主轴是水平方向,交叉轴是垂直方向。
**图4** 列表的主轴与交叉轴  
......
......@@ -76,7 +76,7 @@ Row({ space: 35 }) {
在布局容器内,可以通过alignItems属性设置子元素在交叉轴(排列方向的垂直方向)上的对齐方式。且在各类尺寸屏幕中,表现一致。其中,交叉轴为垂直方向时,取值为[VerticalAlign类型](../reference/arkui-ts/ts-appendix-enums.md#verticalalign),水平方向取值为[HorizontalAlign](../reference/arkui-ts/ts-appendix-enums.md#horizontalalign)
alignSelf属性用于控制单个子元素在容器轴上的对齐方式,其优先级高于alignItems属性,如果设置了alignSelf属性,则在单个子元素上会覆盖alignItems属性。
alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式,其优先级高于alignItems属性,如果设置了alignSelf属性,则在单个子元素上会覆盖alignItems属性。
### Column容器内子元素在水平方向上的排列
......
......@@ -26,7 +26,7 @@
### 锚点设置
锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系。在水平方向上,可以设置left、middle、right的锚点。在竖直方向上,可以设置top、center、bottom的锚点。为了明确定义锚点,必须为RelativeContainer及其子元素设置ID,用于指定锚点信息。ID默认为“container”,其余子元素的ID通过id属性设置。未设置ID的子元素在RelativeContainer中不会显示。
锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系。在水平方向上,可以设置left、middle、right的锚点。在竖直方向上,可以设置top、center、bottom的锚点。为了明确定义锚点,必须为RelativeContainer及其子元素设置ID,用于指定锚点信息。ID默认为“__container__”,其余子元素的ID通过id属性设置。未设置ID的子元素在RelativeContainer中不会显示。
>**说明:**
>
......
......@@ -342,6 +342,7 @@ import router from '@ohos.router';
```ts
// library/src/main/ets/pages/Index.ets
// library为新建共享包自定义的名字
@Entry({ routeName : 'myPage' })
@Component
struct MyComponent {
......@@ -353,7 +354,7 @@ struct MyComponent {
```ts
// entry/src/main/ets/pages/Index.ets
import router from '@ohos.router';
import 'library/src/main/ets/Index.ets' // 引入共享包library中的命名路由页面
import 'library/src/main/ets/pages/Index.ets' // 引入共享包library中的命名路由页面
@Entry
@Component
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册