-
Notifications
You must be signed in to change notification settings - Fork 59
/
template.flexml
732 lines (732 loc) · 32.8 KB
/
template.flexml
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
<?xml version="1.0" encoding="utf-8"?>
<Flex
width="360"
paddingTop="20"
paddingBottom="80"
justifyContent="center"
background="${gradient:linear('t2b','#7c4dff','#b388ff')}">
<Flex
alignItems="center"
flexDirection="column"
justifyContent="center"
width="360">
<Flex
paddingTop="10"
paddingBottom="10"
background="white"
borderRadius="10"
marginTop="20"
flexDirection="column"
width="340">
<Flex marginTop="15">
<Image
marginLeft="20"
width="55"
height="55"
src="${res:drawable('ic_launcher')}">
</Image>
<Text
marginLeft="10"
textSize="20"
alignSelf="flexEnd"
text="Flexml">
</Text>
</Flex>
<Text
marginTop="10"
marginLeft="12"
marginRight="12"
text="Flexml是一个新的动态化业务容器,实现了诸如异步布局测量,预加载,模板解析等等。<br>并且支持抗锯齿的任意圆角,最低兼容到API19。<br>是完全使用开放源代码软件编写的全新开源软件。">
</Text>
<Text
marginTop="10"
marginLeft="12"
width="300"
textStyle="bold"
textSize="13.5"
textColor="black"
text="注:下面您将看到的所有内容由Flexml生成。">
</Text>
<Flex
marginTop="2"
marginLeft="12">
<Text
clickUrl="${url}"
marginBottom="2"
textStyle="bold"
borderRadius="5"
padding="5"
textSize="13"
textColor="#FFFFFF"
background="red"
text="不信点这看源码">
</Text>
<Flex flexGrow="1">
</Flex>
</Flex>
<Text
marginLeft="12"
marginRight="12"
text="Flexml会把内容都拍平在一个View上,且该View不在主线程测量。您划出屏幕的每一张图都会被有效回收。">
</Text>
<Flex marginLeft="10" marginRight="10">
<Flex flexDirection="column">
<Text
marginTop="10"
marginBottom="10"
textSize="20"
textStyle="bold"
text="Image标签">
</Text>
<Flex flexDirection="row">
<Image
flexShrink="0"
borderLeftTopRadius="15"
borderRightTopRadius="40"
borderRightBottomRadius="60"
src="${res:drawable('ic_photo2')}"
width="120"
height="120">
</Image>
<Text
alignSelf="center"
textSize="15"
marginLeft="10"
text="Image标签支持使用url属性从网络或者本地加载图片,并且相信您也看到了,它对圆角支持得非常好,也就是无妥协的,同时它也是抗锯齿。">
</Text>
</Flex>
<Flex
marginTop="10"
flexDirection="row">
<Image
blurSampling="4"
blurRadius="25"
borderWidth="5"
borderColor="red"
flexShrink="0"
borderLeftTopRadius="15"
borderRightTopRadius="40"
borderRightBottomRadius="60"
src="${res:drawable('ic_photo2')}"
width="120"
height="120">
</Image>
<Text
alignSelf="center"
textSize="15"
marginLeft="10"
text="当然支持边属于常规操作,顺带一提,所有标签都支持边框。">
</Text>
</Flex>
<Flex
marginTop="10"
flexDirection="column">
<Text
textStyle="bold"
horizontalGravity="center"
alignSelf="center"
marginRight="12"
textSize="16"
marginLeft="10"
marginBottom="10"
text="ImageView的ScaleType也全部得到支持<br>(看这只tomcat↓)">
</Text>
<Flex
flexGrow="1"
justifyContent="center"
alignItems="center"
flexDirection="column">
<Flex flexDirection="row">
<Flex
margin="2"
flexDirection="column">
<Image
borderRadius="10"
background="${gradient:linear('t2b','#7c4dff','#d500f9')}"
scaleType="fitXY"
flexShrink="0"
src="${res:drawable('ic_tomcat')}"
width="100"
height="100"/>
<Text
textStyle="bold"
alignSelf="center"
text="fitXY">
</Text>
</Flex>
<Flex
margin="2"
flexDirection="column">
<Image
borderRadius="10"
background="${gradient:linear('t2b','#7c4dff','#d500f9')}"
scaleType="fitCenter"
flexShrink="0"
src="${res:drawable('ic_tomcat')}"
width="100"
height="100"/>
<Text
textStyle="bold"
alignSelf="center"
text="fitCenter">
</Text>
</Flex>
<Flex
margin="2"
flexDirection="column">
<Image
borderRadius="10"
background="${gradient:linear('t2b','#7c4dff','#d500f9')}"
scaleType="centerCrop"
flexShrink="0"
src="${res:drawable('ic_tomcat')}"
width="100"
height="100"/>
<Text
textStyle="bold"
alignSelf="center"
text="centerCrop">
</Text>
</Flex>
</Flex>
<Flex flexDirection="row">
<Flex
margin="2"
flexDirection="column">
<Image
borderRadius="10"
background="${gradient:linear('t2b','#7c4dff','#d500f9')}"
scaleType="fitStart"
flexShrink="0"
src="${res:drawable('ic_tomcat')}"
width="100"
height="100"/>
<Text
textStyle="bold"
alignSelf="center"
text="fitStart">
</Text>
</Flex>
<Flex
margin="2"
flexDirection="column">
<Image
borderRadius="10"
background="${gradient:linear('t2b','#7c4dff','#d500f9')}"
scaleType="fitEnd"
flexShrink="0"
src="${res:drawable('ic_tomcat')}"
width="100"
height="100"/>
<Text
textStyle="bold"
alignSelf="center"
text="fitEnd">
</Text>
</Flex>
<Flex
margin="2"
flexDirection="column">
<Image
borderRadius="10"
background="${gradient:linear('t2b','#7c4dff','#d500f9')}"
scaleType="centerInside"
flexShrink="0"
src="${res:drawable('ic_tomcat')}"
width="100"
height="100"/>
<Text
textStyle="bold"
alignSelf="center"
text="centerInside">
</Text>
</Flex>
</Flex>
</Flex>
</Flex>
<Text
horizontalGravity="center"
textStyle="bold"
alignSelf="center"
textSize="15"
marginTop="10"
marginRight="10"
marginLeft="10"
text="你会发现其实我们还支持渐变色">
</Text>
</Flex>
</Flex>
<Flex marginRight="10" marginLeft="10">
<Flex flexDirection="column">
<Text
marginTop="10"
marginBottom="10"
textSize="20"
textStyle="bold"
text="Stack标签">
</Text>
<Flex flexDirection="row">
<Stack
flexShrink="0"
width="120"
height="120">
<Flex
borderRadius="5"
background="${gradient:linear('t2b','#7c4dff','#d500f9')}"
height="80"
width="80">
</Flex>
<Flex
borderRadius="5"
marginLeft="15"
marginTop="15"
background="${gradient:linear('t2b','#59a9ff','#d770a0')}"
height="80"
width="80">
</Flex>
<Flex
borderRadius="5"
marginLeft="30"
marginTop="30"
background="${gradient:linear('t2b','#004dff','#ff7871')}"
height="80"
width="80">
</Flex>
</Stack>
<Text
alignSelf="center"
textSize="13"
text="FrameLayout这么好用的布局到这没得用不是很尴尬吗?当然它并不是Flexbox规范内的东西,所以这玩意是我撸FrameLayout的源码照着写的。">
</Text>
</Flex>
</Flex>
</Flex>
<Flex marginRight="10" marginLeft="10">
<Flex flexDirection="column">
<Text
marginTop="10"
marginBottom="10"
textSize="20"
textStyle="bold"
text="Banner标签">
</Text>
<Banner
width="320"
flexGrow="1"
height="150">
<Image
scaleType="centerCrop"
src="${res:drawable('banner_test')}"
borderRadius="10">
</Image>
<Image
scaleType="centerCrop"
src="${res:drawable('banner_test')}"
borderRadius="10">
</Image>
<Image
scaleType="centerCrop"
src="${res:drawable('banner_test')}"
borderRadius="10">
</Image>
</Banner>
<Text
marginTop="5"
text="实际上是使用ViewPager2实现的,所以支持横向和竖向,但里面还是一整块View。支持无限轮播,指定时间间隔等。">
</Text>
</Flex>
</Flex>
<Flex marginLeft="10" marginRight="10">
<Flex flexDirection="column">
<Text
marginTop="10"
marginBottom="10"
textSize="20"
textStyle="bold"
text="Text标签">
</Text>
<Text
text="也就是你现在正在看到的文字啦,不是TextView哦,还在这一个View上面。">
</Text>
<Text
textStyle="bold"
text="<br>这只是一段<font color="red">平平无奇<font/>的文字(支持基于html的<font color="green">的富文本<font/>)">
</Text>
</Flex>
</Flex>
<Flex marginLeft="10" marginRight="10">
<Flex
flexDirection="column">
<Text
marginTop="10"
marginBottom="10"
textSize="20"
textStyle="bold"
text="TextInput标签">
</Text>
<Text
text="Flexml支持以总线的方式向布局外发送数据和事件,所以不用担心处理不了这些文字。">
</Text>
<Flex
marginTop="10"
borderColor="red"
borderWidth="1"
borderRadius="5"
paddingTop="3"
paddingLeft="5"
paddingRight="5"
paddingBottom="3"
flexGrow="1"
background="#f5f5f5"
flexDirection="column">
<TextInput
textSize="18"
flexGrow="1">
</TextInput>
<Flex
height="0.5"
background="black">
</Flex>
</Flex>
</Flex>
</Flex>
<Flex marginLeft="10" marginRight="10">
<Flex flexDirection="column">
<Text
marginTop="10"
marginBottom="10"
textSize="20"
textStyle="bold"
text="Flex标签">
</Text>
<Text
text="当然,最常用的就是Flex标签了。Flex支持Flexbox中的所有属性。下面举几个例子。">
</Text>
<Flex
background="black"
borderRadius="10"
height="150"
alignItems="center"
flexGrow="1"
flexDirection="column">
<Flex
borderRadius="10"
flexGrow="1"
width="150"
background="${gradient:linear('t2b','#7c4dff','#b388ff')}">
</Flex>
</Flex>
<Text
horizontalGravity="center"
text="alignItems center">
</Text>
<Flex
background="black"
borderRadius="10"
height="150"
alignItems="flexStart"
flexGrow="1"
flexDirection="column">
<Flex
borderRadius="10"
flexGrow="1"
width="150"
background="${gradient:linear('t2b','#7c4dff','#b388ff')}">
</Flex>
</Flex>
<Text
horizontalGravity="center"
text="alignItems flexStart">
</Text>
<Flex
background="black"
borderRadius="10"
height="150"
alignItems="flexEnd"
flexGrow="1"
flexDirection="column">
<Flex
borderRadius="10"
flexGrow="1"
width="150"
background="${gradient:linear('t2b','#7c4dff','#b388ff')}">
</Flex>
</Flex>
<Text
horizontalGravity="center"
text="alignItems flexEnd">
</Text>
</Flex>
</Flex>
<Flex marginLeft="10" marginRight="10">
<Flex flexDirection="column">
<Text
marginTop="10"
marginBottom="0"
textSize="20"
textStyle="bold"
text="Scroller标签">
</Text>
<Text
marginBottom="5"
text="支持横向和竖向。由于无法彻底解决滑动冲突的问题,所以不支持嵌套滑动,同时也不建议嵌套使用。">
</Text>
<Scroller height="150">
<Image
borderRadius="10"
src="${res:drawable('ic_photo2')}"
width="400">
</Image>
</Scroller>
</Flex>
</Flex>
<Flex marginRight="10" marginLeft="10">
<Flex flexDirection="column">
<Text
marginTop="10"
marginBottom="0"
textSize="20"
textStyle="bold"
text="逻辑标签">
</Text>
<Text text="上面的标签其实都算是组件标签,Flexml还支持一些逻辑标签,比如for,if,when等。">
</Text>
<Text
marginTop="10"
marginBottom="0"
textSize="20"
textStyle="bold"
text="for标签">
</Text>
<Text text="需要从数据构建列表时for标签非常有用。">
</Text>
<Flex
marginTop="10"
borderRadius="10"
padding="10"
flexDirection="column"
background="gray">
<for var="index" from="0" to="5">
<Text
textColor="white"
text="${'文本'+index}">
</Text>
</for>
</Flex>
<Text
marginTop="10"
marginBottom="0"
textSize="20"
textStyle="bold"
text="使用三元表达式">
</Text>
<Flex
marginTop="10"
marginBottom="10"
flexDirection="row">
<Text
textColor="red"
textStyle="bold"
horizontalGravity="center"
verticalGravity="center"
textSize="14"
marginRight="2.5"
text="试试点赞→">
</Text>
<Flex
alignItems="center"
justifyContent="center"
width="25"
height="25"
onClick="${()->{pageContext.refresh().with(()->{clicked=!clicked}).commit()}}">
<Image
width="18"
height="18"
src="${!clicked?res:drawable('ic_zan_w'):res:drawable('ic_zan_black')}">
</Image>
</Flex>
</Flex>
<Text text="点赞触发的同时还能结合布局的事件响应函数发送诸如http请求之类的动作。其他逻辑标签就不再逐介绍了,后期会把文档补上。">
</Text>
<Text
marginTop="10"
marginBottom="0"
textSize="20"
textStyle="bold"
text="Flexml的优势">
</Text>
<Flex
justifyContent="center"
flexDirection="row"
paddingTop="10">
<Image
padding="5"
marginRight="10"
flexShrink="0"
height="60"
width="60"
src="${res:drawable('litho')}">
</Image>
<Text
text="1. 基于facebook的litho。耗时操作异步化,将原本View体系中的measure、layout搬到异步线程中去,解放主线程。"/>
</Flex>
<Flex
justifyContent="center"
flexDirection="row"
marginTop="10">
<Stack
marginRight="10"
flexShrink="0"
width="60"
height="60">
<Flex
borderRadius="2"
background="${gradient:linear('t2b','#7c4dff','#d500f9')}"
height="40"
width="40">
</Flex>
<Flex
borderRadius="2"
marginLeft="10"
marginTop="10"
background="${gradient:linear('t2b','#59a9ff','#d770a0')}"
height="40"
width="40">
</Flex>
<Flex
borderRadius="2"
marginLeft="20"
marginTop="20"
background="${gradient:linear('t2b','#004dff','#ff7871')}"
height="40"
width="40">
</Flex>
</Stack>
<Text
text="2. 干掉布局层级。直接使用轻量级的Drawable进行渲染,与WebView相比有更大的性能优势。并且基于广泛使用的flexbox布局模型,易于上手。"/>
</Flex>
<Flex
justifyContent="center"
flexDirection="row"
marginTop="10">
<Image
scaleType="centerCrop"
marginRight="10"
flexShrink="0"
height="60"
width="60"
src="${res:drawable('gpu')}">
</Image>
<Text
text="3. 全硬件加速渲染,最低限度的过度绘制,异步图片,以及完美无妥协的圆角支持。"/>
</Flex>
<Flex
justifyContent="center"
marginTop="10">
<Image
scaleType="fitXY"
flexShrink="0"
src="${res:drawable('glide')}"
width="90"
height="60">
</Image>
<Text
text="4. 基于Glide的资源回收,画出屏幕的内容会被自动回收。多图顶多内存高点,但是也不会OOM。"/>
</Flex>
<Flex
justifyContent="center"
marginTop="10">
<Image
marginRight="10"
padding="10"
width="60"
height="60"
src="${res:drawable('json')}"
flexShrink="0"
scaleType="fitXY"/>
<Text
text="5. 敏捷开发,随时上线,前后端分离。后端下发布局+数据的json,可集成在数据接口下发,本地自主解析渲染布局。"/>
</Flex>
<Flex
justifyContent="center"
flexDirection="row"
marginTop="10">
<Image
marginRight="10"
width="60"
height="60"
flexShrink="0"
padding="10"
scaleType="fitXY"
src="${res:drawable('succeed')}" />
<Text
text="6. 内置的数据解析引擎非常强大,支持Java Bean、JSONObject、Map、List、数组等等,只要你不传奇怪的数据进来基本都能解析而无需依赖其他lib。"/>
</Flex>
<Flex
marginTop="10"
flexDirection="row"
justifyContent="center">
<Image
flexShrink="0"
marginRight="10"
src="${res:drawable('idea')}"
height="60"
width="60"
padding="5"
scaleType="centerInside">
</Image>
<Text
text="7. intellij插件支援,AS安装后就可以通过扫码的方式在真机上追踪IDE中正在编辑的布局来进行实时真机预览调试。"/>
</Flex>
<Flex
marginTop="10"
justifyContent="center"
flexDirection="row">
<Image
padding="5"
marginRight="10"
src="${res:drawable('view')}"
height="60"
width="60"
scaleType="fitXY"
flexShrink="0">
</Image>
<Text
text="8. 单容器View接入,基本无入侵性。可用于替换现有的任意一个静态展示型的View,并支持曝光埋点、点击埋点、点击时间处理等事件。"/>
</Flex>
<Flex
flexDirection="row"
justifyContent="center"
marginTop="10">
<Image
padding="5"
scaleType="centerInside"
marginRight="10"
flexShrink="0"
height="60"
width="60"
src="${res:drawable('phone')}">
</Image>
<Text
text="9. 屏幕适配。布局使用的单位为是设备独立的pt,以设备屏幕宽度为基准,将屏幕分成360份,1pt=设备屏幕宽度/360。当然也留了sp和dp的转换函数。"/>
</Flex>
<Flex
justifyContent="center"
flexDirection="row"
marginTop="10">
<Image
marginRight="10"
flexShrink="0"
height="60"
width="60"
padding="10"
src="${res:drawable('kt')}">
</Image>
<Text
text="10. 使用kotlin实现,拥抱未来,代码实现非常简洁,运用了大量设计模式,很适合阅读学习。"/>
</Flex>
</Flex>
</Flex>
</Flex>
</Flex>
</Flex>