• 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  LengthMetrics,
55  LocalizedPadding,
56  LocalizedMargin,
57  $r,
58  PixelRoundPolicy,
59  PixelRoundCalcPolicy,
60  Position,
61  Blank,
62  EdgeStyles,
63  BorderStyle,
64  EdgeWidths,
65  BorderRadiuses,
66  EdgeColors,
67  LocalizedEdgeColors,
68  LocalizedEdgeWidths,
69  LocalizedBorderRadiuses,
70  Direction,
71  Resource,
72  ColumnOptions,
73  Entry,
74  NavDestination,
75  NavPathStack,
76  NavDestinationContext,
77  Callback
78} from '@ohos.arkui.component'  // TextAttribute should be insert by ui-plugins
79
80import hilog from '@ohos.hilog'
81
82@Entry
83@Component
84export struct Layout002Test {
85
86  build() {
87    NavDestination() {
88      Column({ space: 10 } as ColumnOptions) {
89      Text('margin and padding:').fontSize(12).fontColor(0xCCCCCC).width('90%')
90      Row() {
91        // 宽度80 ,高度80 ,上下开始结束的外边距40、20、30、10(蓝色区域），上下开始结束的内边距分别为5、15、10、20（白色区域）
92        Row() {
93          Row().size({ width: '100%', height: '100%' }).backgroundColor('#7b68ee')
94        }
95        .width(80)
96        .height(80)
97        .padding({
98          top: LengthMetrics.vp(5),
99          bottom: LengthMetrics.vp(15),
100          start: LengthMetrics.vp(10),
101          end: LengthMetrics.vp(20)
102        } as LocalizedPadding)
103        .margin({
104          top: LengthMetrics.vp(40),
105          bottom: LengthMetrics.vp(20),
106          start: LengthMetrics.vp(30),
107          end: LengthMetrics.vp(10)
108        } as LocalizedMargin)
109        .backgroundColor('#dc1434')
110        .direction(Direction.Ltr)
111      }.backgroundColor('#ffc0cb')
112    }.width('100%').margin({ top: 5 } as Margin)
113    }
114    .title('布局基础功能测试用例002')
115  }
116}