More elaborate RenderBox example
Also, some trivial fixes for things that I found while playing with the rendering library directly.
This commit is contained in:
parent
96958b203e
commit
51566aeffa
@ -2,29 +2,95 @@
|
|||||||
// Use of this source code is governed by a BSD-style license that can be
|
// Use of this source code is governed by a BSD-style license that can be
|
||||||
// found in the LICENSE file.
|
// found in the LICENSE file.
|
||||||
|
|
||||||
import 'dart:ui';
|
|
||||||
|
|
||||||
import 'package:flutter/rendering.dart';
|
import 'package:flutter/rendering.dart';
|
||||||
import 'package:flutter/material.dart';
|
|
||||||
|
const List<BoxShadow> shadow = const <BoxShadow>[
|
||||||
|
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() {
|
void main() {
|
||||||
RenderBox coloredBox = new RenderDecoratedBox(
|
RenderDecoratedBox box1, box2, box3;
|
||||||
decoration: new BoxDecoration(
|
new RenderingFlutterBinding(root: new RenderPadding(
|
||||||
gradient: new RadialGradient(
|
padding: const EdgeDims.all(40.0),
|
||||||
center: Point.origin, radius: 500.0,
|
child: new RenderViewport(
|
||||||
colors: <Color>[Colors.yellow[500], Colors.blue[500]]
|
child: new RenderDecoratedBox(
|
||||||
),
|
|
||||||
boxShadow: elevationToShadow[8]
|
|
||||||
)
|
|
||||||
);
|
|
||||||
RenderBox paddedBox = new RenderPadding(
|
|
||||||
padding: const EdgeDims.all(50.0),
|
|
||||||
child: coloredBox
|
|
||||||
);
|
|
||||||
new RenderingFlutterBinding(root: new RenderDecoratedBox(
|
|
||||||
decoration: const BoxDecoration(
|
decoration: const BoxDecoration(
|
||||||
backgroundColor: const Color(0xFFFFFFFF)
|
backgroundColor: const Color(0xFFFFFFFF)
|
||||||
),
|
),
|
||||||
child: paddedBox
|
child: new RenderBlock(
|
||||||
|
children: <RenderBox>[
|
||||||
|
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 <Color>[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 <TextSpan>[ 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)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
]
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)
|
||||||
));
|
));
|
||||||
}
|
}
|
||||||
|
@ -10,6 +10,7 @@ import 'text_style.dart';
|
|||||||
/// An immutable span of text.
|
/// An immutable span of text.
|
||||||
abstract class TextSpan {
|
abstract class TextSpan {
|
||||||
// This class must be immutable, because we won't notice when it changes.
|
// This class must be immutable, because we won't notice when it changes.
|
||||||
|
const TextSpan();
|
||||||
String toString([String prefix = '']);
|
String toString([String prefix = '']);
|
||||||
void build(ui.ParagraphBuilder builder);
|
void build(ui.ParagraphBuilder builder);
|
||||||
ui.ParagraphStyle get paragraphStyle => null;
|
ui.ParagraphStyle get paragraphStyle => null;
|
||||||
@ -17,14 +18,13 @@ abstract class TextSpan {
|
|||||||
|
|
||||||
/// An immutable span of unstyled text.
|
/// An immutable span of unstyled text.
|
||||||
class PlainTextSpan extends TextSpan {
|
class PlainTextSpan extends TextSpan {
|
||||||
PlainTextSpan(this.text) {
|
const PlainTextSpan(this.text);
|
||||||
assert(text != null);
|
|
||||||
}
|
|
||||||
|
|
||||||
/// The text contained in the span.
|
/// The text contained in the span.
|
||||||
final String text;
|
final String text;
|
||||||
|
|
||||||
void build(ui.ParagraphBuilder builder) {
|
void build(ui.ParagraphBuilder builder) {
|
||||||
|
assert(text != null);
|
||||||
builder.addText(text);
|
builder.addText(text);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -42,10 +42,7 @@ class PlainTextSpan extends TextSpan {
|
|||||||
|
|
||||||
/// An immutable text span that applies a style to a list of children.
|
/// An immutable text span that applies a style to a list of children.
|
||||||
class StyledTextSpan extends TextSpan {
|
class StyledTextSpan extends TextSpan {
|
||||||
StyledTextSpan(this.style, this.children) {
|
const StyledTextSpan(this.style, this.children);
|
||||||
assert(style != null);
|
|
||||||
assert(children != null);
|
|
||||||
}
|
|
||||||
|
|
||||||
/// The style to apply to the children.
|
/// The style to apply to the children.
|
||||||
final TextStyle style;
|
final TextStyle style;
|
||||||
@ -54,9 +51,13 @@ class StyledTextSpan extends TextSpan {
|
|||||||
final List<TextSpan> children;
|
final List<TextSpan> children;
|
||||||
|
|
||||||
void build(ui.ParagraphBuilder builder) {
|
void build(ui.ParagraphBuilder builder) {
|
||||||
|
assert(style != null);
|
||||||
|
assert(children != null);
|
||||||
builder.pushStyle(style.textStyle);
|
builder.pushStyle(style.textStyle);
|
||||||
for (TextSpan child in children)
|
for (TextSpan child in children) {
|
||||||
|
assert(child != null);
|
||||||
child.build(builder);
|
child.build(builder);
|
||||||
|
}
|
||||||
builder.pop();
|
builder.pop();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -93,7 +93,7 @@ void debugDumpLayerTree() {
|
|||||||
|
|
||||||
/// A concrete binding for applications that use the Rendering framework
|
/// A concrete binding for applications that use the Rendering framework
|
||||||
/// directly. This is the glue that binds the framework to the Flutter engine.
|
/// 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 }) {
|
RenderingFlutterBinding({ RenderBox root }) {
|
||||||
assert(renderView != null);
|
assert(renderView != null);
|
||||||
renderView.child = root;
|
renderView.child = root;
|
||||||
|
@ -1304,6 +1304,7 @@ class RenderPointerListener extends RenderProxyBox {
|
|||||||
/// not, we can re-record its display list without re-recording the display list
|
/// not, we can re-record its display list without re-recording the display list
|
||||||
/// for the surround tree.
|
/// for the surround tree.
|
||||||
class RenderRepaintBoundary extends RenderProxyBox {
|
class RenderRepaintBoundary extends RenderProxyBox {
|
||||||
|
RenderRepaintBoundary({ RenderBox child }) : super(child);
|
||||||
bool get isRepaintBoundary => true;
|
bool get isRepaintBoundary => true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user