Skip to content

D
Docs

Coping0606 / Docs
与 Fork 源项目一致

Fork自 OpenHarmony / Docs

通知 1
Star 1
Fork 0
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 6451f716 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!2938 网站问题修改+ui英文乱码处理 

Merge pull request !2938 from LiAn/master
上级 504e5fcb 158a95f5
隐藏空白更改
内联 并排
Showing with 103 addition and 103 deletion
en/application-dev/ui/ui-ts-creating-simple-page.md
浏览文件 @ 6451f716
...@@ -8,7 +8,7 @@ In this section, we will develop an infographic food details page, by building c ...@@ -8,7 +8,7 @@ In this section, we will develop an infographic food details page, by building c
1. Create a food name. 1. Create a food name.
Delete the code of the build method in the project template, create a <Stack> component, and place the <Text> component in the braces of the <Stack> component so that the <Text> component becomes a child component of the <Stack> component. A <Stack> component consists of one or more child components. The latter child component overwrites the former one. Delete the code of the build method in the project template, create a <Stack> component, and place the <Text> component in the braces of the <Stack> component so that the <Text> component becomes a child component of the <Stack> component. A <Stack> component consists of one or more child components. The latter child component overwrites the former one.
``` ```
@Entry @Entry
@Component @Component
...@@ -26,8 +26,8 @@ In this section, we will develop an infographic food details page, by building c ...@@ -26,8 +26,8 @@ In this section, we will develop an infographic food details page, by building c
![en-us_image_0000001222967780](figures/en-us_image_0000001222967780.png) ![en-us_image_0000001222967780](figures/en-us_image_0000001222967780.png)
2. Display food pictures. 2. Display food pictures.
Create an <Image> component and specify a URL for it. The <Image> and <Text> components are mandatory. To display the <Text> component above the <Image> component, you need to declare the <Image> component first. Image resources are stored in the rawfile folder in resources. When referencing the resources in the rawfile folder, use the \```"$rawfile('filename')"``` format, where filename indicates the relative path of the file in the rawfile folder. Currently, $rawfile only allows the <Image> component to reference image resources. Create an <Image> component and specify a URL for it. The <Image> and <Text> components are mandatory. To display the <Text> component above the <Image> component, you need to declare the <Image> component first. Image resources are stored in the rawfile folder in resources. When referencing the resources in the rawfile folder, use the `"$rawfile('filename')"` format, where filename indicates the relative path of the file in the rawfile folder. Currently, `$rawfile` only allows the <Image> component to reference image resources.
``` ```
@Entry @Entry
@Component @Component
...@@ -54,9 +54,9 @@ In this section, we will develop an infographic food details page, by building c ...@@ -54,9 +54,9 @@ In this section, we will develop an infographic food details page, by building c
![en-us_image_0000001222807784](figures/en-us_image_0000001222807784.png) ![en-us_image_0000001222807784](figures/en-us_image_0000001222807784.png)
You can then can reference the application resource in the \``` "$r('app.type.name') "\``` format, that is, $r('app.media.Tomato'). You can then can reference the application resource in the ` "$r('app.type.name')"` format, that is, `$r('app.media.Tomato')`.
``` ```
@Entry @Entry
@Component @Component
...@@ -74,14 +74,10 @@ In this section, we will develop an infographic food details page, by building c ...@@ -74,14 +74,10 @@ In this section, we will develop an infographic food details page, by building c
} }
``` ```
4. Set the width and height of the image, and set the objectFit attribute of the image to ImageFit.Contain, which means to keep the aspect ratio of the image to ensure that the image is completely displayed within the boundary. 4. Set the width and height of the image, and set the objectFit attribute of the image to ImageFit.Contain, which means to keep the aspect ratio of the image to ensure that the image is completely displayed within the boundary.If the image fills the entire screen, the possible causes are as follows:
If the image fills the entire screen, the possible causes are as follows: 1. The width and height of the image are not set.
2. The default attribute of objectFit of the image is ImageFit.Cover, that is, the image is zoomed in or zoomed out to fill the entire display boundary with the aspect ratio locked.
1. The width and height of the image are not set.
2. The default attribute of objectFit of the image is ImageFit.Cover, that is, the image is zoomed in or zoomed out to fill the entire display boundary with the aspect ratio locked.
``` ```
@Entry @Entry
@Component @Component
...@@ -97,13 +93,13 @@ In this section, we will develop an infographic food details page, by building c ...@@ -97,13 +93,13 @@ In this section, we will develop an infographic food details page, by building c
} }
} }
} }
``` ```
![en-us_image_0000001223127732](figures/en-us_image_0000001223127732.png) ![en-us_image_0000001223127732](figures/en-us_image_0000001223127732.png)
​
5. Set the food image and name layout. Set the alignment mode of the stack to bottom alignment. By default, the stack is center aligned. Set alignContent to Alignment.BottomStart. Similar to FontWeight, Alignment is a built-in enumeration type provided by the framework. 5. Set the food image and name layout. Set the alignment mode of the stack to bottom alignment. By default, the stack is center aligned. Set alignContent to Alignment.BottomStart. Similar to FontWeight, Alignment is a built-in enumeration type provided by the framework.
``` ```
@Entry @Entry
@Component @Component
struct MyComponent { struct MyComponent {
...@@ -118,7 +114,7 @@ In this section, we will develop an infographic food details page, by building c ...@@ -118,7 +114,7 @@ In this section, we will develop an infographic food details page, by building c
} }
} }
} }
``` ```
![en-us_image_0000001267647873](figures/en-us_image_0000001267647873.png) ![en-us_image_0000001267647873](figures/en-us_image_0000001267647873.png)
...@@ -126,7 +122,7 @@ In this section, we will develop an infographic food details page, by building c ...@@ -126,7 +122,7 @@ In this section, we will develop an infographic food details page, by building c
1. By using the built-in enumeration value of Color provided by the framework. For example, backgroundColor(Color.Red) indicates that the background color is set to red. 1. By using the built-in enumeration value of Color provided by the framework. For example, backgroundColor(Color.Red) indicates that the background color is set to red.
2. By using the parameter of the string type. The supported color formats are rgb, rgba, and HEX. For example, you can set the background color to blue by setting backgroundColor(??\#0000FF??) and set the background color to white by setting backgroundColor(??rgb(255, 255, 255)??). 2. By using the parameter of the string type. The supported color formats are rgb, rgba, and HEX. For example, you can set the background color to blue by setting backgroundColor(??\#0000FF??) and set the background color to white by setting backgroundColor(??rgb(255, 255, 255)??).
``` ```
@Entry @Entry
@Component @Component
...@@ -151,7 +147,7 @@ In this section, we will develop an infographic food details page, by building c ...@@ -151,7 +147,7 @@ In this section, we will develop an infographic food details page, by building c
1. When the parameter is set to Length, the outer margins of the four edges are specified. For example, margin(20) indicates that the outer margins of the top, right, bottom, and left edges are all 20. 1. When the parameter is set to Length, the outer margins of the four edges are specified. For example, margin(20) indicates that the outer margins of the top, right, bottom, and left edges are all 20.
2. {top?: Length, right?: Length, bottom?: Length, left?:Length} specifies the margins of the four edges. For example, margin({ left: 26, bottom: 17.4 }) indicates that the left margin is 26 and the bottom margin is 17.4. 2. {top?: Length, right?: Length, bottom?: Length, left?:Length} specifies the margins of the four edges. For example, margin({ left: 26, bottom: 17.4 }) indicates that the left margin is 26 and the bottom margin is 17.4.
``` ```
@Entry @Entry
@Component @Component
...@@ -176,7 +172,7 @@ In this section, we will develop an infographic food details page, by building c ...@@ -176,7 +172,7 @@ In this section, we will develop an infographic food details page, by building c
8. Adjust the structure between components and semanticize component names. Create the FoodDetail page entry component, create a column in FoodDetail, and set the alignment to alignItems(HorizontalAlign.Center). Change the name of the MyComponent component to FoodImageDisplay, which is a child component of the FoodDetail component. 8. Adjust the structure between components and semanticize component names. Create the FoodDetail page entry component, create a column in FoodDetail, and set the alignment to alignItems(HorizontalAlign.Center). Change the name of the MyComponent component to FoodImageDisplay, which is a child component of the FoodDetail component.
A column is a container component whose child components are vertically arranged. It is a linear layout in essence. Therefore, only the alignment in the cross axis direction can be set. A column is a container component whose child components are vertically arranged. It is a linear layout in essence. Therefore, only the alignment in the cross axis direction can be set.
``` ```
@Component @Component
struct FoodImageDisplay { struct FoodImageDisplay {
...@@ -193,7 +189,7 @@ In this section, we will develop an infographic food details page, by building c ...@@ -193,7 +189,7 @@ In this section, we will develop an infographic food details page, by building c
.backgroundColor('#FFedf2f5') .backgroundColor('#FFedf2f5')
} }
} }
@Entry @Entry
@Component @Component
struct FoodDetail { struct FoodDetail {
...@@ -212,7 +208,7 @@ In this section, we will develop an infographic food details page, by building c ...@@ -212,7 +208,7 @@ In this section, we will develop an infographic food details page, by building c
You can use the Flex layout to build a food composition table. In this way you do not need to worry about the width and height calculation. The size of different cells can be flexibly set based on the proportion. You can use the Flex layout to build a food composition table. In this way you do not need to worry about the width and height calculation. The size of different cells can be flexibly set based on the proportion.
1. Create a ContentTable component as a child component of the FoodDetail component. 1. Create a ContentTable component as a child component of the FoodDetail component.
``` ```
@Component @Component
struct FoodImageDisplay { struct FoodImageDisplay {
...@@ -229,12 +225,12 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -229,12 +225,12 @@ You can use the Flex layout to build a food composition table. In this way you d
.backgroundColor('#FFedf2f5') .backgroundColor('#FFedf2f5')
} }
} }
@Component @Component
struct ContentTable { struct ContentTable {
build() {} build() {}
} }
@Entry @Entry
@Component @Component
struct FoodDetail { struct FoodDetail {
...@@ -255,7 +251,7 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -255,7 +251,7 @@ You can use the Flex layout to build a food composition table. In this way you d
In the following example, code of FoodImageDisplay is omitted, and only code of ContentTable is provided. In the following example, code of FoodImageDisplay is omitted, and only code of ContentTable is provided.
``` ```
@Component @Component
struct ContentTable { struct ContentTable {
...@@ -273,7 +269,7 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -273,7 +269,7 @@ You can use the Flex layout to build a food composition table. In this way you d
.padding({ top: 30, right: 30, left: 30 }) .padding({ top: 30, right: 30, left: 30 })
} }
} }
@Entry @Entry
@Component @Component
struct FoodDetail { struct FoodDetail {
...@@ -290,7 +286,7 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -290,7 +286,7 @@ You can use the Flex layout to build a food composition table. In this way you d
![en-us_image_0000001267767869](figures/en-us_image_0000001267767869.png) ![en-us_image_0000001267767869](figures/en-us_image_0000001267767869.png)
3. Adjust the layout and set the proportion (layoutWeight) of each part. Set the proportion of the category name to 1, and the total proportion of content name and content value to 2. The content name and content value are in a same Flex, and the content name occupies all remaining space flexGrow(1). 3. Adjust the layout and set the proportion (layoutWeight) of each part. Set the proportion of the category name to 1, and the total proportion of content name and content value to 2. The content name and content value are in a same Flex, and the content name occupies all remaining space flexGrow(1).
``` ```
@Component @Component
struct FoodImageDisplay { struct FoodImageDisplay {
...@@ -307,7 +303,7 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -307,7 +303,7 @@ You can use the Flex layout to build a food composition table. In this way you d
.backgroundColor('#FFedf2f5') .backgroundColor('#FFedf2f5')
} }
} }
@Component @Component
struct ContentTable { struct ContentTable {
build() { build() {
...@@ -329,7 +325,7 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -329,7 +325,7 @@ You can use the Flex layout to build a food composition table. In this way you d
.padding({ top: 30, right: 30, left: 30 }) .padding({ top: 30, right: 30, left: 30 })
} }
} }
@Entry @Entry
@Component @Component
struct FoodDetail { struct FoodDetail {
...@@ -348,7 +344,7 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -348,7 +344,7 @@ You can use the Flex layout to build a food composition table. In this way you d
4. Create the Nutrient class in a similar process. Nutrition consists of four parts: Protein, Fat, Carbohydrates, and VitaminC. The names of the last three parts are omitted in the table and represented by spaces. 4. Create the Nutrient class in a similar process. Nutrition consists of four parts: Protein, Fat, Carbohydrates, and VitaminC. The names of the last three parts are omitted in the table and represented by spaces.
Set FlexDirection.Column, FlexAlign.SpaceBetween, and ItemAlign.Start. Set FlexDirection.Column, FlexAlign.SpaceBetween, and ItemAlign.Start.
``` ```
@Component @Component
struct ContentTable { struct ContentTable {
...@@ -429,7 +425,7 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -429,7 +425,7 @@ You can use the Flex layout to build a food composition table. In this way you d
.padding({ top: 30, right: 30, left: 30 }) .padding({ top: 30, right: 30, left: 30 })
} }
} }
@Entry @Entry
@Component @Component
struct FoodDetail { struct FoodDetail {
...@@ -450,7 +446,7 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -450,7 +446,7 @@ You can use the Flex layout to build a food composition table. In this way you d
Declare the IngredientItem method decorated by @Builder in ContentTable to declare the UI descriptions for the category name, content name, and content value. Declare the IngredientItem method decorated by @Builder in ContentTable to declare the UI descriptions for the category name, content name, and content value.
``` ```
@Component @Component
struct ContentTable { struct ContentTable {
...@@ -478,7 +474,7 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -478,7 +474,7 @@ You can use the Flex layout to build a food composition table. In this way you d
When the IngredientItem API is called in the build method of ContentTable, this needs to be used to invoke the method in the scope of the component to distinguish the global method call. When the IngredientItem API is called in the build method of ContentTable, this needs to be used to invoke the method in the scope of the component to distinguish the global method call.
``` ```
@Component @Component
struct ContentTable { struct ContentTable {
...@@ -499,7 +495,7 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -499,7 +495,7 @@ You can use the Flex layout to build a food composition table. In this way you d
The overall code of the ContentTable component is as follows: The overall code of the ContentTable component is as follows:
``` ```
@Component @Component
struct ContentTable { struct ContentTable {
...@@ -519,7 +515,7 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -519,7 +515,7 @@ You can use the Flex layout to build a food composition table. In this way you d
.layoutWeight(2) .layoutWeight(2)
} }
} }
build() { build() {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
this.IngredientItem('Calories', 'Calories', '17kcal') this.IngredientItem('Calories', 'Calories', '17kcal')
...@@ -532,7 +528,7 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -532,7 +528,7 @@ You can use the Flex layout to build a food composition table. In this way you d
.padding({ top: 30, right: 30, left: 30 }) .padding({ top: 30, right: 30, left: 30 })
} }
} }
@Entry @Entry
@Component @Component
struct FoodDetail { struct FoodDetail {
...@@ -557,3 +553,7 @@ The following sample is provided to help you better understand how to use build ...@@ -557,3 +553,7 @@ The following sample is provided to help you better understand how to use build
- [eTSBuildCommonView](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSBuildCommonView) - [eTSBuildCommonView](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSBuildCommonView)
This sample shows how to build a common view to display the picture of tomatoes and nutrition information, with the stack layout and flex layout. This sample shows how to build a common view to display the picture of tomatoes and nutrition information, with the stack layout and flex layout.
```
```
\ No newline at end of file
zh-cn/application-dev/reference/arkui-js/js-components-common-events.md
浏览文件 @ 6451f716
...@@ -13,29 +13,29 @@ ...@@ -13,29 +13,29 @@
相对于私有事件，大部分组件都可以绑定如下事件。 相对于私有事件，大部分组件都可以绑定如下事件。
| 名称 | 参数 | 描述 | 是否支持冒泡 | | 名称 | 参数 | 描述 | 是否支持冒泡 |
| -------- | -------- | -------- | -------- | | ------------------------ | ---------- | ---------------------------------------- | -------------- |
| touchstart | TouchEvent | 手指刚触摸屏幕时触发该事件。<br>> **说明：**TouchEvent具体可参考表2 TouchEvent对象属性列表 | 是<sup>5+</sup> | | touchstart | TouchEvent | 手指刚触摸屏幕时触发该事件。<br>> **说明：** TouchEvent具体可参考表2 TouchEvent对象属性列表 | 是<sup>5+</sup> |
| touchmove | TouchEvent | 手指触摸屏幕后移动时触发该事件。 | 是<sup>5+</sup> | | touchmove | TouchEvent | 手指触摸屏幕后移动时触发该事件。 | 是<sup>5+</sup> |
| touchcancel | TouchEvent | 手指触摸屏幕中动作被打断时触发该事件。 | 是<sup>5+</sup> | | touchcancel | TouchEvent | 手指触摸屏幕中动作被打断时触发该事件。 | 是<sup>5+</sup> |
| touchend | TouchEvent | 手指触摸结束离开屏幕时触发该事件。 | 是<sup>5+</sup> | | touchend | TouchEvent | 手指触摸结束离开屏幕时触发该事件。 | 是<sup>5+</sup> |
| click | - | 点击动作触发该事件。 | 是<sup>6+</sup> | | click | - | 点击动作触发该事件。 | 是<sup>6+</sup> |
| doubleclick<sup>7+</sup> | - | 双击动作触发该事件 | 否 | | doubleclick<sup>7+</sup> | - | 双击动作触发该事件 | 否 |
| longpress | - | 长按动作触发该事件。 | 否 | | longpress | - | 长按动作触发该事件。 | 否 |
| swipe<sup>5+</sup> | SwipeEvent | 组件上快速滑动后触发该事件。<br/>> **说明：**SwipeEvent具体可参考表6 SwipeEvent 基础事件对象属性列表 | 否 | | swipe<sup>5+</sup> | SwipeEvent | 组件上快速滑动后触发该事件。<br/>> **说明：** SwipeEvent具体可参考表6 SwipeEvent 基础事件对象属性列表 | 否 |
| attached<sup>6+</sup> | - | 当前组件节点挂载在渲染树后触发。 | 否 | | attached<sup>6+</sup> | - | 当前组件节点挂载在渲染树后触发。 | 否 |
| detached<sup>6+</sup> | - | 当前组件节点从渲染树中移除后触发。 | 否 | | detached<sup>6+</sup> | - | 当前组件节点从渲染树中移除后触发。 | 否 |
| pinchstart<sup>7+</sup> | PinchEvent | 手指开始执行捏合操作时触发该事件。<br/>> **说明：**PinchEvent具体可参考表7 PinchEvent 对象属性列表 | 否 | | pinchstart<sup>7+</sup> | PinchEvent | 手指开始执行捏合操作时触发该事件。<br/>> **说明：** PinchEvent具体可参考表7 PinchEvent 对象属性列表 | 否 |
| pinchupdate<sup>7+</sup> | PinchEvent | 手指执行捏合操作过程中触发该事件。 | 否 | | pinchupdate<sup>7+</sup> | PinchEvent | 手指执行捏合操作过程中触发该事件。 | 否 |
| pinchend<sup>7+</sup> | PinchEvent | 手指捏合操作结束离开屏幕时触发该事件。 | 否 | | pinchend<sup>7+</sup> | PinchEvent | 手指捏合操作结束离开屏幕时触发该事件。 | 否 |
| pinchcancel<sup>7+</sup> | PinchEvent | 手指捏合操作被打断时触发该事件。 | 否 | | pinchcancel<sup>7+</sup> | PinchEvent | 手指捏合操作被打断时触发该事件。 | 否 |
| dragstart<sup>7+</sup> | DragEvent | 用户开始拖拽时触发该事件。<br/>> **说明：**DragEvent具体可参考表8 DragEvent对象属性列表 | 否 | | dragstart<sup>7+</sup> | DragEvent | 用户开始拖拽时触发该事件。<br/>> **说明：** DragEvent具体可参考表8 DragEvent对象属性列表 | 否 |
| drag<sup>7+</sup> | DragEvent | 拖拽过程中触发该事件。 | 否 | | drag<sup>7+</sup> | DragEvent | 拖拽过程中触发该事件。 | 否 |
| dragend<sup>7+</sup> | DragEvent | 用户拖拽完成后触发。 | 否 | | dragend<sup>7+</sup> | DragEvent | 用户拖拽完成后触发。 | 否 |
| dragenter<sup>7+</sup> | DragEvent | 进入释放目标时触发该事件。 | 否 | | dragenter<sup>7+</sup> | DragEvent | 进入释放目标时触发该事件。 | 否 |
| dragover<sup>7+</sup> | DragEvent | 在释放目标内拖动时触发。 | 否 | | dragover<sup>7+</sup> | DragEvent | 在释放目标内拖动时触发。 | 否 |
| dragleave<sup>7+</sup> | DragEvent | 离开释放目标区域时触发。 | 否 | | dragleave<sup>7+</sup> | DragEvent | 离开释放目标区域时触发。 | 否 |
| drop<sup>7+</sup> | DragEvent | 在可释放目标区域内释放时触发。 | 否 | | drop<sup>7+</sup> | DragEvent | 在可释放目标区域内释放时触发。 | 否 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
...@@ -43,52 +43,52 @@ ...@@ -43,52 +43,52 @@
**表1** BaseEvent对象属性列表 **表1** BaseEvent对象属性列表
| 属性 | 类型 | 说明 | | 属性 | 类型 | 说明 |
| -------- | -------- | -------- | | --------- | ------ | --------------------------- |
| type | string | 当前事件的类型，比如click、longpress等。 | | type | string | 当前事件的类型，比如click、longpress等。 |
| timestamp | number | 该事件触发时的时间戳。 | | timestamp | number | 该事件触发时的时间戳。 |
**表2** TouchEvent对象属性列表(继承BaseEvent) **表2** TouchEvent对象属性列表(继承BaseEvent)
| 属性 | 类型 | 说明 | | 属性 | 类型 | 说明 |
| -------- | -------- | -------- | | -------------- | ---------------------- | ---------------------------------------- |
| touches | Array&lt;TouchInfo&gt; | 触摸事件时的属性集合，包含屏幕触摸点的信息数组。 | | touches | Array&lt;TouchInfo&gt; | 触摸事件时的属性集合，包含屏幕触摸点的信息数组。 |
| changedTouches | Array&lt;TouchInfo&gt; | 触摸事件时的属性集合，包括产生变化的屏幕触摸点的信息数组。数据格式和touches一样。该属性表示有变化的触摸点，如从无变有，位置变化，从有变无。例如用户手指刚接触屏幕时，touches数组中有数据，但changedTouches无数据。 | | changedTouches | Array&lt;TouchInfo&gt; | 触摸事件时的属性集合，包括产生变化的屏幕触摸点的信息数组。数据格式和touches一样。该属性表示有变化的触摸点，如从无变有，位置变化，从有变无。例如用户手指刚接触屏幕时，touches数组中有数据，但changedTouches无数据。 |
**表3** TouchInfo **表3** TouchInfo
| 属性 | 类型 | 说明 | | 属性 | 类型 | 说明 |
| -------- | -------- | -------- | | ------------------ | ------ | ------------------------------ |
| globalX | number | 距离屏幕左上角（不包括状态栏）横向距离。屏幕的左上角为原点。 | | globalX | number | 距离屏幕左上角（不包括状态栏）横向距离。屏幕的左上角为原点。 |
| globalY | number | 距离屏幕左上角（不包括状态栏）纵向距离。屏幕的左上角为原点。 | | globalY | number | 距离屏幕左上角（不包括状态栏）纵向距离。屏幕的左上角为原点。 |
| localX | number | 距离被触摸组件左上角横向距离。组件的左上角为原点。 | | localX | number | 距离被触摸组件左上角横向距离。组件的左上角为原点。 |
| localY | number | 距离被触摸组件左上角纵向距离。组件的左上角为原点。 | | localY | number | 距离被触摸组件左上角纵向距离。组件的左上角为原点。 |
| size | number | 触摸接触面积。 | | size | number | 触摸接触面积。 |
| force<sup>6+</sup> | number | 接触力信息。 | | force<sup>6+</sup> | number | 接触力信息。 |
**表6** SwipeEvent 基础事件对象属性列表（继承BaseEvent） **表6** SwipeEvent 基础事件对象属性列表（继承BaseEvent）
| 属性 | 类型 | 说明 | | 属性 | 类型 | 说明 |
| -------- | -------- | -------- | | --------------------- | ------ | ---------------------------------------- |
| direction | string | 滑动方向，可能值有：<br/>1.&nbsp;left：向左滑动；<br/>2.&nbsp;right：向右滑动；<br/>3.&nbsp;up：向上滑动；<br/>4.&nbsp;down：向下滑动。 | | direction | string | 滑动方向，可能值有：<br/>1.&nbsp;left：向左滑动；<br/>2.&nbsp;right：向右滑动；<br/>3.&nbsp;up：向上滑动；<br/>4.&nbsp;down：向下滑动。 |
| distance<sup>6+</sup> | number | 在滑动方向上的滑动距离。 | | distance<sup>6+</sup> | number | 在滑动方向上的滑动距离。 |
**表7** PinchEvent 对象属性列表<sup>7+</sup> **表7** PinchEvent 对象属性列表<sup>7+</sup>
| 属性 | 类型 | 说明 | | 属性 | 类型 | 说明 |
| -------- | -------- | -------- | | ------------ | ------ | -------------- |
| scale | number | 缩放比例 | | scale | number | 缩放比例 |
| pinchCenterX | number | 捏合中心点X轴坐标，单位px | | pinchCenterX | number | 捏合中心点X轴坐标，单位px |
| pinchCenterY | number | 捏合中心点Y轴坐标，单位px | | pinchCenterY | number | 捏合中心点Y轴坐标，单位px |
**表8** DragEvent对象属性列表(继承BaseEvent)<sup>7+</sup> **表8** DragEvent对象属性列表(继承BaseEvent)<sup>7+</sup>
| 属性 | 类型 | 说明 | | 属性 | 类型 | 说明 |
| -------- | -------- | -------- | | --------- | ------ | ---------------- |
| type | string | 事件名称。 | | type | string | 事件名称。 |
| globalX | number | 距离屏幕左上角坐标原点横向距离。 | | globalX | number | 距离屏幕左上角坐标原点横向距离。 |
| globalY | number | 距离屏幕左上角坐标原点纵向距离。 | | globalY | number | 距离屏幕左上角坐标原点纵向距离。 |
| timestamp | number | 时间戳。 | | timestamp | number | 时间戳。 |
## 事件对象 ## 事件对象
...@@ -96,8 +96,8 @@ ...@@ -96,8 +96,8 @@
**target对象：** **target对象：**
| 属性 | 类型 | 说明 | | 属性 | 类型 | 说明 |
| -------- | -------- | -------- | | -------------------- | ------ | ---------------------------------------- |
| dataSet<sup>6+</sup> | Object | 组件上通过通用属性设置的[data-*](../arkui-js/js-components-common-attributes.md)的自定义属性组成的集合。 | | dataSet<sup>6+</sup> | Object | 组件上通过通用属性设置的[data-*](../arkui-js/js-components-common-attributes.md)的自定义属性组成的集合。 |
**示例：** **示例：**
......
zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
浏览文件 @ 6451f716
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
![zh-cn_image_0000001214128687](figures/zh-cn_image_0000001214128687.png) ![zh-cn_image_0000001214128687](figures/zh-cn_image_0000001214128687.png)
2. 食物图片展示。 2. 食物图片展示。
创建Image组件，指定Image组件的url，Image组件和Text组件都是必选构造参数组件。为了让Text组件在Image组件上方显示，所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内，引用rawfile下资源时使用“$rawfile('filename')”的形式，filename为rawfile目录下的文件相对路径。当前$rawfile仅支持Image控件引用图片资源。 创建Image组件，指定Image组件的url，Image组件和Text组件都是必选构造参数组件。为了让Text组件在Image组件上方显示，所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内，引用rawfile下资源时使用`$rawfile('filename')`的形式，filename为rawfile目录下的文件相对路径。当前`$rawfile`仅支持Image控件引用图片资源。
``` ```
@Entry @Entry
@Component @Component
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
![zh-cn_image_0000001214330169](figures/zh-cn_image_0000001214330169.png) ![zh-cn_image_0000001214330169](figures/zh-cn_image_0000001214330169.png)
就可以通过“$r('app.type.name')”的形式引用应用资源，即$r('app.media.Tomato')。 就可以通过`$r('app.type.name')`的形式引用应用资源，即`$r('app.media.Tomato')`。
``` ```
@Entry @Entry
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
4. 设置Image宽高，并且将image的objectFit属性设置为ImageFit.Contain，即保持图片长宽比的情况下，使得图片完整地显示在边界内。 4. 设置Image宽高，并且将image的objectFit属性设置为ImageFit.Contain，即保持图片长宽比的情况下，使得图片完整地显示在边界内。
如果Image填满了整个屏幕，原因如下： 如果Image填满了整个屏幕，原因如下：
1. Image没有设置宽高。 1. Image没有设置宽高。
2. Image的objectFit默认属性是ImageFit.Cover，即在保持长宽比的情况下放大或缩小，使其填满整个显示边界。 2. Image的objectFit默认属性是ImageFit.Cover，即在保持长宽比的情况下放大或缩小，使其填满整个显示边界。
``` ```
...@@ -183,7 +183,7 @@ ...@@ -183,7 +183,7 @@
.backgroundColor('#FFedf2f5') .backgroundColor('#FFedf2f5')
} }
} }
@Entry @Entry
@Component @Component
struct FoodDetail { struct FoodDetail {
...@@ -218,12 +218,12 @@ ...@@ -218,12 +218,12 @@
.backgroundColor('#FFedf2f5') .backgroundColor('#FFedf2f5')
} }
} }
@Component @Component
struct ContentTable { struct ContentTable {
build() {} build() {}
} }
@Entry @Entry
@Component @Component
struct FoodDetail { struct FoodDetail {
...@@ -261,7 +261,7 @@ ...@@ -261,7 +261,7 @@
.padding({ top: 30, right: 30, left: 30 }) .padding({ top: 30, right: 30, left: 30 })
} }
} }
@Entry @Entry
@Component @Component
struct FoodDetail { struct FoodDetail {
...@@ -294,7 +294,7 @@ ...@@ -294,7 +294,7 @@
.backgroundColor('#FFedf2f5') .backgroundColor('#FFedf2f5')
} }
} }
@Component @Component
struct ContentTable { struct ContentTable {
build() { build() {
...@@ -316,7 +316,7 @@ ...@@ -316,7 +316,7 @@
.padding({ top: 30, right: 30, left: 30 }) .padding({ top: 30, right: 30, left: 30 })
} }
} }
@Entry @Entry
@Component @Component
struct FoodDetail { struct FoodDetail {
...@@ -415,7 +415,7 @@ ...@@ -415,7 +415,7 @@
.padding({ top: 30, right: 30, left: 30 }) .padding({ top: 30, right: 30, left: 30 })
} }
} }
@Entry @Entry
@Component @Component
struct FoodDetail { struct FoodDetail {
...@@ -502,7 +502,7 @@ ...@@ -502,7 +502,7 @@
.layoutWeight(2) .layoutWeight(2)
} }
} }
build() { build() {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
this.IngredientItem('Calories', 'Calories', '17kcal') this.IngredientItem('Calories', 'Calories', '17kcal')
...@@ -515,7 +515,7 @@ ...@@ -515,7 +515,7 @@
.padding({ top: 30, right: 30, left: 30 }) .padding({ top: 30, right: 30, left: 30 })
} }
} }
@Entry @Entry
@Component @Component
struct FoodDetail { struct FoodDetail {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或