Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 170ad1d6 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!11808 检视意见修改1125 

Merge pull request !11808 from luoying_ace/ly1111
上级 e11bbe21 18953050
显示空白变更内容
内联 并排
Showing with 220 addition and 376 deletion
zh-cn/application-dev/reference/arkui-js/js-components-container-div.md
浏览文件 @ 170ad1d6
...@@ -247,7 +247,7 @@ ...@@ -247,7 +247,7 @@
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content" ondragstart="dragstart" ondrag="drag" ondragend="dragend" style="position: absolute;left: {{left}};top:{{top}};"> <div class="content" ondragstart="dragstart" ondrag="drag" ondragend="dragend" style="position: absolute;left: {{left}};top: {{top}};">
</div> </div>
</div> </div>
``` ```
...@@ -256,8 +256,10 @@ ...@@ -256,8 +256,10 @@
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
width: 100%;
height: 100%;
} }
.content{ .content {
width: 200px; width: 200px;
height: 200px; height: 200px;
background-color: red; background-color: red;
...@@ -285,7 +287,7 @@ ...@@ -285,7 +287,7 @@
prompt.showToast({ prompt.showToast({
message: 'End Drag' message: 'End Drag'
}) })
}, }
} }
``` ```
...@@ -358,8 +360,8 @@ ...@@ -358,8 +360,8 @@
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content "onpinchstart="pinchstart" onpinchend="pinchend" onpinchupdate="pinchupdate" <div class="content" onpinchstart="pinchstart" onpinchend="pinchend" onpinchupdate="pinchupdate"
onpinchcancel=" pinchcancel"> onpinchcancel="pinchcancel">
</div> </div>
</div> </div>
``` ```
...@@ -371,12 +373,13 @@ ...@@ -371,12 +373,13 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 454px; width: 454px;
height: 454px;} height: 454px;
.content{ }
.content {
width: 400px; width: 400px;
height: 400px; height: 400px;
background-color: aqua; background-color: aqua;
margin:30px margin: 30px;
} }
``` ```
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md
浏览文件 @ 170ad1d6
...@@ -41,28 +41,61 @@ Divider() ...@@ -41,28 +41,61 @@ Divider()
@Component @Component
struct DividerExample { struct DividerExample {
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { Column() {
// 使用横向分割线场景
Text('Horizontal divider').fontSize(9).fontColor(0xCCCCCC) Text('Horizontal divider').fontSize(9).fontColor(0xCCCCCC)
Row().width('100%').height(40).backgroundColor(0xF1F3F5) List() {
Divider() ForEach([1, 2, 3], (item) => {
Row().width('100%').height(40).backgroundColor(0xF1F3F5) ListItem() {
Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start)
// 纵向分割线 }.width(244).height(48)
}, item => item.toString())
}.padding({ left: 24, bottom: 8 })
Divider().strokeWidth(8).color('#F1F3F5')
List() {
ForEach([4, 5], (item) => {
ListItem() {
Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start)
}.width(244).height(48)
}, item => item.toString())
}.padding({ left: 24, top: 8 })
// 使用纵向分割线场景
Text('Vertical divider').fontSize(9).fontColor(0xCCCCCC) Text('Vertical divider').fontSize(9).fontColor(0xCCCCCC)
Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { Column() {
Text('bravery') Column() {
Divider().vertical(true).margin(20).height(15) Row().width(288).height(64).backgroundColor('#30C9F0').opacity(0.3)
Text('effort') Row() {
Divider().vertical(true).margin(20).height(15) Button('Button')
Text('upward') .width(136)
}.width(250) .height(22)
.fontSize(16)
// 设置分割线宽度和端点样式 .fontColor('#007DFF')
Text('Custom Styles').fontSize(9).fontColor(0xCCCCCC) .fontWeight(500)
Row().width('100%').height(40).backgroundColor(0xF1F3F5) .backgroundColor(Color.Transparent)
Divider().vertical(false).strokeWidth(5).color(0x2788D9).lineCap(LineCapStyle.Round) Divider().vertical(true).height(22).color('#182431').opacity(0.6).margin({ left: 8, right: 8 })
Row().width('100%').height(40).backgroundColor(0xF1F3F5) Button('Button')
}.width('100%').height(350).padding({ left: 35, right: 35, top: 35 }) .width(136)
.height(22)
.fontSize(16)
.fontColor('#007DFF')
.fontWeight(500)
.backgroundColor(Color.Transparent)
}.margin({ top: 17 })
}
.width(336)
.height(152)
.backgroundColor('#FFFFFF')
.borderRadius(24)
.padding(24)
}
.width('100%')
.height(168)
.backgroundColor('#F1F3F5')
.justifyContent(FlexAlign.Center)
.margin({ top: 8 })
}.width('100%').padding({ top: 24 })
} }
} }
``` ```
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md
浏览文件 @ 170ad1d6
...@@ -51,19 +51,20 @@ Select(options: Array\<[SelectOption](#selectoption对象说明)\>) ...@@ -51,19 +51,20 @@ Select(options: Array\<[SelectOption](#selectoption对象说明)\>)
struct SelectExample { struct SelectExample {
build() { build() {
Column() { Column() {
Select([{ value: 'aaa', icon: "/common/1.png" }, Select([{ value: 'aaa', icon: "/common/public_icon.svg" },
{ value: 'bbb', icon: "/common/2.png" }, { value: 'bbb', icon: "/common/public_icon.svg" },
{ value: 'ccc', icon: "/common/3.png" }, { value: 'ccc', icon: "/common/public_icon.svg" },
{ value: 'ddd', icon: "/common/4.png" }]) { value: 'ddd', icon: "/common/public_icon.svg" }])
.selected(2) .selected(2)
.value('TTT') .value('TTTTT')
.font({ size: 30, weight: 400, family: 'serif', style: FontStyle.Normal }) .font({ size: 16, weight: 500 })
.selectedOptionFont({ size: 40, weight: 500, family: 'serif', style: FontStyle.Normal }) .fontColor('#182431')
.optionFont({ size: 30, weight: 400, family: 'serif', style: FontStyle.Normal }) .selectedOptionFont({ size: 16, weight: 400 })
.optionFont({ size: 16, weight: 400 })
.onSelect((index: number) => { .onSelect((index: number) => {
console.info("Select:" + index) console.info('Select:' + index)
}) })
} }.width('100%')
} }
} }
``` ```
......
zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md
浏览文件 @ 170ad1d6
...@@ -61,90 +61,140 @@ ...@@ -61,90 +61,140 @@
@Entry @Entry
@Component @Component
struct BadgeExample { struct BadgeExample {
@State counts: number = 1 @Builder TabBuilder(index: number) {
@State message: string = 'new'
build() {
Column() { Column() {
Text('numberBadge').width('80%') if (index === 2) {
Row({ space: 10 }) {
// 数字上标，maxCount默认99,超过99展示99+
Badge({
count: this.counts,
maxCount: 99,
position: BadgePosition.RightTop,
style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
}) {
Button('message')
.onClick(() => {
this.counts++
})
.width(100).height(50).backgroundColor(0x317aff)
}.width(100).height(50)
// 数字上标
Badge({ Badge({
count: this.counts, value: '',
maxCount: 99, style: { badgeSize: 6, badgeColor: '#FA2A2D' }
position: BadgePosition.Left,
style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
}) { }) {
Button('message') Image('/common/public_icon_off.svg')
.onClick(() => { .width(24)
this.counts++ .height(24)
}) }
.width(100).height(50).backgroundColor(0x317aff) .width(24)
}.width(100).height(50) .height(24)
.margin({ bottom: 4 })
} else {
Image('/common/public_icon_off.svg')
.width(24)
.height(24)
.margin({ bottom: 4 })
}
Text('Tab')
.fontColor('#182431')
.fontSize(10)
.fontWeight(500)
.lineHeight(14)
}.width('100%').height('100%').justifyContent(FlexAlign.Center)
}
@Builder itemBuilder(value: string) {
Row() {
Image('common/public_icon.svg').width(32).height(32).opacity(0.6)
Text(value)
.width(177)
.height(21)
.margin({ left: 15, right: 76 })
.textAlign(TextAlign.Start)
.fontColor('#182431')
.fontWeight(500)
.fontSize(16)
.opacity(0.9)
Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6)
}.width('100%').padding({ left: 12, right: 12 }).height(56)
}
// 数字上标 build() {
Column() {
Text('dotsBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24)
Tabs() {
TabContent()
.tabBar(this.TabBuilder(0))
TabContent()
.tabBar(this.TabBuilder(1))
TabContent()
.tabBar(this.TabBuilder(2))
TabContent()
.tabBar(this.TabBuilder(3))
}
.width(360)
.height(56)
.backgroundColor('#F1F3F5')
Column() {
Text('stringBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24)
List({ space: 12 }) {
ListItem() {
Text('list1').fontSize(14).fontColor('#182431').margin({ left: 12 })
}
.width('100%')
.height(56)
.backgroundColor('#FFFFFF')
.borderRadius(24)
.align(Alignment.Start)
ListItem() {
Badge({ Badge({
count: this.counts, value: 'New',
maxCount: 99,
position: BadgePosition.Right, position: BadgePosition.Right,
style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } style: { badgeSize: 16, badgeColor: '#FA2A2D' }
}) {
Button('message')
.onClick(() => {
this.counts++
})
.width(100).height(50).backgroundColor(0x317aff)
}.width(100).height(50)
}.margin(10)
Text('stringBadge').width('80%')
Row({ space: 30 }) {
Badge({
value: this.message,
style: { color: 0xFFFFFF, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue }
}) { }) {
Text('message') Text('list2').width(27).height(19).fontSize(14).fontColor('#182431')
.width(80) }.width(49.5).height(19)
.height(50) .margin({ left: 12 })
.fontSize(16) }
.lineHeight(37) .width('100%')
.borderRadius(10) .height(56)
.textAlign(TextAlign.Center) .backgroundColor('#FFFFFF')
.backgroundColor(0xF3F4ED) .borderRadius(24)
}.width(80).height(50) .align(Alignment.Start)
}.width(336)
Text('numberBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24)
List() {
ListItem() {
this.itemBuilder('list1')
}
// value为空，设置圆点标记 ListItem() {
Row() {
Image('common/public_icon.svg').width(32).height(32).opacity(0.6)
Badge({ Badge({
value: '', count: 1,
position: BadgePosition.Right, position: BadgePosition.Right,
style: { badgeSize: 6, badgeColor: Color.Red } style: { badgeSize: 16, badgeColor: '#FA2A2D' }
}) { }) {
Text('message') Text('list2')
.width(90) .width(177)
.height(50) .height(21)
.textAlign(TextAlign.Start)
.fontColor('#182431')
.fontWeight(500)
.fontSize(16) .fontSize(16)
.lineHeight(37) .opacity(0.9)
.borderRadius(10) }.width(240).height(21).margin({ left: 15, right: 11 })
.textAlign(TextAlign.Center)
.backgroundColor(0xF3F4ED) Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6)
}.width(90).height(50) }.width('100%').padding({ left: 12, right: 12 }).height(56)
}.margin(10) }
ListItem() {
this.itemBuilder('list3')
}
ListItem() {
this.itemBuilder('list4')
}
} }
.width(336)
.height(232)
.backgroundColor('#FFFFFF')
.borderRadius(24)
.padding({ top: 4, bottom: 4 })
.divider({ strokeWidth: 0.5, color: 'rgba(0,0,0,0.1)', startMargin: 60, endMargin: 12 })
}.width('100%').backgroundColor('#F1F3F5').padding({ bottom: 12 })
}.width('100%')
} }
} }
``` ```
......
zh-cn/application-dev/ui/ts-component-based-builder.md 已删除 100644 → 0
浏览文件 @ e11bbe21
# @Builder
@Builder装饰的方法用于定义组件的声明式UI描述，在一个自定义组件内快速生成多个布局内容。如果\@Builder装饰的方法中使用了自定义组件，那么该方法每次被调用时，对应的自定义组件均会重新创建。\@Builder装饰方法的功能和语法规范与[build函数](ts-function-build.md)相同。
```ts
// xxx.ets
@Component
struct CompB {
@State CompValue: string = '';
aboutToAppear() {
console.info('CompB aboutToAppear.');
}
aboutToDisappear() {
console.info('CompB aboutToDisappear.');
}
build() {
Column() {
Button(this.CompValue);
}
}
}
@Entry
@Component
struct CompA {
size1: number = 100;
@State CompValue1: string = "Hello,CompValue1";
@State CompValue2: string = "Hello,CompValue2";
@State CompValue3: string = "Hello,CompValue3";
// @Builder装饰的函数内使用自定义组件
@Builder CompC(value: string) {
CompB({ CompValue: value });
}
@Builder SquareText(label: string) {
Text(label)
.width(1 * this.size1)
.height(1 * this.size1)
}
@Builder RowOfSquareTexts(label1: string, label2: string) {
Row() {
this.SquareText(label1)
this.SquareText(label2)
}
.width(2 * this.size1)
.height(1 * this.size1)
}
build() {
Column() {
Row() {
this.SquareText("A")
this.SquareText("B")
// or as long as tsc is used
}
.width(2 * this.size1)
.height(1 * this.size1)
this.RowOfSquareTexts("C", "D")
Column() {
// 使用三次@Builder装饰的自定义组件
this.CompC(this.CompValue1);
this.CompC(this.CompValue2);
this.CompC(this.CompValue3);
}
.width(2 * this.size1)
.height(2 * this.size1)
}
.width(2 * this.size1)
.height(2 * this.size1)
}
}
```
## @BuilderParam<sup>8+<sup>
@BuilderParam装饰器用于修饰自定义组件内函数类型的属性（例如：`@BuilderParam content: () => any;`），并且在初始化自定义组件时被@BuilderParam修饰的属性必须赋值。
### 引入动机
当开发者创建自定义组件，想对该组件添加特定功能时（如：仅对自定义组件添加一个点击跳转操作）。若直接在组件内嵌入事件方法，将会导致所有初始化该组件的地方均增加了该功能。为解决此问题，引入了@BuilderParam装饰器，此装饰器修饰的属性值可为@Builder修饰的方法，开发者可在初始化自定义组件时对此属性进行赋值，为自定义组件增加特定的的功能。
### 参数初始化组件
通过参数初始化组件时，将@Builder装饰的方法赋值给@BuilderParam修饰的属性，并在自定义组件内调用content属性值。对@BuilderParam修饰的属性进行赋值时不带参数（如：`content: this.specificParam`），则此属性的类型需定义成无返回值的函数（如：`@BuilderParam content: () => void`）。若带参数（如：`callContent: this.specificParam1("111")`），则此属性的类型需定义成any（如：`@BuilderParam callContent: any;`）。
```ts
// xxx.ets
@Component
struct CustomContainer {
header: string = "";
@BuilderParam noParam: () => void;
@BuilderParam withParam: any;
footer: string = "";
build() {
Column() {
Text(this.header)
.fontSize(50)
this.noParam()
this.withParam()
Text(this.footer)
.fontSize(50)
}
}
}
@Entry
@Component
struct CustomContainerUser {
@Builder specificNoParam() {
Column() {
Text("noParam").fontSize(50)
}
}
@Builder SpecificWithParam(label: string) {
Column() {
Text(label).fontSize(50)
}
}
build() {
Column() {
CustomContainer({
header: "Header",
noParam: this.specificNoParam,
withParam: this.SpecificWithParam("WithParam"),
footer: "Footer",
})
}
}
}
```
### 尾随闭包初始化组件
在自定义组件中使用@BuilderParam修饰的属性接收尾随闭包（在初始化自定义组件时，组件名称紧跟一个大括号“{}”形成尾随闭包场景（`CustomComponent(){}`）。开发者可把尾随闭包看做一个容器，向其填充内容，如在闭包内增加组件（`{Column(){Text("content")}`），闭包内语法规范与[build](../ui/ts-function-build.md)一致。此场景下自定义组件内有且仅有一个使用@BuilderParam修饰的属性。
示例：在闭包内增加Column组件并添加点击事件，在新增的Column组件内调用@Builder修饰的specificParam方法，点击Column组件后该改变自定义组件中header的属性值为“changeHeader”。并且在初始化自定义组件时会把尾随闭包的内容赋值给使用@BuilderParam修饰的closer属性。
```ts
// xxx.ets
@Component
struct CustomContainer {
header: string = "";
@BuilderParam closer: () => void;
build() {
Column() {
Text(this.header)
.fontSize(50)
this.closer()
}
}
}
@Builder function specificParam(label1: string, label2: string) {
Column() {
Text(label1)
.fontSize(50)
Text(label2)
.fontSize(50)
}
}
@Entry
@Component
struct CustomContainerUser {
@State text: string = "header"
build() {
Column() {
CustomContainer({
header: this.text,
}){
Column(){
specificParam("111", "22")
}.onClick(()=>{
this.text = "changeHeader"
})
}
}
}
}
```
zh-cn/application-dev/ui/ts-framework-file-access-rules.md 已删除 100644 → 0
浏览文件 @ e11bbe21
# 文件访问规则
应用代码中文件访问方法主要有下面两种：
- **相对路径**：使用相对路径引用代码文件，以"../"访问上一级目录，以"./"访问当前目录，也可以省略不写。
- **绝对路径**：使用当前模块根路径引用代码文件，比如：common/utils/utils。
## 示例
示例页面位于pages目录中，在pages同级目录common中存放utils，从示例xxx.ets访问utils.ets文件方法如下：
```ts
// xxx.ets
import { FoodData, FoodList } from "../common/utils/utils";
@Entry
@Component
struct FoodCategoryList {
private foodItems: FoodData[] = [
new FoodData("Tomato"),
new FoodData("Strawberry"),
new FoodData("Cucumber")
]
build() {
Column() {
FoodList({ foodItems: this.foodItems })
}
}
}
```
被导入文件utils.ets：
```ts
//common/utils/utils.ets
export class FoodData {
name: string;
constructor(name: string) {
this.name = name;
}
}
@Component
export struct FoodList {
private foodItems: FoodData[]
build() {
Column() {
Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {
Text('Food List')
.fontSize(20)
}
.width(200)
.height(56)
.backgroundColor('#FFf1f3f5')
List() {
ForEach(this.foodItems, item => {
ListItem() {
Text(item.name)
.fontSize(14)
}
}, item => item.toString())
}
}
}
}
```
\ No newline at end of file
zh-cn/application-dev/ui/ui-js-components-switch.md
浏览文件 @ 170ad1d6
...@@ -12,7 +12,7 @@ switch为开关选择器，切换开启或关闭状态。具体用法请参考[s ...@@ -12,7 +12,7 @@ switch为开关选择器，切换开启或关闭状态。具体用法请参考[s
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<switch></switch> <switch checked="true"></switch>
</div> </div>
``` ```
...@@ -30,7 +30,7 @@ switch为开关选择器，切换开启或关闭状态。具体用法请参考[s ...@@ -30,7 +30,7 @@ switch为开关选择器，切换开启或关闭状态。具体用法请参考[s
## 添加属性和方法 ## 添加属性和方法
witch组件通过textoff和showtext属性设置文本选中和未选中时的状态。设置checked属性值为true（组件为打开状态）。添加change事件，当组件状态改变时触发，触发后执行switchChange函数获取组件当前状态（关闭/打开）。 switch组件通过textoff和showtext属性设置文本选中和未选中时的状态。设置checked属性值为true（组件为打开状态）。添加change事件，当组件状态改变时触发，触发后执行switchChange函数获取组件当前状态（关闭/打开）。
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
......
zh-cn/application-dev/ui/ui-ts-building-category-list-layout.md
浏览文件 @ 170ad1d6
...@@ -26,6 +26,12 @@ ...@@ -26,6 +26,12 @@
``` ```
3. 引入FoodData类和initializeOnStartup方法。 3. 引入FoodData类和initializeOnStartup方法。
应用代码中文件访问方法主要有下面两种：
- **相对路径**：使用相对路径引用代码文件，以"../"访问上一级目录，以"./"访问当前目录，也可以省略不写。
- **绝对路径**：使用当前模块根路径引用代码文件，比如：common/utils/utils。
这里使用相对路径访问：
``` ```
import { FoodData } from '../model/FoodData' import { FoodData } from '../model/FoodData'
import { initializeOnStartup } from '../model/FoodDataModels' import { initializeOnStartup } from '../model/FoodDataModels'
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或