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

Support for non-alphabetic baselines

Browse Source
This commit is contained in:
Collin Jackson 2015-07-17 16:17:32 -07:00
parent e1aa0431be
commit 4604021dd3
7 changed files with 56 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/flutter/example/rendering/align_items.dart
View File

@ -20,7 +20,7 @@ void main() {
TextStyle style = const TextStyle(color: const Color(0xFF000000));
RenderParagraph paragraph = new RenderParagraph(new InlineStyle(style, [new InlineText("${alignItems}")]));
table.add(new RenderPadding(child: paragraph, padding: new EdgeDims.only(top: 20.0)));
var row = new RenderFlex(alignItems: alignItems);
var row = new RenderFlex(alignItems: alignItems, baseline: TextBaseline.alphabetic);
style = new TextStyle(fontSize: 15.0, color: const Color(0xFF000000));
row.add(new RenderDecoratedBox(
@ -32,7 +32,7 @@ void main() {
decoration: new BoxDecoration(backgroundColor: const Color(0x7FCCFFCC)),
child: new RenderParagraph(new InlineStyle(style, [new InlineText('foo foo foo')]))
));
var subrow = new RenderFlex(alignItems: alignItems);
var subrow = new RenderFlex(alignItems: alignItems, baseline: TextBaseline.alphabetic);
style = new TextStyle(fontSize: 25.0, color: const Color(0xFF000000));
subrow.add(new RenderDecoratedBox(
decoration: new BoxDecoration(backgroundColor: const Color(0x7FCCCCFF)),

7
packages/flutter/example/stocks/lib/stock_row.dart
View File

@ -6,6 +6,7 @@ import 'package:sky/painting/text_style.dart';
import 'package:sky/rendering/box.dart';
import 'package:sky/widgets/ink_well.dart';
import 'package:sky/widgets/basic.dart';
import 'package:sky/widgets/default_text_style.dart';
import 'package:sky/widgets/theme.dart';
import 'stock_arrow.dart';
@ -60,7 +61,11 @@ class StockRow extends Component {
margin: const EdgeDims.only(right: 5.0)
),
new Flexible(
child: new Flex(children, alignItems: FlexAlignItems.baseline)
child: new Flex(
children,
alignItems: FlexAlignItems.baseline,
textBaseline: DefaultTextStyle.of(this).textBaseline
)
)
])
)

15
packages/flutter/lib/painting/text_style.dart
View File

@ -10,6 +10,8 @@ const bold = FontWeight.w700;
enum TextAlign { left, right, center }
enum TextBaseline { alphabetic, ideographic }
enum TextDecoration { none, underline, overline, lineThrough }
const underline = const <TextDecoration>[TextDecoration.underline];
const overline = const <TextDecoration>[TextDecoration.overline];
@ -24,6 +26,7 @@ class TextStyle {
this.fontSize,
this.fontWeight,
this.textAlign,
this.textBaseline,
this.height,
this.decoration,
this.decorationColor,
@ -35,6 +38,7 @@ class TextStyle {
final double fontSize; // in pixels
final FontWeight fontWeight;
final TextAlign textAlign;
final TextBaseline textBaseline;
final double height; // multiple of fontSize
final List<TextDecoration> decoration; // TODO(ianh): Switch this to a Set<> once Dart supports constant Sets
final Color decorationColor;
@ -46,6 +50,7 @@ class TextStyle {
double fontSize,
FontWeight fontWeight,
TextAlign textAlign,
TextBaseline textBaseline,
double height,
List<TextDecoration> decoration,
Color decorationColor,
@ -57,6 +62,7 @@ class TextStyle {
fontSize: fontSize != null ? fontSize : this.fontSize,
fontWeight: fontWeight != null ? fontWeight : this.fontWeight,
textAlign: textAlign != null ? textAlign : this.textAlign,
textBaseline: textBaseline != null ? textBaseline : this.textBaseline,
height: height != null ? height : this.height,
decoration: decoration != null ? decoration : this.decoration,
decorationColor: decorationColor != null ? decorationColor : this.decorationColor,
@ -71,6 +77,7 @@ class TextStyle {
fontSize: other.fontSize,
fontWeight: other.fontWeight,
textAlign: other.textAlign,
textBaseline: other.textBaseline,
height: other.height,
decoration: other.decoration,
decorationColor: other.decorationColor,
@ -157,10 +164,11 @@ class TextStyle {
return true;
return other is TextStyle &&
color == other.color &&
fontFamily == other.fontFamily &&
fontFamily == other.fontFamily &&
fontSize == other.fontSize &&
fontWeight == other.fontWeight &&
textAlign == other.textAlign &&
textAlign == other.textAlign &&
textBaseline == other.textBaseline &&
decoration == other.decoration &&
decorationColor == other.decorationColor &&
decorationStyle == other.decorationStyle;
@ -174,6 +182,7 @@ class TextStyle {
value = 37 * value + fontSize.hashCode;
value = 37 * value + fontWeight.hashCode;
value = 37 * value + textAlign.hashCode;
value = 37 * value + textBaseline.hashCode;
value = 37 * value + decoration.hashCode;
value = 37 * value + decorationColor.hashCode;
value = 37 * value + decorationStyle.hashCode;
@ -193,6 +202,8 @@ class TextStyle {
result.add('${prefix}fontWeight: $fontWeight');
if (textAlign != null)
result.add('${prefix}textAlign: $textAlign');
if (textBaseline != null)
result.add('${prefix}textBaseline: $textBaseline');
if (decoration != null)
result.add('${prefix}decoration: $decoration');
if (decorationColor != null)

4
packages/flutter/lib/rendering/box.dart
View File

@ -7,10 +7,12 @@ import 'dart:sky' as sky;
import 'package:sky/base/debug.dart';
import 'package:sky/painting/box_painter.dart';
import 'package:sky/painting/text_style.dart';
import 'package:sky/rendering/object.dart';
import 'package:vector_math/vector_math.dart';
export 'package:sky/painting/box_painter.dart';
export 'package:sky/painting/text_style.dart' show TextBaseline;
// GENERIC BOX RENDERING
// Anything that has a concept of x, y, width, height is going to derive from this
@ -253,8 +255,6 @@ class BoxParentData extends ParentData {
String toString() => 'position=$position';
}
enum TextBaseline { alphabetic, ideographic }
abstract class RenderBox extends RenderObject {
void setupParentData(RenderObject child) {

24
packages/flutter/lib/rendering/flex.dart
View File

@ -47,10 +47,12 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
List<RenderBox> children,
FlexDirection direction: FlexDirection.horizontal,
FlexJustifyContent justifyContent: FlexJustifyContent.start,
FlexAlignItems alignItems: FlexAlignItems.center
FlexAlignItems alignItems: FlexAlignItems.center,
TextBaseline textBaseline
}) : _direction = direction,
_justifyContent = justifyContent,
_alignItems = alignItems {
_alignItems = alignItems,
_textBaseline = textBaseline {
addAll(children);
}
@ -81,6 +83,15 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
}
}
TextBaseline _textBaseline;
TextBaseline get textBaseline => _textBaseline;
void set textBaseline (TextBaseline value) {
if (_textBaseline != value) {
_textBaseline = value;
markNeedsLayout();
}
}
bool _overflowOccurredDuringLayout = false;
void setupParentData(RenderBox child) {
@ -342,8 +353,8 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
crossSize = math.max(crossSize, _getCrossSize(child));
}
if (alignItems == FlexAlignItems.baseline) {
// TODO(jackson): Support for non-alphabetic baselines
double distance = child.getDistanceToBaseline(TextBaseline.alphabetic, onlyReal: true);
assert(textBaseline != null);
double distance = child.getDistanceToBaseline(textBaseline, onlyReal: true);
if (distance != null)
maxBaselineDistance = math.max(maxBaselineDistance, distance);
}
@ -412,10 +423,9 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
break;
case FlexAlignItems.baseline:
childCrossPosition = 0.0;
// TODO(jackson): Support for vertical baselines
if (_direction == FlexDirection.horizontal) {
// TODO(jackson): Support for non-alphabetic baselines
double distance = child.getDistanceToBaseline(TextBaseline.alphabetic, onlyReal: true);
assert(textBaseline != null);
double distance = child.getDistanceToBaseline(textBaseline, onlyReal: true);
if (distance != null)
childCrossPosition = maxBaselineDistance - distance;
}

23
packages/flutter/lib/theme/typography.dart
View File

@ -9,20 +9,21 @@ import 'dart:sky';
import 'package:sky/painting/text_style.dart';
// TODO(eseidel): Font weights are supposed to be language relative!
// TODO(jackson): Baseline should be language relative!
// These values are for English-like text.
class TextTheme {
TextTheme._(Color color54, Color color87)
: display4 = new TextStyle(fontSize: 112.0, fontWeight: FontWeight.w100, color: color54),
display3 = new TextStyle(fontSize: 56.0, fontWeight: FontWeight.w400, color: color54),
display2 = new TextStyle(fontSize: 45.0, fontWeight: FontWeight.w400, color: color54, height: 48.0 / 45.0),
display1 = new TextStyle(fontSize: 34.0, fontWeight: FontWeight.w400, color: color54, height: 40.0 / 34.0),
headline = new TextStyle(fontSize: 24.0, fontWeight: FontWeight.w400, color: color87, height: 32.0 / 24.0),
title = new TextStyle(fontSize: 20.0, fontWeight: FontWeight.w500, color: color87, height: 28.0 / 20.0),
subhead = new TextStyle(fontSize: 16.0, fontWeight: FontWeight.w400, color: color87, height: 24.0 / 16.0),
body2 = new TextStyle(fontSize: 14.0, fontWeight: FontWeight.w500, color: color87, height: 24.0 / 14.0),
body1 = new TextStyle(fontSize: 14.0, fontWeight: FontWeight.w400, color: color87, height: 20.0 / 14.0),
caption = new TextStyle(fontSize: 12.0, fontWeight: FontWeight.w400, color: color54),
button = new TextStyle(fontSize: 14.0, fontWeight: FontWeight.w500, color: color87);
: display4 = new TextStyle(fontSize: 112.0, fontWeight: FontWeight.w100, color: color54, textBaseline: TextBaseline.alphabetic),
display3 = new TextStyle(fontSize: 56.0, fontWeight: FontWeight.w400, color: color54, textBaseline: TextBaseline.alphabetic),
display2 = new TextStyle(fontSize: 45.0, fontWeight: FontWeight.w400, color: color54, height: 48.0 / 45.0, textBaseline: TextBaseline.alphabetic),
display1 = new TextStyle(fontSize: 34.0, fontWeight: FontWeight.w400, color: color54, height: 40.0 / 34.0, textBaseline: TextBaseline.alphabetic),
headline = new TextStyle(fontSize: 24.0, fontWeight: FontWeight.w400, color: color87, height: 32.0 / 24.0, textBaseline: TextBaseline.alphabetic),
title = new TextStyle(fontSize: 20.0, fontWeight: FontWeight.w500, color: color87, height: 28.0 / 20.0, textBaseline: TextBaseline.alphabetic),
subhead = new TextStyle(fontSize: 16.0, fontWeight: FontWeight.w400, color: color87, height: 24.0 / 16.0, textBaseline: TextBaseline.alphabetic),
body2 = new TextStyle(fontSize: 14.0, fontWeight: FontWeight.w500, color: color87, height: 24.0 / 14.0, textBaseline: TextBaseline.alphabetic),
body1 = new TextStyle(fontSize: 14.0, fontWeight: FontWeight.w400, color: color87, height: 20.0 / 14.0, textBaseline: TextBaseline.alphabetic),
caption = new TextStyle(fontSize: 12.0, fontWeight: FontWeight.w400, color: color54, textBaseline: TextBaseline.alphabetic),
button = new TextStyle(fontSize: 14.0, fontWeight: FontWeight.w500, color: color87, textBaseline: TextBaseline.alphabetic);
final TextStyle display4;
final TextStyle display3;

5
packages/flutter/lib/widgets/basic.dart
View File

@ -401,12 +401,14 @@ class Flex extends MultiChildRenderObjectWrapper {
String key,
this.direction: FlexDirection.horizontal,
this.justifyContent: FlexJustifyContent.start,
this.alignItems: FlexAlignItems.center
this.alignItems: FlexAlignItems.center,
this.textBaseline
}) : super(key: key, children: children);
final FlexDirection direction;
final FlexJustifyContent justifyContent;
final FlexAlignItems alignItems;
final TextBaseline textBaseline;
RenderFlex createNode() => new RenderFlex(direction: this.direction);
RenderFlex get root => super.root;
@ -416,6 +418,7 @@ class Flex extends MultiChildRenderObjectWrapper {
root.direction = direction;
root.justifyContent = justifyContent;
root.alignItems = alignItems;
root.textBaseline = textBaseline;
}
}