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() { Widget buildBody() {
Meal meal = new Meal(when: new DateTime.now()); 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 Block(<Widget>[
return new ScrollableViewport(
child: new Container(
padding: const EdgeDims.all(20.0),
child: new BlockBody(<Widget>[
new Text(meal.displayDate), new Text(meal.displayDate),
new Input( new Input(
key: descriptionKey, key: descriptionKey,
placeholder: 'Describe meal', placeholder: 'Describe meal',
onChanged: _handleDescriptionChanged onChanged: _handleDescriptionChanged
), ),
]) ],
) padding: const EdgeDims.all(20.0)
); );
} }

View File

@ -90,11 +90,7 @@ class SettingsFragmentState extends State<SettingsFragment> {
} }
Widget buildSettingsPane(BuildContext context) { Widget buildSettingsPane(BuildContext context) {
// TODO(ianh): Make Block capable of doing this return new Block(<Widget>[
return new ScrollableViewport(
child: new Container(
padding: const EdgeDims.symmetric(vertical: 20.0),
child: new BlockBody(<Widget>[
new DrawerItem( new DrawerItem(
onPressed: () { _handleBackupChanged(!(config.userData.backupMode == BackupMode.enabled)); }, onPressed: () { _handleBackupChanged(!(config.userData.backupMode == BackupMode.enabled)); },
child: new Row(<Widget>[ child: new Row(<Widget>[
@ -111,8 +107,8 @@ class SettingsFragmentState extends State<SettingsFragment> {
alignItems: FlexAlignItems.start alignItems: FlexAlignItems.start
) )
), ),
]) ],
) padding: const EdgeDims.symmetric(vertical: 20.0)
); );
} }

View File

@ -81,10 +81,7 @@ class StockSettingsState extends State<StockSettings> {
Widget buildSettingsPane(BuildContext context) { Widget buildSettingsPane(BuildContext context) {
// TODO(ianh): Once we have the gesture API hooked up, fix https://github.com/domokit/mojo/issues/281 // 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) // (whereby tapping the widgets below causes both the widget and the menu item to fire their callbacks)
return new ScrollableViewport( return new Block(<Widget>[
child: new Container(
padding: const EdgeDims.symmetric(vertical: 20.0),
child: new BlockBody(<Widget>[
new DrawerItem( new DrawerItem(
icon: 'action/thumb_up', icon: 'action/thumb_up',
onPressed: () => _confirmOptimismChange(), onPressed: () => _confirmOptimismChange(),
@ -107,8 +104,8 @@ class StockSettingsState extends State<StockSettings> {
), ),
]) ])
), ),
]) ],
) padding: const EdgeDims.symmetric(vertical: 20.0)
); );
} }

View File

@ -107,7 +107,7 @@ class _DropdownMenu extends StatusTransitionComponent {
builder: (BuildContext context) { builder: (BuildContext context) {
RenderBox renderBox = context.findRenderObject(); RenderBox renderBox = context.findRenderObject();
return new CustomPaint( return new CustomPaint(
child: new ScrollableViewport(child: new Container(child: new Column(children))), child: new Block(children),
onPaint: (ui.Canvas canvas, Size size) { onPaint: (ui.Canvas canvas, Size size) {
double top = renderBox.globalToLocal(new Point(0.0, menuTop.value)).y; double top = renderBox.globalToLocal(new Point(0.0, menuTop.value)).y;
double bottom = renderBox.globalToLocal(new Point(0.0, menuBottom.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( child: new IntrinsicWidth(
stepWidth: _kMenuWidthStep, stepWidth: _kMenuWidthStep,
child: new ScrollableViewport( child: new Block(
child: new Container( children,
// TODO(abarth): Teach Block about padding.
padding: const EdgeDims.symmetric( padding: const EdgeDims.symmetric(
horizontal: _kMenuHorizontalPadding, horizontal: _kMenuHorizontalPadding,
vertical: _kMenuVerticalPadding vertical: _kMenuVerticalPadding
),
child: new BlockBody(children)
) )
) )
) )

View File

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