OLD | NEW |
| (Empty) |
1 part of widgets; | |
2 | |
3 class Checkbox extends ButtonBase { | |
4 | |
5 bool checked; | |
6 ValueChanged onChanged; | |
7 | |
8 static Style _style = new Style(''' | |
9 transform: translateX(0); | |
10 display: flex; | |
11 justify-content: center; | |
12 align-items: center; | |
13 -webkit-user-select: none; | |
14 cursor: pointer; | |
15 width: 30px; | |
16 height: 30px;''' | |
17 ); | |
18 | |
19 static Style _containerStyle = new Style(''' | |
20 border: solid 2px; | |
21 border-color: rgba(90, 90, 90, 0.25); | |
22 width: 10px; | |
23 height: 10px;''' | |
24 ); | |
25 | |
26 static Style _containerHighlightStyle = new Style(''' | |
27 border: solid 2px; | |
28 border-color: rgba(90, 90, 90, 0.25); | |
29 width: 10px; | |
30 height: 10px; | |
31 border-radius: 10px; | |
32 background-color: orange; | |
33 border-color: orange;''' | |
34 ); | |
35 | |
36 static Style _uncheckedStyle = new Style(''' | |
37 top: 0px; | |
38 left: 0px;''' | |
39 ); | |
40 | |
41 static Style _checkedStyle = new Style(''' | |
42 top: 0px; | |
43 left: 0px; | |
44 transform: translate(2px, -15px) rotate(45deg); | |
45 width: 10px; | |
46 height: 20px; | |
47 border-style: solid; | |
48 border-top: none; | |
49 border-left: none; | |
50 border-right-width: 2px; | |
51 border-bottom-width: 2px; | |
52 border-color: #0f9d58;''' | |
53 ); | |
54 | |
55 Checkbox({ Object key, this.onChanged, this.checked }) : super(key: key); | |
56 | |
57 Node build() { | |
58 return new Container( | |
59 style: _style, | |
60 children: [ | |
61 super.build(), | |
62 new Container( | |
63 style: _highlight ? _containerHighlightStyle : _containerStyle, | |
64 children: [ | |
65 new Container( | |
66 style: checked ? _checkedStyle : _uncheckedStyle | |
67 ) | |
68 ] | |
69 ) | |
70 ] | |
71 )..events.listen('click', _handleClick); | |
72 } | |
73 | |
74 void _handleClick(sky.Event e) { | |
75 onChanged(!checked); | |
76 } | |
77 } | |
OLD | NEW |