From 51566aeffa12e7797d8143712e24979285f2c62a Mon Sep 17 00:00:00 2001 From: Ian Hickson Date: Thu, 14 Jan 2016 23:17:45 -0800 Subject: [PATCH] More elaborate RenderBox example Also, some trivial fixes for things that I found while playing with the rendering library directly. --- examples/rendering/shadowed_box.dart | 106 ++++++++++++++---- .../lib/src/painting/text_painter.dart | 17 +-- .../flutter/lib/src/rendering/binding.dart | 2 +- .../flutter/lib/src/rendering/proxy_box.dart | 1 + 4 files changed, 97 insertions(+), 29 deletions(-) diff --git a/examples/rendering/shadowed_box.dart b/examples/rendering/shadowed_box.dart index ed8f102e55a..9c0e5c0551c 100644 --- a/examples/rendering/shadowed_box.dart +++ b/examples/rendering/shadowed_box.dart @@ -2,29 +2,95 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -import 'dart:ui'; - import 'package:flutter/rendering.dart'; -import 'package:flutter/material.dart'; + +const List shadow = const [ + const BoxShadow(offset: const Offset(0.0, 3.0), blurRadius: 1.0, spreadRadius: -2.0, color: const Color(0x33000000)), + const BoxShadow(offset: const Offset(0.0, 2.0), blurRadius: 2.0, spreadRadius: 0.0, color: const Color(0x24000000)), + const BoxShadow(offset: const Offset(0.0, 1.0), blurRadius: 5.0, spreadRadius: 0.0, color: const Color(0x1F000000)), +]; void main() { - RenderBox coloredBox = new RenderDecoratedBox( - decoration: new BoxDecoration( - gradient: new RadialGradient( - center: Point.origin, radius: 500.0, - colors: [Colors.yellow[500], Colors.blue[500]] - ), - boxShadow: elevationToShadow[8] + RenderDecoratedBox box1, box2, box3; + new RenderingFlutterBinding(root: new RenderPadding( + padding: const EdgeDims.all(40.0), + child: new RenderViewport( + child: new RenderDecoratedBox( + decoration: const BoxDecoration( + backgroundColor: const Color(0xFFFFFFFF) + ), + child: new RenderBlock( + children: [ + new RenderPadding( + padding: const EdgeDims.all(40.0), + child: new RenderPointerListener( + behavior: HitTestBehavior.opaque, + onPointerDown: (PointerDownEvent event) { + box1.decoration = const BoxDecoration( + gradient: const RadialGradient( + center: Point.origin, radius: 500.0, + colors: const [const Color(0x20F0D0B0), const Color(0xD0C0FFFF)] + ), + borderRadius: 20.0 + ); + RenderPadding innerBox1 = box1.child; + innerBox1.padding *= 1.5; + innerBox1.child = new RenderParagraph( + const StyledTextSpan( + const TextStyle( + color: const Color(0xFF000000), + fontSize: 20.0, + fontWeight: FontWeight.w900, + textAlign: TextAlign.center + ), + const [ const PlainTextSpan('Hello World!') ] + ) + ); + RenderBlock block = box3.parent.parent; + block.remove(box3.parent); + RenderPadding innerBox2 = box2.child; + innerBox2.child = box3.parent; + RenderPointerListener listener = box1.parent; + listener.onPointerDown = null; + }, + child: box1 = new RenderDecoratedBox( + decoration: const BoxDecoration( + backgroundColor: const Color(0xFFFFFF00), + boxShadow: shadow + ), + child: new RenderPadding( + padding: const EdgeDims.all(40.0) + ) + ) + ) + ), + new RenderPadding( + padding: const EdgeDims.all(40.0), + child: box2 = new RenderDecoratedBox( + decoration: const BoxDecoration( + backgroundColor: const Color(0xFF00FFFF), + boxShadow: shadow + ), + child: new RenderPadding( + padding: const EdgeDims.all(40.0) + ) + ) + ), + new RenderPadding( + padding: const EdgeDims.all(40.0), + child: box3 = new RenderDecoratedBox( + decoration: const BoxDecoration( + backgroundColor: const Color(0xFF33FF33), + boxShadow: shadow + ), + child: new RenderPadding( + padding: const EdgeDims.all(40.0) + ) + ) + ), + ] + ) + ) ) - ); - RenderBox paddedBox = new RenderPadding( - padding: const EdgeDims.all(50.0), - child: coloredBox - ); - new RenderingFlutterBinding(root: new RenderDecoratedBox( - decoration: const BoxDecoration( - backgroundColor: const Color(0xFFFFFFFF) - ), - child: paddedBox )); } diff --git a/packages/flutter/lib/src/painting/text_painter.dart b/packages/flutter/lib/src/painting/text_painter.dart index aae8201fc94..44ea0ce98c1 100644 --- a/packages/flutter/lib/src/painting/text_painter.dart +++ b/packages/flutter/lib/src/painting/text_painter.dart @@ -10,6 +10,7 @@ import 'text_style.dart'; /// An immutable span of text. abstract class TextSpan { // This class must be immutable, because we won't notice when it changes. + const TextSpan(); String toString([String prefix = '']); void build(ui.ParagraphBuilder builder); ui.ParagraphStyle get paragraphStyle => null; @@ -17,14 +18,13 @@ abstract class TextSpan { /// An immutable span of unstyled text. class PlainTextSpan extends TextSpan { - PlainTextSpan(this.text) { - assert(text != null); - } + const PlainTextSpan(this.text); /// The text contained in the span. final String text; void build(ui.ParagraphBuilder builder) { + assert(text != null); builder.addText(text); } @@ -42,10 +42,7 @@ class PlainTextSpan extends TextSpan { /// An immutable text span that applies a style to a list of children. class StyledTextSpan extends TextSpan { - StyledTextSpan(this.style, this.children) { - assert(style != null); - assert(children != null); - } + const StyledTextSpan(this.style, this.children); /// The style to apply to the children. final TextStyle style; @@ -54,9 +51,13 @@ class StyledTextSpan extends TextSpan { final List children; void build(ui.ParagraphBuilder builder) { + assert(style != null); + assert(children != null); builder.pushStyle(style.textStyle); - for (TextSpan child in children) + for (TextSpan child in children) { + assert(child != null); child.build(builder); + } builder.pop(); } diff --git a/packages/flutter/lib/src/rendering/binding.dart b/packages/flutter/lib/src/rendering/binding.dart index 1edbd7df405..d38c6e470cf 100644 --- a/packages/flutter/lib/src/rendering/binding.dart +++ b/packages/flutter/lib/src/rendering/binding.dart @@ -93,7 +93,7 @@ void debugDumpLayerTree() { /// A concrete binding for applications that use the Rendering framework /// directly. This is the glue that binds the framework to the Flutter engine. -class RenderingFlutterBinding extends BindingBase with Scheduler, Renderer, Gesturer { +class RenderingFlutterBinding extends BindingBase with Scheduler, Gesturer, Renderer { RenderingFlutterBinding({ RenderBox root }) { assert(renderView != null); renderView.child = root; diff --git a/packages/flutter/lib/src/rendering/proxy_box.dart b/packages/flutter/lib/src/rendering/proxy_box.dart index ac1e8b9bf37..313e2627fca 100644 --- a/packages/flutter/lib/src/rendering/proxy_box.dart +++ b/packages/flutter/lib/src/rendering/proxy_box.dart @@ -1304,6 +1304,7 @@ class RenderPointerListener extends RenderProxyBox { /// not, we can re-record its display list without re-recording the display list /// for the surround tree. class RenderRepaintBoundary extends RenderProxyBox { + RenderRepaintBoundary({ RenderBox child }) : super(child); bool get isRepaintBoundary => true; }