• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1import {
2  memo,
3  __memo_context_type,
4  __memo_id_type,
5  State,
6  MutableState,
7  stateOf,
8  observableProxy
9} from '@ohos.arkui.stateManagement' // should be insert by ui-plugins
10
11import {
12  Text,
13  TextAttribute,
14  Column,
15  ColumnAttribute,
16  Component,
17  Button,
18  ButtonAttribute,
19  ClickEvent,
20  UserView,
21  FlexAlign,
22  Row ,
23  Divider,
24  List,
25  ListItem,
26  TextAlign,
27  DividerAttribute,
28  ListItemAttribute,
29  Padding,
30  Margin,
31  Color,
32  CommonMethod,
33  Flex,
34  FlexAttribute,
35  FlexWrap,
36  FlexDirection,
37  Stack,
38  StackAttribute,
39  Alignment,
40  HorizontalAlign,
41  Entry,
42  ColumnOptions,
43  SizeOptions,
44  NavDestination,
45  NavPathStack,
46  NavDestinationContext,
47  Callback
48} from '@ohos.arkui.component'  // TextAttribute should be insert by ui-plugins
49
50import hilog from '@ohos.hilog'
51
52@Entry
53@Component
54export struct LayoutFunctionTest {
55  build() {
56    NavDestination() {
57      Column({ space: 5 } as ColumnOptions) {
58      // 设置子元素垂直方向间距为5
59      Text('space'). width('90%')
60      Column({ space: '15' } as ColumnOptions) {
61        Column().backgroundColor('#7b68ee').width('100%').height(30)
62        Column().backgroundColor('#ffc0cb').width('100%').height(30)
63      }.width('90%').height(100).border({ width: 1 })
64
65      // 设置子元素水平方向对齐方式
66      Text('alignItems(Start)'). width('90%')
67      Column(undefined) {
68        Column().backgroundColor('#7b68ee').width('50%').height(30)
69        Column().backgroundColor('#ffc0cb').width('50%').height(30)
70      }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })
71
72      Text('alignItems(End)'). width('90%')
73      Column(undefined) {
74        Column().width('50%').height(30).backgroundColor('#7b68ee')
75        Column().width('50%').height(30).backgroundColor('#ffc0cb')
76      }.alignItems(HorizontalAlign.End). width('90%').border({ width: 1 })
77
78      Text('alignItems(Center)'). width('90%')
79      Column(undefined) {
80        Column().width('50%').height(30).backgroundColor('#7b68ee')
81        Column().width('50%').height(30).backgroundColor('#ffc0cb')
82      }.alignItems(HorizontalAlign.Center). width('90%').border({ width: 1 })
83
84      // 设置子元素垂直方向的对齐方式
85      Text('justifyContent(Center)'). width('90%')
86      Column(undefined) {
87        Column().width('90%').height(30).backgroundColor('#7b68ee')
88        Column().width('90%').height(30).backgroundColor('#ffc0cb')
89      }.justifyContent(FlexAlign.Center).height(100).border({ width: 1 })
90
91      Text('justifyContent(End)'). width('90%')
92      Column(undefined) {
93        Column().width('90%').height(30).backgroundColor('#7b68ee')
94        Column().width('90%').height(30).backgroundColor('#ffc0cb')
95      }.height(100).justifyContent(FlexAlign.End).border({ width: 1 })
96
97      Text('justifyContent(End) reverse'). width('90%')
98      Column(undefined) {
99        Column().width('90%').height(30).backgroundColor('#7b68ee')
100        Column().width('90%').height(30).backgroundColor('#ffc0cb')
101      }.height(100).justifyContent(FlexAlign.End).reverse(true).border({ width: 1 })
102    }. width('100%')
103    }
104    .title('布局组件基础功能测试用例')
105  }
106}