• 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  RowAttribute,
24  Divider,
25  List,
26  ListItem,
27  TextAlign,
28  DividerAttribute,
29  ListItemAttribute,
30  Padding,
31  Margin,
32  Color,
33  CommonMethod,
34  Flex,
35  FlexAttribute,
36  FlexWrap,
37  FlexDirection,
38  Stack,
39  StackAttribute,
40  Alignment,
41  HorizontalAlign,
42  Flex,
43  FlexAttribute,
44  FlexDirection,
45  ItemAlign,
46  LengthMetrics,
47  FlexSpaceOptions,
48  VerticalAlign,
49  GridCol,
50  GridRow,
51  GridColAttribute,
52  GridRowAttribute,
53  BorderOptions,
54  TextAlign,
55  ColumnOptions,
56  Entry,
57  NavDestination,
58  NavPathStack,
59  NavDestinationContext,
60  Callback
61} from '@ohos.arkui.component'  // TextAttribute should be insert by ui-plugins
62
63import hilog from '@ohos.hilog'
64
65@Entry
66@Component
67export struct Layout003Test {
68  build() {
69    NavDestination() {
70      Column({ space: 5 } as ColumnOptions) {
71      Text('flexGrow').fontSize(9).fontColor(0xCCCCCC).width('90%')
72      // flexGrow()表示剩余空间分配给该元素的比例
73      Flex(undefined) {
74        Text('flexGrow(2)')
75          .flexGrow(2) // 父容器分配给该Text的宽度为剩余宽度的2/3
76          .height(100)
77          .backgroundColor('#ffb6c1')
78          .textAlign(TextAlign.Center)
79        Text('flexGrow(1)')
80          .flexGrow(1) // 父容器分配给该Text的宽度为剩余宽度的1/3
81          .height(100)
82          .backgroundColor('#dc1434')
83          .textAlign(TextAlign.Center)
84      }.width('90%').height(120).padding(10).backgroundColor('#F0F8FF')
85
86      Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%')
87      // flexShrink()表示该元素的压缩比例，基于超出的总尺寸进行计算
88      // 第一个text压缩比例是0,另外两个都是1,因此放不下时等比例压缩后两个,第一个不压缩
89      Flex({ direction: FlexDirection.Row }) {
90        Text('flexShrink(0)')
91          .flexShrink(0)
92          .width('50%')
93          .height(100)
94          .backgroundColor('#ffb6c1')
95          .textAlign(TextAlign.Center)
96        Text('default flexShrink') // 默认值为1
97          .width('40%')
98          .height(100)
99          .backgroundColor('#dc1434')
100          .textAlign(TextAlign.Center)
101        Text('flexShrink(1)')
102          .flexShrink(1)
103          .width('40%')
104          .height(100)
105          .backgroundColor('#FF00FF')
106          .textAlign(TextAlign.Center)
107      }.width('90%').height(120).padding(10).backgroundColor('#F0F8FF')
108
109      Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%')
110      // 基于主轴的基准尺寸
111      // flexBasis()值可以是字符串'auto',表示基准尺寸是元素本来的大小,也可以是长度设置，相当于.width()/.height()
112      Flex() {
113        Text('flexBasis(100)')
114          .flexBasis(100) // 这里表示宽度为100vp
115          .height(100)
116          .backgroundColor('#ffb6c1')
117          .textAlign(TextAlign.Center)
118        Text(`flexBasis('auto')`)
119          .flexBasis('auto') // 这里表示宽度保持原本设置的60%的宽度
120          .width('60%')
121          .height(100)
122          .backgroundColor('#dc1434')
123          .textAlign(TextAlign.Center)
124      }.width('90%').height(120).padding(10).backgroundColor('#F0F8FF')
125
126      Text('alignSelf').fontSize(9).fontColor(0xCCCCCC).width('90%')
127      // alignSelf会覆盖Flex布局容器中的alignItems设置
128      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
129        Text('alignSelf Auto')
130          .alignSelf(ItemAlign.Auto)
131          .width('15%')
132          .height(70)
133          .backgroundColor('#DB7093')
134          .textAlign(TextAlign.Center)
135        Text('alignSelf Start')
136          .alignSelf(ItemAlign.Start)
137          .width('15%')
138          .height(70)
139          .backgroundColor('#DA70D6')
140          .textAlign(TextAlign.Center)
141        Text('alignSelf Center')
142          .alignSelf(ItemAlign.Center)
143          .width('15%')
144          .height(70)
145          .backgroundColor('#8A2BE2')
146          .textAlign(TextAlign.Center)
147        Text('alignSelf End')
148          .alignSelf(ItemAlign.End)
149          .width('15%')
150          .height(70)
151          .backgroundColor('#0000FF')
152          .textAlign(TextAlign.Center)
153        Text('no alignSelf,height:100%')
154          .width('15%')
155          .height('100%')
156          .backgroundColor('#1E90FF')
157          .textAlign(TextAlign.Center)
158        Text('alignSelf Baseline')
159          .alignSelf(ItemAlign.Baseline)
160          .width('15%')
161          .height('100%')
162          .backgroundColor('#87CEEB')
163          .textAlign(TextAlign.Center)
164        Text('alignSelf Stretch')
165          .alignSelf(ItemAlign.Stretch)
166          .width('15%')
167          .height('100%')
168          .backgroundColor('#7FFFAA')
169          .textAlign(TextAlign.Center)
170      }.width('90%').height(120).padding(10).backgroundColor('#F0F8FF')
171    }.width('100%').margin({ top: 5 } as Margin)
172    }
173    .title('布局基础功能测试用例003')
174  }
175}