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

!10994 示例代码格式修改

Merge pull request !10994 from luoying_ace/ly1024
...@@ -364,7 +364,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器 ...@@ -364,7 +364,7 @@ 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)
......
...@@ -117,16 +117,17 @@ listener.on('change', onPortrait) ...@@ -117,16 +117,17 @@ 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'
...@@ -134,19 +135,19 @@ onPortrait(mediaQueryResult) { ...@@ -134,19 +135,19 @@ onPortrait(mediaQueryResult) {
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%')
} }
} }
``` ```
......
...@@ -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.
先完成此消息的编辑!
想要评论请 注册