DEV/flutter_flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Vertically center stock demo row contents, better up/down arrows

Browse Source 
StockRows are now a relatively simple application of flex layout.

The up/down arrows are now rendered within a circle, like
the original version. The arrows are a little bigger,
because.

R=ianh@google.com

Review URL: https://codereview.chromium.org/1165223005.
This commit is contained in:
Hans Muller 2015-06-09 15:59:18 -07:00
parent d9de344d6c
commit 3b53de73f0
2 changed files with 39 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
examples/stocks2/lib/stock_arrow.dart
View File

@ -34,25 +34,37 @@ class StockArrow extends Component {
const double size = 40.0;
var arrow = new CustomPaint(callback: (sky.Canvas canvas) {
Paint paint = new Paint()..color = color;
paint.setStyle(sky.PaintingStyle.stroke);
paint.strokeWidth = 2.0;
paint.strokeWidth = 1.0;
var padding = paint.strokeWidth * 3.0;
var w = size - padding * 2.0;
var h = size - padding * 2.0;
var r = size / 2.0 - padding;
canvas.save();
canvas.translate(padding, padding);
// The arrow (below) is drawn upwards by default.
if (percentChange < 0.0) {
var cx = w / 2.0;
var cy = h / 2.0;
canvas.translate(cx, cy);
canvas.translate(r, r);
canvas.rotate(math.PI);
canvas.translate(-cx, -cy);
canvas.translate(-r, -r);
}
canvas.drawLine(0.0, h, w, h, paint);
canvas.drawLine(w, h, w / 2.0, 0.0, paint);
canvas.drawLine(w / 2.0, 0.0, 0.0, h, paint);
// Draw the (equliateral triangle) arrow.
var dx = math.sqrt(3.0) * r / 2.0;
var path = new Path();
path.moveTo(r, 0.0);
path.lineTo(r + dx, r * 1.5);
path.lineTo(r - dx, r * 1.5);
path.lineTo(r, 0.0);
path.close();
paint.setStyle(sky.PaintingStyle.fill);
canvas.drawPath(path, paint);
// Draw a circle that circumscribes the arrow.
paint.setStyle(sky.PaintingStyle.stroke);
canvas.drawCircle(r, r, r + 2.0, paint);
canvas.restore();
});
return new Container(
child: arrow,
width: size,

39
examples/stocks2/lib/stock_row.dart
View File

@ -5,13 +5,14 @@
import 'dart:sky' as sky;
import 'package:sky/framework/components2/ink_well.dart';
import 'package:sky/framework/fn2.dart';
import 'package:sky/framework/rendering/flex.dart';
import 'package:sky/framework/rendering/box.dart';
import 'package:sky/framework/theme/typography.dart' as typography;
import 'stock_arrow.dart';
import 'stock_data.dart';
class StockRow extends Component {
static const double kHeight = 100.0;
static const double kHeight = 70.0;
Stock stock;
@ -23,36 +24,28 @@ class StockRow extends Component {
String lastSale = "\$${stock.lastSale.toStringAsFixed(2)}";
String changeInPrice = "${stock.percentChange.toStringAsFixed(2)}%";
if (stock.percentChange > 0)
changeInPrice = "+" + changeInPrice;
if (stock.percentChange > 0) changeInPrice = "+" + changeInPrice;
List<UINode> children = [
new StockArrow(
percentChange: stock.percentChange
),
new FlexExpandingChild(new Text(stock.symbol)),
new Container(
width: 75.0,
padding: const EdgeDims.only(right: 16.0),
// text-align: right
child: new Text(lastSale)
),
// text-align: right, ${typography.black.caption};
new SizedBox(
width: 75.0,
child: new Text(changeInPrice)
),
child: new StockArrow(percentChange: stock.percentChange),
margin: const EdgeDims.only(right: 5.0)),
new FlexExpandingChild(new Text(stock.symbol), flex: 2, key: "symbol"),
// TODO(hansmuller): text-align: right
new FlexExpandingChild(new Text(lastSale), key: "lastSale"),
// TODO(hansmuller): text-align: right, ${typography.black.caption};
new FlexExpandingChild(new Text(changeInPrice), key: "changeInPrice")
];
return new Container(
padding: const EdgeDims(16.0, 16.0, 20.0, 16.0),
height: kHeight,
height: kHeight, // TODO(hansmuller): This shouldn't be needed
decoration: const BoxDecoration(
backgroundColor: const sky.Color(0xFFFFFFFF),
border: const Border(
bottom: const BorderSide(
color: const sky.Color(0xFFF4F4F4),
width: 1.0))),
backgroundColor: const sky.Color(0xFFFFFFFF),
border: const Border(
bottom: const BorderSide(
color: const sky.Color(0xFFF4F4F4),
width: 1.0))),
child: new FlexContainer(children: children));
}
}