Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 5f9135ba 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!10994 示例代码格式修改 

Merge pull request !10994 from luoying_ace/ly1024
上级 ab0844ff 4479603c
隐藏空白更改
内联 并排
Showing with 115 addition and 114 deletion
zh-cn/application-dev/ui/ui-ts-layout-flex.md
浏览文件 @ 5f9135ba
...@@ -27,9 +27,9 @@ ...@@ -27,9 +27,9 @@
```ts ```ts
Flex({ direction: FlexDirection.Row }) { Flex({ direction: FlexDirection.Row }) {
Text('1').width('33%').height(50).backgroundColor(0xF5DEB3) Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(50).backgroundColor(0xD2B48C) Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
} }
.height(70) .height(70)
.width('90%') .width('90%')
...@@ -42,9 +42,9 @@ ...@@ -42,9 +42,9 @@
```ts ```ts
Flex({ direction: FlexDirection.RowReverse }) { Flex({ direction: FlexDirection.RowReverse }) {
Text('1').width('33%').height(50).backgroundColor(0xF5DEB3) Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(50).backgroundColor(0xD2B48C) Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
} }
.height(70) .height(70)
.width('90%') .width('90%')
...@@ -58,9 +58,9 @@ ...@@ -58,9 +58,9 @@
```ts ```ts
Flex({ direction: FlexDirection.Column }) { Flex({ direction: FlexDirection.Column }) {
Text('1').width('100%').height(50).backgroundColor(0xF5DEB3) Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('100%').height(50).backgroundColor(0xD2B48C) Text('2').width('100%').height(50).backgroundColor(0xD2B48C)
Text('3').width('100%').height(50).backgroundColor(0xF5DEB3) Text('3').width('100%').height(50).backgroundColor(0xF5DEB3)
} }
.height(70) .height(70)
.width('90%') .width('90%')
...@@ -74,9 +74,9 @@ ...@@ -74,9 +74,9 @@
```ts ```ts
Flex({ direction: FlexDirection.ColumnReverse }) { Flex({ direction: FlexDirection.ColumnReverse }) {
Text('1').width('100%').height(50).backgroundColor(0xF5DEB3) Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('100%').height(50).backgroundColor(0xD2B48C) Text('2').width('100%').height(50).backgroundColor(0xD2B48C)
Text('3').width('100%').height(50).backgroundColor(0xF5DEB3) Text('3').width('100%').height(50).backgroundColor(0xF5DEB3)
} }
.height(70) .height(70)
.width('90%') .width('90%')
...@@ -94,9 +94,9 @@ ...@@ -94,9 +94,9 @@
```ts ```ts
Flex({ wrap: FlexWrap.NoWrap }) { Flex({ wrap: FlexWrap.NoWrap }) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C) Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
Text('3').width('50%').height(50).backgroundColor(0xF5DEB3) Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
} }
.width('90%') .width('90%')
.padding(10) .padding(10)
...@@ -109,9 +109,9 @@ ...@@ -109,9 +109,9 @@
```ts ```ts
Flex({ wrap: FlexWrap.Wrap }) { Flex({ wrap: FlexWrap.Wrap }) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C) Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
Text('3').width('50%').height(50).backgroundColor(0xD2B48C) Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
} }
.width('90%') .width('90%')
.padding(10) .padding(10)
...@@ -124,9 +124,9 @@ ...@@ -124,9 +124,9 @@
```ts ```ts
Flex({ wrap: FlexWrap.WrapReverse}) { Flex({ wrap: FlexWrap.WrapReverse}) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C) Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
Text('3').width('50%').height(50).backgroundColor(0xF5DEB3) Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
} }
.width('90%') .width('90%')
.padding(10) .padding(10)
...@@ -147,9 +147,9 @@ ...@@ -147,9 +147,9 @@
```ts ```ts
Flex({ justifyContent: FlexAlign.Start }) { Flex({ justifyContent: FlexAlign.Start }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
} }
.width('90%') .width('90%')
.padding({ top: 10, bottom: 10 }) .padding({ top: 10, bottom: 10 })
...@@ -162,9 +162,9 @@ ...@@ -162,9 +162,9 @@
```ts ```ts
Flex({ justifyContent: FlexAlign.Center }) { Flex({ justifyContent: FlexAlign.Center }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
} }
.width('90%') .width('90%')
.padding({ top: 10, bottom: 10 }) .padding({ top: 10, bottom: 10 })
...@@ -177,9 +177,9 @@ ...@@ -177,9 +177,9 @@
```ts ```ts
Flex({ justifyContent: FlexAlign.End }) { Flex({ justifyContent: FlexAlign.End }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
} }
.width('90%') .width('90%')
.padding({ top: 10, bottom: 10 }) .padding({ top: 10, bottom: 10 })
...@@ -192,9 +192,9 @@ ...@@ -192,9 +192,9 @@
```ts ```ts
Flex({ justifyContent: FlexAlign.SpaceBetween }) { Flex({ justifyContent: FlexAlign.SpaceBetween }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
} }
.width('90%') .width('90%')
.padding({ top: 10, bottom: 10 }) .padding({ top: 10, bottom: 10 })
...@@ -207,9 +207,9 @@ ...@@ -207,9 +207,9 @@
```ts ```ts
Flex({ justifyContent: FlexAlign.SpaceAround }) { Flex({ justifyContent: FlexAlign.SpaceAround }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
} }
.width('90%') .width('90%')
.padding({ top: 10, bottom: 10 }) .padding({ top: 10, bottom: 10 })
...@@ -222,9 +222,9 @@ ...@@ -222,9 +222,9 @@
```ts ```ts
Flex({ justifyContent: FlexAlign.SpaceEvenly }) { Flex({ justifyContent: FlexAlign.SpaceEvenly }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
} }
.width('90%') .width('90%')
.padding({ top: 10, bottom: 10 }) .padding({ top: 10, bottom: 10 })
...@@ -244,9 +244,9 @@ ...@@ -244,9 +244,9 @@
```ts ```ts
Flex({ alignItems: ItemAlign.Auto }) { Flex({ alignItems: ItemAlign.Auto }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
} }
.size({width: '90%', height: 80}) .size({width: '90%', height: 80})
.padding(10) .padding(10)
...@@ -259,9 +259,9 @@ ...@@ -259,9 +259,9 @@
```ts ```ts
Flex({ alignItems: ItemAlign.Start }) { Flex({ alignItems: ItemAlign.Start }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
} }
.size({width: '90%', height: 80}) .size({width: '90%', height: 80})
.padding(10) .padding(10)
...@@ -274,9 +274,9 @@ ...@@ -274,9 +274,9 @@
```ts ```ts
Flex({ alignItems: ItemAlign.Center }) { Flex({ alignItems: ItemAlign.Center }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
} }
.size({width: '90%', height: 80}) .size({width: '90%', height: 80})
.padding(10) .padding(10)
...@@ -289,9 +289,9 @@ ...@@ -289,9 +289,9 @@
```ts ```ts
Flex({ alignItems: ItemAlign.End }) { Flex({ alignItems: ItemAlign.End }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
} }
.size({width: '90%', height: 80}) .size({width: '90%', height: 80})
.padding(10) .padding(10)
...@@ -304,9 +304,9 @@ ...@@ -304,9 +304,9 @@
```ts ```ts
Flex({ alignItems: ItemAlign.Stretch }) { Flex({ alignItems: ItemAlign.Stretch }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
} }
.size({width: '90%', height: 80}) .size({width: '90%', height: 80})
.padding(10) .padding(10)
...@@ -319,9 +319,9 @@ ...@@ -319,9 +319,9 @@
```ts ```ts
Flex({ alignItems: ItemAlign.Baseline }) { Flex({ alignItems: ItemAlign.Baseline }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
} }
.size({width: '90%', height: 80}) .size({width: '90%', height: 80})
.padding(10) .padding(10)
...@@ -364,13 +364,13 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器 ...@@ -364,13 +364,13 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
- FlexAlign.Start: 子组件各行与交叉轴起点对齐。 - FlexAlign.Start: 子组件各行与交叉轴起点对齐。
``` ```ts
Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start }) { Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start }) {
Text('1').width('30%').height(20).backgroundColor(0xF5DEB3) Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('60%').height(20).backgroundColor(0xD2B48C) Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
Text('3').width('40%').height(20).backgroundColor(0xD2B48C) Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
Text('4').width('30%').height(20).backgroundColor(0xF5DEB3) Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
Text('5').width('20%').height(20).backgroundColor(0xD2B48C) Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
} }
.width('90%') .width('90%')
.height(100) .height(100)
...@@ -383,11 +383,11 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器 ...@@ -383,11 +383,11 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
```ts ```ts
Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Center }) { Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Center }) {
Text('1').width('30%').height(20).backgroundColor(0xF5DEB3) Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('60%').height(20).backgroundColor(0xD2B48C) Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
Text('3').width('40%').height(20).backgroundColor(0xD2B48C) Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
Text('4').width('30%').height(20).backgroundColor(0xF5DEB3) Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
Text('5').width('20%').height(20).backgroundColor(0xD2B48C) Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
} }
.width('90%') .width('90%')
.height(100) .height(100)
...@@ -400,11 +400,11 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器 ...@@ -400,11 +400,11 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
```ts ```ts
Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.End }) { Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.End }) {
Text('1').width('30%').height(20).backgroundColor(0xF5DEB3) Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('60%').height(20).backgroundColor(0xD2B48C) Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
Text('3').width('40%').height(20).backgroundColor(0xD2B48C) Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
Text('4').width('30%').height(20).backgroundColor(0xF5DEB3) Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
Text('5').width('20%').height(20).backgroundColor(0xD2B48C) Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
} }
.width('90%') .width('90%')
.height(100) .height(100)
...@@ -417,11 +417,11 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器 ...@@ -417,11 +417,11 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
```ts ```ts
Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceBetween }) { Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceBetween }) {
Text('1').width('30%').height(20).backgroundColor(0xF5DEB3) Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('60%').height(20).backgroundColor(0xD2B48C) Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
Text('3').width('40%').height(20).backgroundColor(0xD2B48C) Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
Text('4').width('30%').height(20).backgroundColor(0xF5DEB3) Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
Text('5').width('20%').height(20).backgroundColor(0xD2B48C) Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
} }
.width('90%') .width('90%')
.height(100) .height(100)
...@@ -434,11 +434,11 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器 ...@@ -434,11 +434,11 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
```ts ```ts
Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) { Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) {
Text('1').width('30%').height(20).backgroundColor(0xF5DEB3) Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('60%').height(20).backgroundColor(0xD2B48C) Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
Text('3').width('40%').height(20).backgroundColor(0xD2B48C) Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
Text('4').width('30%').height(20).backgroundColor(0xF5DEB3) Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
Text('5').width('20%').height(20).backgroundColor(0xD2B48C) Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
} }
.width('90%') .width('90%')
.height(100) .height(100)
...@@ -451,11 +451,11 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器 ...@@ -451,11 +451,11 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
```ts ```ts
Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) { Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) {
Text('1').width('30%').height(20).backgroundColor(0xF5DEB3) Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('60%').height(20).backgroundColor(0xD2B48C) Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
Text('3').width('40%').height(20).backgroundColor(0xD2B48C) Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
Text('4').width('30%').height(20).backgroundColor(0xF5DEB3) Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
Text('5').width('20%').height(20).backgroundColor(0xD2B48C) Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
} }
.width('90%') .width('90%')
.height(100) .height(100)
......
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
浏览文件 @ 5f9135ba
...@@ -117,36 +117,37 @@ listener.on('change', onPortrait) ...@@ -117,36 +117,37 @@ listener.on('change', onPortrait)
```ts ```ts
import mediaquery from '@ohos.mediaquery' import mediaquery from '@ohos.mediaquery'
let portraitFunc = null let portraitFunc = null
@Entry @Entry
@Component @Component
struct MediaQueryExample { struct MediaQueryExample {
@State color: string = '#DB7093' @State color: string = '#DB7093'
@State text: string = 'Portrait' @State text: string = 'Portrait'
listener = mediaquery.matchMediaSync('(orientation: landscape)') // 当设备横屏时条件成立 listener = mediaquery.matchMediaSync('(orientation: landscape)') // 当设备横屏时条件成立
onPortrait(mediaQueryResult) { onPortrait(mediaQueryResult) {
if (mediaQueryResult.matches) { if (mediaQueryResult.matches) {
this.color = '#FFD700' this.color = '#FFD700'
this.text = 'Landscape' this.text = 'Landscape'
} else { } else {
this.color = '#DB7093' this.color = '#DB7093'
this.text = 'Portrait' this.text = 'Portrait'
}
} }
}
aboutToAppear() { aboutToAppear() {
portraitFunc = this.onPortrait.bind(this) // 绑定当前应用实例 portraitFunc = this.onPortrait.bind(this) // 绑定当前应用实例
this.listener.on('change', portraitFunc) this.listener.on('change', portraitFunc)
} }
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text(this.text).fontSize(50).fontColor(this.color) Text(this.text).fontSize(50).fontColor(this.color)
}
.width('100%').height('100%')
} }
.width('100%').height('100%')
}
} }
``` ```
......
zh-cn/application-dev/ui/ui-ts-layout-stack.md
浏览文件 @ 5f9135ba
...@@ -28,13 +28,13 @@ Stack容器中兄弟组件显示层级关系可以通过[zIndex](../reference/ar ...@@ -28,13 +28,13 @@ Stack容器中兄弟组件显示层级关系可以通过[zIndex](../reference/ar
```ts ```ts
Stack({ alignContent: Alignment.BottomStart }) { Stack({ alignContent: Alignment.BottomStart }) {
Column(){ Column() {
Text('Stack子元素1').textAlign(TextAlign.End).fontSize(20) Text('Stack子元素1').textAlign(TextAlign.End).fontSize(20)
}.width(100).height(100).backgroundColor(0xffd306) }.width(100).height(100).backgroundColor(0xffd306)
Column(){ Column() {
Text('Stack子元素2').fontSize(20) Text('Stack子元素2').fontSize(20)
}.width(150).height(150).backgroundColor(Color.Pink) }.width(150).height(150).backgroundColor(Color.Pink)
Column(){ Column() {
Text('Stack子元素3').fontSize(20) Text('Stack子元素3').fontSize(20)
}.width(200).height(200).backgroundColor(Color.Grey) }.width(200).height(200).backgroundColor(Color.Grey)
}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0) }.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)
...@@ -46,13 +46,13 @@ Stack容器中兄弟组件显示层级关系可以通过[zIndex](../reference/ar ...@@ -46,13 +46,13 @@ Stack容器中兄弟组件显示层级关系可以通过[zIndex](../reference/ar
```ts ```ts
Stack({ alignContent: Alignment.BottomStart }) { Stack({ alignContent: Alignment.BottomStart }) {
Column(){ Column() {
Text('Stack子元素1').textAlign(TextAlign.End).fontSize(20) Text('Stack子元素1').textAlign(TextAlign.End).fontSize(20)
}.width(100).height(100).backgroundColor(0xffd306).zIndex(2) }.width(100).height(100).backgroundColor(0xffd306).zIndex(2)
Column(){ Column() {
Text('Stack子元素2').fontSize(20) Text('Stack子元素2').fontSize(20)
}.width(150).height(150).backgroundColor(Color.Pink).zIndex(1) }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)
Column(){ Column() {
Text('Stack子元素3').fontSize(20) Text('Stack子元素3').fontSize(20)
}.width(200).height(200).backgroundColor(Color.Grey) }.width(200).height(200).backgroundColor(Color.Grey)
}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0) }.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或