Teach Block about padding.

It's common to want a scrolling viewport but with padding around the
contents. Teaching Block about this makes the places that do this
substantially simpler and further buries ScrollableViewport and
BlockBody (they're now only used in scrollable.dart).
This commit is contained in:
Hixie 2015-11-05 17:05:57 -08:00
parent ef866e00a3
commit 1f5844ea70
6 changed files with 65 additions and 74 deletions

View File

@ -84,19 +84,15 @@ class MealFragmentState extends State<MealFragment> {
Widget buildBody() {
Meal meal = new Meal(when: new DateTime.now());
// TODO(ianh): Fix Block such that we could use that here instead of rolling our own
return new ScrollableViewport(
child: new Container(
padding: const EdgeDims.all(20.0),
child: new BlockBody(<Widget>[
new Text(meal.displayDate),
new Input(
key: descriptionKey,
placeholder: 'Describe meal',
onChanged: _handleDescriptionChanged
),
])
)
return new Block(<Widget>[
new Text(meal.displayDate),
new Input(
key: descriptionKey,
placeholder: 'Describe meal',
onChanged: _handleDescriptionChanged
),
],
padding: const EdgeDims.all(20.0)
);
}

View File

@ -90,29 +90,25 @@ class SettingsFragmentState extends State<SettingsFragment> {
}
Widget buildSettingsPane(BuildContext context) {
// TODO(ianh): Make Block capable of doing this
return new ScrollableViewport(
child: new Container(
padding: const EdgeDims.symmetric(vertical: 20.0),
child: new BlockBody(<Widget>[
new DrawerItem(
onPressed: () { _handleBackupChanged(!(config.userData.backupMode == BackupMode.enabled)); },
child: new Row(<Widget>[
new Flexible(child: new Text('Back up data to the cloud')),
new Switch(value: config.userData.backupMode == BackupMode.enabled, onChanged: _handleBackupChanged),
])
),
new DrawerItem(
onPressed: () => _handleGoalWeightPressed(),
child: new Column(<Widget>[
new Text('Goal Weight'),
new Text(goalWeightText, style: Theme.of(context).text.caption),
],
alignItems: FlexAlignItems.start
)
),
])
)
return new Block(<Widget>[
new DrawerItem(
onPressed: () { _handleBackupChanged(!(config.userData.backupMode == BackupMode.enabled)); },
child: new Row(<Widget>[
new Flexible(child: new Text('Back up data to the cloud')),
new Switch(value: config.userData.backupMode == BackupMode.enabled, onChanged: _handleBackupChanged),
])
),
new DrawerItem(
onPressed: () => _handleGoalWeightPressed(),
child: new Column(<Widget>[
new Text('Goal Weight'),
new Text(goalWeightText, style: Theme.of(context).text.caption),
],
alignItems: FlexAlignItems.start
)
),
],
padding: const EdgeDims.symmetric(vertical: 20.0)
);
}

View File

@ -81,34 +81,31 @@ class StockSettingsState extends State<StockSettings> {
Widget buildSettingsPane(BuildContext context) {
// TODO(ianh): Once we have the gesture API hooked up, fix https://github.com/domokit/mojo/issues/281
// (whereby tapping the widgets below causes both the widget and the menu item to fire their callbacks)
return new ScrollableViewport(
child: new Container(
padding: const EdgeDims.symmetric(vertical: 20.0),
child: new BlockBody(<Widget>[
new DrawerItem(
icon: 'action/thumb_up',
onPressed: () => _confirmOptimismChange(),
child: new Row(<Widget>[
new Flexible(child: new Text('Everything is awesome')),
new Checkbox(
value: config.optimism == StockMode.optimistic,
onChanged: (bool value) => _confirmOptimismChange()
),
])
),
new DrawerItem(
icon: 'action/backup',
onPressed: () { _handleBackupChanged(!(config.backup == BackupMode.enabled)); },
child: new Row(<Widget>[
new Flexible(child: new Text('Back up stock list to the cloud')),
new Switch(
value: config.backup == BackupMode.enabled,
onChanged: _handleBackupChanged
),
])
),
])
)
return new Block(<Widget>[
new DrawerItem(
icon: 'action/thumb_up',
onPressed: () => _confirmOptimismChange(),
child: new Row(<Widget>[
new Flexible(child: new Text('Everything is awesome')),
new Checkbox(
value: config.optimism == StockMode.optimistic,
onChanged: (bool value) => _confirmOptimismChange()
),
])
),
new DrawerItem(
icon: 'action/backup',
onPressed: () { _handleBackupChanged(!(config.backup == BackupMode.enabled)); },
child: new Row(<Widget>[
new Flexible(child: new Text('Back up stock list to the cloud')),
new Switch(
value: config.backup == BackupMode.enabled,
onChanged: _handleBackupChanged
),
])
),
],
padding: const EdgeDims.symmetric(vertical: 20.0)
);
}

View File

@ -107,7 +107,7 @@ class _DropdownMenu extends StatusTransitionComponent {
builder: (BuildContext context) {
RenderBox renderBox = context.findRenderObject();
return new CustomPaint(
child: new ScrollableViewport(child: new Container(child: new Column(children))),
child: new Block(children),
onPaint: (ui.Canvas canvas, Size size) {
double top = renderBox.globalToLocal(new Point(0.0, menuTop.value)).y;
double bottom = renderBox.globalToLocal(new Point(0.0, menuBottom.value)).y;

View File

@ -76,14 +76,11 @@ class _PopupMenu extends StatelessComponent {
),
child: new IntrinsicWidth(
stepWidth: _kMenuWidthStep,
child: new ScrollableViewport(
child: new Container(
// TODO(abarth): Teach Block about padding.
padding: const EdgeDims.symmetric(
horizontal: _kMenuHorizontalPadding,
vertical: _kMenuVerticalPadding
),
child: new BlockBody(children)
child: new Block(
children,
padding: const EdgeDims.symmetric(
horizontal: _kMenuHorizontalPadding,
vertical: _kMenuVerticalPadding
)
)
)

View File

@ -382,6 +382,7 @@ class ScrollableViewportState extends ScrollableState<ScrollableViewport> {
class Block extends StatelessComponent {
Block(this.children, {
Key key,
this.padding,
this.initialScrollOffset,
this.scrollDirection: ScrollDirection.vertical,
this.onScroll
@ -390,6 +391,7 @@ class Block extends StatelessComponent {
}
final List<Widget> children;
final EdgeDims padding;
final double initialScrollOffset;
final ScrollDirection scrollDirection;
final ScrollListener onScroll;
@ -401,11 +403,14 @@ class Block extends StatelessComponent {
}
Widget build(BuildContext context) {
Widget contents = new BlockBody(children, direction: _direction);
if (padding != null)
contents = new Padding(padding: padding, child: contents);
return new ScrollableViewport(
initialScrollOffset: initialScrollOffset,
scrollDirection: scrollDirection,
onScroll: onScroll,
child: new BlockBody(children, direction: _direction)
child: contents
);
}
}