-
Notifications
You must be signed in to change notification settings - Fork 0
/
Stretch.ets
120 lines (110 loc) · 3.1 KB
/
Stretch.ets
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
@Entry
@Component
struct Stretch {
//自适应布局-拉伸能力
build() {
Column() {
/**
* 示例1
* 当设备的宽度增加或减少时,WIFI和开关始终在设备左右两端,并且中间的黄色块自动进行填充
* */
//实现方案:容器Row + 组件Blank
Row() {
Text('WIFI')
.fontSize(50)
Blank()
.color(Color.Yellow)
Toggle({ type: ToggleType.Switch, isOn: true })
.size({ width: 158, height: 98 })
}
.width('100%')
.height(200)
/**
* 示例2
* T1、T2、T3,默认宽度之和为1000。当设备宽度进行变化,T1、T2始终按照1:3的比例进行缩放,T3宽度始终不变
* */
//实现方案1:容器Flex + 属性flexGrow + 属性flexShrink
Flex() {
Text('Flex-T1')
.fontSize(50)
.textAlign(TextAlign.Center)
.backgroundColor(Color.Red)
.width(400)
.flexGrow(1)
.flexShrink(3)
Text('Flex-T2')
.fontSize(50)
.textAlign(TextAlign.Center)
.backgroundColor(Color.Pink)
.width(400)
.flexGrow(3)
.flexShrink(1)
Text('Flex-T3')
.fontSize(50)
.textAlign(TextAlign.Center)
.backgroundColor(Color.Gray)
.width(200)
.flexGrow(0)
.flexShrink(0)
}
.height(100)
//实现方案2:容器Row + 属性flexGrow + 属性flexShrink
Row() {
Text('Row-T1')
.fontSize(50)
.textAlign(TextAlign.Center)
.backgroundColor(Color.Red)
.width(400)
.flexGrow(1)
.flexShrink(3)
Text('Row-T2')
.fontSize(50)
.textAlign(TextAlign.Center)
.backgroundColor(Color.Pink)
.width(400)
.flexGrow(3)
.flexShrink(1)
Text('Row-T3')
.fontSize(50)
.textAlign(TextAlign.Center)
.backgroundColor(Color.Gray)
.width(200)
.flexGrow(0)
.flexShrink(0)
}
.height(100)
.width('100%')
/**
* 示例3
* T1、T2、T3,默认宽度之和为1000,
* 当设备宽度大于1000,多余的宽度,全部分配给T2,T1和T3的宽度不变
* 当设备的宽度小于1000,T2的宽度不变,T1和T3的宽度按照1:1的比例进行缩小。
* */
//实现方案:容器Flex + 属性flexGrow + 属性flexShrink
Flex() {
Text('T1')
.fontSize(50)
.textAlign(TextAlign.Center)
.backgroundColor(Color.Red)
.width(400)
.flexGrow(0)
.flexShrink(1)
Text('Flex-T2')
.fontSize(50)
.textAlign(TextAlign.Center)
.backgroundColor(Color.Pink)
.width(200)
.flexGrow(1)
.flexShrink(0)
Text('T3')
.fontSize(50)
.textAlign(TextAlign.Center)
.backgroundColor(Color.Gray)
.width(400)
.flexGrow(0)
.flexShrink(1)
}
.height(100)
}
}
}