mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
50c2f8837b
This CL changes how events work in fn. Previously, event listeners were passed in as constructor arguments. Now Nodes hold an |events| object, which contains all the event registrations. When a Component renders, all its |events| are copied onto the Node it produces. When an Element syncs, it walks its |events| and adds them as event listeners on the underlying sky.Element. The net result of this change is increased flexibility in how events are registered. Now components don't need to enumerate all the possible events that they support. Instead, the parent component can listen for whatever events it likes. Also, I've cleaned up the association between DrawerAnimation and Drawer. Now the constructor for Drawer accepts an |animation| object and wires up its internal event handlers itself instead of requiring the constructor to do all the wiring. R=rafaelw@chromium.org Review URL: https://codereview.chromium.org/975863003
78 lines
1.7 KiB
Dart
78 lines
1.7 KiB
Dart
part of widgets;
|
|
|
|
class Checkbox extends ButtonBase {
|
|
|
|
bool checked;
|
|
ValueChanged onChanged;
|
|
|
|
static Style _style = new Style('''
|
|
transform: translateX(0);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
-webkit-user-select: none;
|
|
cursor: pointer;
|
|
width: 30px;
|
|
height: 30px;'''
|
|
);
|
|
|
|
static Style _containerStyle = new Style('''
|
|
border: solid 2px;
|
|
border-color: rgba(90, 90, 90, 0.25);
|
|
width: 10px;
|
|
height: 10px;'''
|
|
);
|
|
|
|
static Style _containerHighlightStyle = new Style('''
|
|
border: solid 2px;
|
|
border-color: rgba(90, 90, 90, 0.25);
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 10px;
|
|
background-color: orange;
|
|
border-color: orange;'''
|
|
);
|
|
|
|
static Style _uncheckedStyle = new Style('''
|
|
top: 0px;
|
|
left: 0px;'''
|
|
);
|
|
|
|
static Style _checkedStyle = new Style('''
|
|
top: 0px;
|
|
left: 0px;
|
|
transform: translate(2px, -15px) rotate(45deg);
|
|
width: 10px;
|
|
height: 20px;
|
|
border-style: solid;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-right-width: 2px;
|
|
border-bottom-width: 2px;
|
|
border-color: #0f9d58;'''
|
|
);
|
|
|
|
Checkbox({ Object key, this.onChanged, this.checked }) : super(key: key);
|
|
|
|
Node render() {
|
|
return new Container(
|
|
style: _style,
|
|
children: [
|
|
super.render(),
|
|
new Container(
|
|
style: _highlight ? _containerHighlightStyle : _containerStyle,
|
|
children: [
|
|
new Container(
|
|
style: checked ? _checkedStyle : _uncheckedStyle
|
|
)
|
|
]
|
|
)
|
|
]
|
|
)..events.listen('click', _handleClick);
|
|
}
|
|
|
|
void _handleClick(sky.Event e) {
|
|
onChanged(!checked);
|
|
}
|
|
}
|