mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
Use Theme to define the colors and TextStyles for Tab, TabBar
Also added a smoke test for examples/widgets/tabs.dart. R=abarth@chromium.org Review URL: https://codereview.chromium.org/1213873002.
This commit is contained in:
Hans Muller
parent
02d21924c6
commit
ce7e8260c3
@ -44,8 +44,8 @@ class TabbedNavigatorApp extends App {
|
||||
.map((labels) => buildTabNavigator(labels, navigatorIndex++));
|
||||
|
||||
ToolBar toolbar = new ToolBar(
|
||||
center: new Text('Tabbed Navigator', style: white.title),
|
||||
backgroundColor: Blue[500]);
|
||||
center: new Text('Tabbed Navigator', style: white.title)
|
||||
);
|
||||
|
||||
return new Scaffold(
|
||||
toolbar: toolbar,
|
||||
|
||||
@ -3,15 +3,13 @@
|
||||
// found in the LICENSE file.
|
||||
|
||||
import 'dart:math' as math;
|
||||
import 'dart:sky' as sky;
|
||||
|
||||
import 'package:sky/painting/text_style.dart';
|
||||
import 'package:sky/rendering/box.dart';
|
||||
import 'package:sky/rendering/object.dart';
|
||||
import 'package:sky/theme/colors.dart';
|
||||
import 'package:sky/widgets/basic.dart';
|
||||
import 'package:sky/widgets/icon.dart';
|
||||
import 'package:sky/widgets/ink_well.dart';
|
||||
import 'package:sky/widgets/theme.dart';
|
||||
import 'package:sky/widgets/widget.dart';
|
||||
|
||||
typedef void SelectedIndexChanged(int selectedIndex);
|
||||
@ -20,6 +18,7 @@ const double _kTabHeight = 46.0;
|
||||
const double _kTabIndicatorHeight = 2.0;
|
||||
const double _kTabBarHeight = _kTabHeight + _kTabIndicatorHeight;
|
||||
const double _kMinTabWidth = 72.0;
|
||||
const int _kTabIconSize = 24;
|
||||
|
||||
class TabBarParentData extends BoxParentData with
|
||||
ContainerParentDataMixin<RenderBox> { }
|
||||
@ -37,7 +36,25 @@ class RenderTabBar extends RenderBox with
|
||||
}
|
||||
}
|
||||
|
||||
void setParentData(RenderBox child) {
|
||||
Color _backgroundColor;
|
||||
Color get backgroundColor => _backgroundColor;
|
||||
void set backgroundColor(Color value) {
|
||||
if (_backgroundColor != value) {
|
||||
_backgroundColor = value;
|
||||
markNeedsPaint();
|
||||
}
|
||||
}
|
||||
|
||||
Color _indicatorColor;
|
||||
Color get indicatorColor => _indicatorColor;
|
||||
void set indicatorColor(Color value) {
|
||||
if (_indicatorColor != value) {
|
||||
_indicatorColor = value;
|
||||
markNeedsPaint();
|
||||
}
|
||||
}
|
||||
|
||||
void setupParentData(RenderBox child) {
|
||||
if (child.parentData is! TabBarParentData)
|
||||
child.parentData = new TabBarParentData();
|
||||
}
|
||||
@ -119,16 +136,20 @@ class RenderTabBar extends RenderBox with
|
||||
}
|
||||
|
||||
void _paintIndicator(RenderCanvas canvas, RenderBox selectedTab) {
|
||||
if (indicatorColor == null)
|
||||
return;
|
||||
|
||||
var size = new Size(selectedTab.size.width, _kTabIndicatorHeight);
|
||||
var point = new Point(selectedTab.parentData.position.x, _kTabHeight);
|
||||
Rect rect = new Rect.fromPointAndSize(point, size);
|
||||
// TODO(hansmuller): indicator color should be based on the theme.
|
||||
canvas.drawRect(rect, new Paint()..color = White);
|
||||
canvas.drawRect(rect, new Paint()..color = indicatorColor);
|
||||
}
|
||||
|
||||
void paint(RenderCanvas canvas) {
|
||||
Rect rect = new Rect.fromSize(size);
|
||||
canvas.drawRect(rect, new Paint()..color = Blue[500]);
|
||||
if (backgroundColor != null) {
|
||||
Rect rect = new Rect.fromSize(size);
|
||||
canvas.drawRect(rect, new Paint()..color = backgroundColor);
|
||||
}
|
||||
|
||||
int index = 0;
|
||||
RenderBox child = firstChild;
|
||||
@ -143,10 +164,17 @@ class RenderTabBar extends RenderBox with
|
||||
}
|
||||
|
||||
class TabBarWrapper extends MultiChildRenderObjectWrapper {
|
||||
TabBarWrapper(List<Widget> children, this.selectedIndex, { String key })
|
||||
: super(key: key, children: children);
|
||||
TabBarWrapper({
|
||||
List<Widget> children,
|
||||
this.selectedIndex,
|
||||
this.backgroundColor,
|
||||
this.indicatorColor,
|
||||
String key
|
||||
}) : super(key: key, children: children);
|
||||
|
||||
final int selectedIndex;
|
||||
final Color backgroundColor;
|
||||
final Color indicatorColor;
|
||||
|
||||
RenderTabBar get root => super.root;
|
||||
RenderTabBar createNode() => new RenderTabBar();
|
||||
@ -154,6 +182,8 @@ class TabBarWrapper extends MultiChildRenderObjectWrapper {
|
||||
void syncRenderObject(Widget old) {
|
||||
super.syncRenderObject(old);
|
||||
root.selectedIndex = selectedIndex;
|
||||
root.backgroundColor = backgroundColor;
|
||||
root.indicatorColor = indicatorColor;
|
||||
}
|
||||
}
|
||||
|
||||
@ -176,18 +206,14 @@ class Tab extends Component {
|
||||
final TabLabel label;
|
||||
final bool selected;
|
||||
|
||||
// TODO(hansmuller): use themes here.
|
||||
static const TextStyle selectedStyle = const TextStyle(color: const Color(0xFFFFFFFF));
|
||||
static const TextStyle style = const TextStyle(color: const Color(0xB2FFFFFF));
|
||||
|
||||
Widget _buildLabelText() {
|
||||
assert(label.text != null);
|
||||
return new Text(label.text, style: style);
|
||||
return new Text(label.text, style: Theme.of(this).toolbarText.button);
|
||||
}
|
||||
|
||||
Widget _buildLabelIcon() {
|
||||
assert(label.icon != null);
|
||||
return new Icon(type: label.icon, size: 24);
|
||||
return new Icon(type: label.icon, size: _kTabIconSize);
|
||||
}
|
||||
|
||||
Widget build() {
|
||||
@ -254,7 +280,12 @@ class TabBar extends Component {
|
||||
for (int tabIndex = 0; tabIndex < labels.length; tabIndex++) {
|
||||
tabs.add(_toTab(labels[tabIndex], tabIndex));
|
||||
}
|
||||
return new TabBarWrapper(tabs, selectedIndex);
|
||||
return new TabBarWrapper(
|
||||
children: tabs,
|
||||
selectedIndex: selectedIndex,
|
||||
backgroundColor: Theme.of(this).primary[500],
|
||||
indicatorColor: Theme.of(this).accent[200]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
128
tests/examples/tabs-expected.txt
Normal file
128
tests/examples/tabs-expected.txt
Normal file
@ -0,0 +1,128 @@
|
||||
CONSOLE: TestRenderView enabled
|
||||
CONSOLE:
|
||||
PAINT FOR FRAME #1 ----------------------------------------------
|
||||
1 | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
------------------------------------------------------------------------
|
||||
CONSOLE:
|
||||
PAINT FOR FRAME #2 ----------------------------------------------
|
||||
2 | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | paintChild RenderScaffold at Point(0.0, 0.0)
|
||||
2 | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | paintChild RenderDecoratedBox at Point(0.0, 81.0)
|
||||
2 | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | drawRRect(Instance of 'RRect', Paint(color:Color(0xff9e9e9e)))
|
||||
2 | | | paintChild RenderBlock at Point(0.0, 163.5)
|
||||
2 | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | paintChild RenderPadding at Point(0.0, 0.0)
|
||||
2 | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | paintChild RenderTabBar at Point(0.0, 0.0)
|
||||
2 | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | drawRect(Rect.fromLTRB(0.0, 0.0, 800.0, 48.0), Paint(color:Color(0xff3f51b5)))
|
||||
2 | | | | | | paintChild RenderInkWell at Point(0.0, 0.0)
|
||||
2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | paintChild RenderOpacity at Point(65.5, 16.0)
|
||||
2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | drawRect(Rect.fromLTRB(0.0, 46.0, 200.0, 48.0), Paint(color:Color(0xffff4081)))
|
||||
2 | | | | | | paintChild RenderInkWell at Point(200.0, 0.0)
|
||||
2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | paintChild RenderOpacity at Point(64.0, 16.0)
|
||||
2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | | saveLayer(null, Paint(color:Color(0xb3000000)))
|
||||
2 | | | | | | | | restore
|
||||
2 | | | | | | paintChild RenderInkWell at Point(400.0, 0.0)
|
||||
2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | paintChild RenderOpacity at Point(63.0, 16.0)
|
||||
2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | | saveLayer(null, Paint(color:Color(0xb3000000)))
|
||||
2 | | | | | | | | restore
|
||||
2 | | | | | | paintChild RenderInkWell at Point(600.0, 0.0)
|
||||
2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | paintChild RenderOpacity at Point(61.0, 16.0)
|
||||
2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | | saveLayer(null, Paint(color:Color(0xb3000000)))
|
||||
2 | | | | | | | | restore
|
||||
2 | | | | paintChild RenderPadding at Point(0.0, 64.0)
|
||||
2 | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | paintChild RenderTabBar at Point(0.0, 0.0)
|
||||
2 | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | drawRect(Rect.fromLTRB(0.0, 0.0, 800.0, 48.0), Paint(color:Color(0xff3f51b5)))
|
||||
2 | | | | | | paintChild RenderInkWell at Point(0.0, 0.0)
|
||||
2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | paintChild RenderOpacity at Point(88.0, 12.0)
|
||||
2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | drawRect(Rect.fromLTRB(0.0, 46.0, 200.0, 48.0), Paint(color:Color(0xffff4081)))
|
||||
2 | | | | | | paintChild RenderInkWell at Point(200.0, 0.0)
|
||||
2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | paintChild RenderOpacity at Point(88.0, 12.0)
|
||||
2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | | saveLayer(null, Paint(color:Color(0xb3000000)))
|
||||
2 | | | | | | | | restore
|
||||
2 | | | | | | paintChild RenderInkWell at Point(400.0, 0.0)
|
||||
2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | paintChild RenderOpacity at Point(88.0, 12.0)
|
||||
2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | | saveLayer(null, Paint(color:Color(0xb3000000)))
|
||||
2 | | | | | | | | restore
|
||||
2 | | | | | | paintChild RenderInkWell at Point(600.0, 0.0)
|
||||
2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | paintChild RenderOpacity at Point(88.0, 12.0)
|
||||
2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | | saveLayer(null, Paint(color:Color(0xb3000000)))
|
||||
2 | | | | | | | | restore
|
||||
2 | | | | paintChild RenderPadding at Point(0.0, 128.0)
|
||||
2 | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | paintChild RenderTabBar at Point(0.0, 0.0)
|
||||
2 | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | drawRect(Rect.fromLTRB(0.0, 0.0, 800.0, 48.0), Paint(color:Color(0xff3f51b5)))
|
||||
2 | | | | | | paintChild RenderInkWell at Point(0.0, 0.0)
|
||||
2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | paintChild RenderOpacity at Point(65.5, 0.0)
|
||||
2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | | paintChild RenderParagraph at Point(0.0, 4.0)
|
||||
2 | | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | | paintChild RenderImage at Point(22.5, 20.0)
|
||||
2 | | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | drawRect(Rect.fromLTRB(0.0, 46.0, 200.0, 48.0), Paint(color:Color(0xffff4081)))
|
||||
2 | | | | | | paintChild RenderInkWell at Point(200.0, 0.0)
|
||||
2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | paintChild RenderOpacity at Point(64.0, 0.0)
|
||||
2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | | saveLayer(null, Paint(color:Color(0xb3000000)))
|
||||
2 | | | | | | | | paintChild RenderParagraph at Point(0.0, 4.0)
|
||||
2 | | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | | paintChild RenderImage at Point(24.0, 20.0)
|
||||
2 | | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | | restore
|
||||
2 | | | | | | paintChild RenderInkWell at Point(400.0, 0.0)
|
||||
2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | paintChild RenderOpacity at Point(63.0, 0.0)
|
||||
2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | | saveLayer(null, Paint(color:Color(0xb3000000)))
|
||||
2 | | | | | | | | paintChild RenderParagraph at Point(0.0, 4.0)
|
||||
2 | | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | | paintChild RenderImage at Point(25.0, 20.0)
|
||||
2 | | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | | restore
|
||||
2 | | | | | | paintChild RenderInkWell at Point(600.0, 0.0)
|
||||
2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | paintChild RenderOpacity at Point(61.0, 0.0)
|
||||
2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | | saveLayer(null, Paint(color:Color(0xb3000000)))
|
||||
2 | | | | | | | | paintChild RenderParagraph at Point(0.0, 4.0)
|
||||
2 | | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | | paintChild RenderImage at Point(27.0, 20.0)
|
||||
2 | | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | | restore
|
||||
2 | | paintChild RenderDecoratedBox at Point(0.0, 0.0)
|
||||
2 | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | drawRect(Rect.fromLTRB(0.0, 0.0, 800.0, 81.0), Paint(color:Color(0xff3f51b5), drawLooper:true))
|
||||
2 | | | paintChild RenderFlex at Point(8.0, 0.0)
|
||||
2 | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | paintChild RenderConstrainedBox at Point(0.0, 25.0)
|
||||
2 | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | paintChild RenderPadding at Point(0.0, 16.0)
|
||||
2 | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | paintChild RenderParagraph at Point(24.0, 0.0)
|
||||
2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0
|
||||
------------------------------------------------------------------------
|
||||
PAINTED 2 FRAMES
|
||||
18
tests/examples/tabs.dart
Normal file
18
tests/examples/tabs.dart
Normal file
@ -0,0 +1,18 @@
|
||||
// Copyright 2015 The Chromium Authors. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style license that can be
|
||||
// found in the LICENSE file.
|
||||
|
||||
import 'dart:async';
|
||||
|
||||
import 'package:sky/widgets/widget.dart';
|
||||
|
||||
import '../../examples/widgets/tabs.dart';
|
||||
import '../resources/display_list.dart';
|
||||
|
||||
main() async {
|
||||
TestRenderView testRenderView = new TestRenderView();
|
||||
TabbedNavigatorApp app = new TabbedNavigatorApp();
|
||||
runApp(app, renderViewOverride: testRenderView);
|
||||
await testRenderView.checkFrame();
|
||||
testRenderView.endTest();
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user