diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md index 0d51d6238b8e1434efadbde33b288a87ee950d88..8f81b0178ddf9d7d0d2c3a6bc1137c14e1dc74dc 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md @@ -247,21 +247,23 @@ ```html
-
+
``` ```css - /* xxx.css */ - .container { - flex-direction: column; - } - .content{ - width: 200px; - height: 200px; - background-color: red; - } + /* xxx.css */ + .container { + flex-direction: column; + width: 100%; + height: 100%; + } + .content { + width: 200px; + height: 200px; + background-color: red; + } ``` ```js @@ -285,7 +287,7 @@ prompt.showToast({ message: 'End Drag' }) - }, + } } ``` @@ -358,8 +360,8 @@ ```html
-
+
``` @@ -371,12 +373,13 @@ justify-content: center; align-items: center; width: 454px; - height: 454px;} - .content{ + height: 454px; + } + .content { width: 400px; height: 400px; background-color: aqua; - margin:30px + margin: 30px; } ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/badge.png b/zh-cn/application-dev/reference/arkui-ts/figures/badge.png index 0041374b52a2be5a93f620dabed0cba74990ee6f..5d581ea7dc579a7fae5c15ba14cefdcabbe84116 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/badge.png and b/zh-cn/application-dev/reference/arkui-ts/figures/badge.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/select.png b/zh-cn/application-dev/reference/arkui-ts/figures/select.png index 2672d45f3ed5685aa6f350c2cade469c065a13af..4464b2ca81dfba5f8f334d4cb76d9213b873eb00 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/select.png and b/zh-cn/application-dev/reference/arkui-ts/figures/select.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422926.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422926.png index f2deeb8445fe0f3b66d2b0facbf9e0f0ed9911ca..eee85cabf8cd66d840f9579e0b60973a50fa550d 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422926.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422926.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md index cdf957e31d7c9494de9168b6c0b3655473f2574a..46f2ac309214572ce06ddc33505ff882353ff43d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md @@ -41,28 +41,61 @@ Divider() @Component struct DividerExample { build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { + Column() { + // 使用横向分割线场景 Text('Horizontal divider').fontSize(9).fontColor(0xCCCCCC) - Row().width('100%').height(40).backgroundColor(0xF1F3F5) - Divider() - Row().width('100%').height(40).backgroundColor(0xF1F3F5) - - // 纵向分割线 + List() { + ForEach([1, 2, 3], (item) => { + 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) - Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { - Text('bravery') - Divider().vertical(true).margin(20).height(15) - Text('effort') - Divider().vertical(true).margin(20).height(15) - Text('upward') - }.width(250) - - // 设置分割线宽度和端点样式 - Text('Custom Styles').fontSize(9).fontColor(0xCCCCCC) - Row().width('100%').height(40).backgroundColor(0xF1F3F5) - Divider().vertical(false).strokeWidth(5).color(0x2788D9).lineCap(LineCapStyle.Round) - Row().width('100%').height(40).backgroundColor(0xF1F3F5) - }.width('100%').height(350).padding({ left: 35, right: 35, top: 35 }) + Column() { + Column() { + Row().width(288).height(64).backgroundColor('#30C9F0').opacity(0.3) + Row() { + Button('Button') + .width(136) + .height(22) + .fontSize(16) + .fontColor('#007DFF') + .fontWeight(500) + .backgroundColor(Color.Transparent) + Divider().vertical(true).height(22).color('#182431').opacity(0.6).margin({ left: 8, right: 8 }) + Button('Button') + .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 }) } } ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md index 055451e0feea7c6140d477b19e42ed09a352c661..825da4ef822e132555972061b29a983a3e8d58f4 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md @@ -51,19 +51,20 @@ Select(options: Array\<[SelectOption](#selectoption对象说明)\>) struct SelectExample { build() { Column() { - Select([{ value: 'aaa', icon: "/common/1.png" }, - { value: 'bbb', icon: "/common/2.png" }, - { value: 'ccc', icon: "/common/3.png" }, - { value: 'ddd', icon: "/common/4.png" }]) + Select([{ value: 'aaa', icon: "/common/public_icon.svg" }, + { value: 'bbb', icon: "/common/public_icon.svg" }, + { value: 'ccc', icon: "/common/public_icon.svg" }, + { value: 'ddd', icon: "/common/public_icon.svg" }]) .selected(2) - .value('TTT') - .font({ size: 30, weight: 400, family: 'serif', style: FontStyle.Normal }) - .selectedOptionFont({ size: 40, weight: 500, family: 'serif', style: FontStyle.Normal }) - .optionFont({ size: 30, weight: 400, family: 'serif', style: FontStyle.Normal }) + .value('TTTTT') + .font({ size: 16, weight: 500 }) + .fontColor('#182431') + .selectedOptionFont({ size: 16, weight: 400 }) + .optionFont({ size: 16, weight: 400 }) .onSelect((index: number) => { - console.info("Select:" + index) + console.info('Select:' + index) }) - } + }.width('100%') } } ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md index f22276a4149d4b76c62151cd5ca19dd0579ca9f3..69403a2fae8ece2966adfbd9e879c9e4cae1bc1b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md @@ -61,90 +61,140 @@ @Entry @Component struct BadgeExample { - @State counts: number = 1 - @State message: string = 'new' - - build() { + @Builder TabBuilder(index: number) { Column() { - Text('numberBadge').width('80%') - 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) - - // 数字上标 + if (index === 2) { Badge({ - count: this.counts, - maxCount: 99, - position: BadgePosition.Left, - style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + value: '', + style: { badgeSize: 6, badgeColor: '#FA2A2D' } }) { - Button('message') - .onClick(() => { - this.counts++ - }) - .width(100).height(50).backgroundColor(0x317aff) - }.width(100).height(50) + Image('/common/public_icon_off.svg') + .width(24) + .height(24) + } + .width(24) + .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) + } - // 数字上标 - Badge({ - count: this.counts, - maxCount: 99, - position: BadgePosition.Right, - 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) - }.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') - .width(80) - .height(50) - .fontSize(16) - .lineHeight(37) - .borderRadius(10) - .textAlign(TextAlign.Center) - .backgroundColor(0xF3F4ED) - }.width(80).height(50) - - // value为空，设置圆点标记 - Badge({ - value: '', - position: BadgePosition.Right, - style: { badgeSize: 6, badgeColor: Color.Red } - }) { - Text('message') - .width(90) - .height(50) - .fontSize(16) - .lineHeight(37) - .borderRadius(10) - .textAlign(TextAlign.Center) - .backgroundColor(0xF3F4ED) - }.width(90).height(50) - }.margin(10) - } + 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({ + value: 'New', + position: BadgePosition.Right, + style: { badgeSize: 16, badgeColor: '#FA2A2D' } + }) { + Text('list2').width(27).height(19).fontSize(14).fontColor('#182431') + }.width(49.5).height(19) + .margin({ left: 12 }) + } + .width('100%') + .height(56) + .backgroundColor('#FFFFFF') + .borderRadius(24) + .align(Alignment.Start) + }.width(336) + + Text('numberBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24) + List() { + ListItem() { + this.itemBuilder('list1') + } + + ListItem() { + Row() { + Image('common/public_icon.svg').width(32).height(32).opacity(0.6) + Badge({ + count: 1, + position: BadgePosition.Right, + style: { badgeSize: 16, badgeColor: '#FA2A2D' } + }) { + Text('list2') + .width(177) + .height(21) + .textAlign(TextAlign.Start) + .fontColor('#182431') + .fontWeight(500) + .fontSize(16) + .opacity(0.9) + }.width(240).height(21).margin({ left: 15, right: 11 }) + + Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6) + }.width('100%').padding({ left: 12, right: 12 }).height(56) + } + + 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%') } } ``` diff --git a/zh-cn/application-dev/ui/figures/component.gif b/zh-cn/application-dev/ui/figures/component.gif index e50a590ed7049a3c52149d10886e5b38ffdae2a5..12ae330c55f90588551d16bb8cbaeca63eadd96e 100644 Binary files a/zh-cn/application-dev/ui/figures/component.gif and b/zh-cn/application-dev/ui/figures/component.gif differ diff --git a/zh-cn/application-dev/ui/ts-component-based-builder.md b/zh-cn/application-dev/ui/ts-component-based-builder.md deleted file mode 100644 index 7f21c9e5e18d080b28bd9ac6d4d0b65c57daa633..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/ts-component-based-builder.md +++ /dev/null @@ -1,182 +0,0 @@ -# @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) - } -} -``` -## @BuilderParam8+ -@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" - }) - } - } - } -} -``` diff --git a/zh-cn/application-dev/ui/ts-framework-file-access-rules.md b/zh-cn/application-dev/ui/ts-framework-file-access-rules.md deleted file mode 100644 index 97f9bd7e718c8e682d788137be2497aaca1c8860..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/ts-framework-file-access-rules.md +++ /dev/null @@ -1,67 +0,0 @@ -# 文件访问规则 -应用代码中文件访问方法主要有下面两种： - -- **相对路径**：使用相对路径引用代码文件，以"../"访问上一级目录，以"./"访问当前目录，也可以省略不写。 - -- **绝对路径**：使用当前模块根路径引用代码文件，比如：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 diff --git a/zh-cn/application-dev/ui/ui-js-components-switch.md b/zh-cn/application-dev/ui/ui-js-components-switch.md index a8554912f7467a7ff1e667833fbd4965a9490027..f9642207ddd97d6f0b40eceb7dcade8a62d96ccd 100644 --- a/zh-cn/application-dev/ui/ui-js-components-switch.md +++ b/zh-cn/application-dev/ui/ui-js-components-switch.md @@ -12,7 +12,7 @@ switch为开关选择器，切换开启或关闭状态。具体用法请参考[s ```html
- +
``` @@ -30,7 +30,7 @@ switch为开关选择器，切换开启或关闭状态。具体用法请参考[s ## 添加属性和方法 - witch组件通过textoff和showtext属性设置文本选中和未选中时的状态。设置checked属性值为true（组件为打开状态）。添加change事件，当组件状态改变时触发，触发后执行switchChange函数获取组件当前状态（关闭/打开）。 + switch组件通过textoff和showtext属性设置文本选中和未选中时的状态。设置checked属性值为true（组件为打开状态）。添加change事件，当组件状态改变时触发，触发后执行switchChange函数获取组件当前状态（关闭/打开）。 ```html diff --git a/zh-cn/application-dev/ui/ui-ts-building-category-list-layout.md b/zh-cn/application-dev/ui/ui-ts-building-category-list-layout.md index 5201e0e720b83083b0ceaeaac73ca95d15ed9290..24516e9220bbf5015abff68f1306507ec5e6ded6 100644 --- a/zh-cn/application-dev/ui/ui-ts-building-category-list-layout.md +++ b/zh-cn/application-dev/ui/ui-ts-building-category-list-layout.md @@ -26,6 +26,12 @@ ``` 3. 引入FoodData类和initializeOnStartup方法。 + +应用代码中文件访问方法主要有下面两种： +- **相对路径**：使用相对路径引用代码文件，以"../"访问上一级目录，以"./"访问当前目录，也可以省略不写。 +- **绝对路径**：使用当前模块根路径引用代码文件，比如：common/utils/utils。 +这里使用相对路径访问： + ``` import { FoodData } from '../model/FoodData' import { initializeOnStartup } from '../model/FoodDataModels'