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