mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
Gratuitous tabs example enhancement
Demo all three varieties of TabLabels in 3 different TabNavigators. Use another TabNavigator to select among the three Card-encapsulated demos. R=abarth@chromium.org Review URL: https://codereview.chromium.org/1217243005.
This commit is contained in:
Hans Muller
parent
1351488a17
commit
28c753500a
@ -3,17 +3,28 @@
|
||||
// found in the LICENSE file.
|
||||
|
||||
import 'package:sky/painting/text_style.dart';
|
||||
import 'package:sky/theme/colors.dart' as colors;
|
||||
import 'package:sky/theme/typography.dart' as typography;
|
||||
import 'package:sky/widgets/basic.dart';
|
||||
import 'package:sky/widgets/material.dart';
|
||||
import 'package:sky/widgets/card.dart';
|
||||
import 'package:sky/widgets/scaffold.dart';
|
||||
import 'package:sky/widgets/tabs.dart';
|
||||
import 'package:sky/widgets/theme.dart';
|
||||
import 'package:sky/widgets/tool_bar.dart';
|
||||
import 'package:sky/widgets/widget.dart';
|
||||
|
||||
class TabbedNavigatorApp extends App {
|
||||
int selectedIndex = 0;
|
||||
// The index of the selected tab for each of the TabNavigators constructed below.
|
||||
List<int> selectedIndices = new List<int>.filled(4, 0);
|
||||
|
||||
TabNavigator _buildTabNavigator(int n, List<TabNavigatorView> views) {
|
||||
return new TabNavigator(
|
||||
views: views,
|
||||
selectedIndex: selectedIndices[n],
|
||||
onChanged: (tabIndex) {
|
||||
setState(() { selectedIndices[n] = tabIndex; } );
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildContent(String label) {
|
||||
return new Center(
|
||||
@ -21,7 +32,29 @@ class TabbedNavigatorApp extends App {
|
||||
);
|
||||
}
|
||||
|
||||
Widget build() {
|
||||
TabNavigator _buildTextLabelsTabNavigator(int n) {
|
||||
Iterable<TabNavigatorView> views = ["ONE", "TWO", "FREE", "FOUR"]
|
||||
.map((text) {
|
||||
return new TabNavigatorView(
|
||||
label: new TabLabel(text: text),
|
||||
builder: () => _buildContent(text)
|
||||
);
|
||||
});
|
||||
return _buildTabNavigator(n, views.toList());
|
||||
}
|
||||
|
||||
TabNavigator _buildIconLabelsTabNavigator(int n) {
|
||||
Iterable<TabNavigatorView> views = ["event", "home", "android", "alarm", "face", "language"]
|
||||
.map((icon_name) {
|
||||
return new TabNavigatorView(
|
||||
label: new TabLabel(icon: "action/${icon_name}_white"),
|
||||
builder: () => _buildContent(icon_name)
|
||||
);
|
||||
});
|
||||
return _buildTabNavigator(n, views.toList());
|
||||
}
|
||||
|
||||
TabNavigator _buildTextAndIconLabelsTabNavigator(int n) {
|
||||
List<TabNavigatorView> views = <TabNavigatorView>[
|
||||
new TabNavigatorView(
|
||||
label: const TabLabel(text: 'STOCKS', icon: 'action/list_white'),
|
||||
@ -36,14 +69,34 @@ class TabbedNavigatorApp extends App {
|
||||
builder: () => _buildContent("Summary")
|
||||
)
|
||||
];
|
||||
return _buildTabNavigator(n, views);
|
||||
}
|
||||
|
||||
TabNavigator tabNavigator = new TabNavigator(
|
||||
views: views,
|
||||
selectedIndex: selectedIndex,
|
||||
onChanged: (tabIndex) {
|
||||
setState(() { selectedIndex = tabIndex; } );
|
||||
}
|
||||
Container _buildCard(TabNavigator tabNavigator) {
|
||||
return new Container(
|
||||
child: new Card(child: tabNavigator),
|
||||
padding: const EdgeDims.all(12.0),
|
||||
decoration: new BoxDecoration(backgroundColor: Theme.of(this).primary[50])
|
||||
);
|
||||
}
|
||||
|
||||
Widget build() {
|
||||
List<TabNavigatorView> views = <TabNavigatorView>[
|
||||
new TabNavigatorView(
|
||||
label: const TabLabel(text: 'TEXT'),
|
||||
builder: () => _buildCard(_buildTextLabelsTabNavigator(0))
|
||||
),
|
||||
new TabNavigatorView(
|
||||
label: const TabLabel(text: 'ICONS'),
|
||||
builder: () => _buildCard(_buildIconLabelsTabNavigator(1))
|
||||
),
|
||||
new TabNavigatorView(
|
||||
label: const TabLabel(text: 'BOTH'),
|
||||
builder: () => _buildCard(_buildTextAndIconLabelsTabNavigator(2))
|
||||
)
|
||||
];
|
||||
|
||||
TabNavigator tabNavigator = _buildTabNavigator(3, views);
|
||||
|
||||
ToolBar toolbar = new ToolBar(
|
||||
center: new Text('Tabbed Navigator', style: typography.white.title)
|
||||
@ -51,10 +104,7 @@ class TabbedNavigatorApp extends App {
|
||||
|
||||
return new Scaffold(
|
||||
toolbar: toolbar,
|
||||
body: new Material(
|
||||
color: colors.Grey[50],
|
||||
child: tabNavigator
|
||||
)
|
||||
body: tabNavigator
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,73 +6,5 @@ PAINT FOR FRAME #1 ----------------------------------------------
|
||||
CONSOLE:
|
||||
PAINT FOR FRAME #2 ----------------------------------------------
|
||||
2 | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | paintChild RenderScaffold at Point(0.0, 0.0)
|
||||
2 | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | paintChild RenderDecoratedBox at Point(0.0, 81.0)
|
||||
2 | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | drawRRect(Instance of 'RRect', Paint(color:Color(0xfffafafa)))
|
||||
2 | | | paintChild RenderTabBar at Point(0.0, 81.0)
|
||||
2 | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | drawRect(Rect.fromLTRB(0.0, 81.0, 800.0, 155.0), Paint(color:Color(0xff3f51b5)))
|
||||
2 | | | | paintChild RenderInkWell at Point(0.0, 81.0)
|
||||
2 | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | paintChild RenderOpacity at Point(104.83333333333334, 81.0)
|
||||
2 | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | paintChild RenderPadding at Point(121.33333333333334, 91.0)
|
||||
2 | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | paintChild RenderImage at Point(121.33333333333334, 91.0)
|
||||
2 | | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | paintChild RenderParagraph at Point(104.83333333333334, 125.0)
|
||||
2 | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | translate(104.83333333333334, 125.0)
|
||||
2 | | | | | | | translate(-104.83333333333334, -125.0)
|
||||
2 | | | | drawRect(Rect.fromLTRB(0.0, 153.0, 266.6666564941406, 155.0), Paint(color:Color(0xffff4081)))
|
||||
2 | | | | paintChild RenderInkWell at Point(266.6666666666667, 81.0)
|
||||
2 | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | paintChild RenderOpacity at Point(360.0, 81.0)
|
||||
2 | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | saveLayer(null, Paint(color:Color(0xb3000000)))
|
||||
2 | | | | | | paintChild RenderPadding at Point(388.0, 91.0)
|
||||
2 | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | paintChild RenderImage at Point(388.0, 91.0)
|
||||
2 | | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | paintChild RenderParagraph at Point(360.0, 125.0)
|
||||
2 | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | translate(360.0, 125.0)
|
||||
2 | | | | | | | translate(-360.0, -125.0)
|
||||
2 | | | | | | restore
|
||||
2 | | | | paintChild RenderInkWell at Point(533.3333333333334, 81.0)
|
||||
2 | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | paintChild RenderOpacity at Point(630.6666666666667, 81.0)
|
||||
2 | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | saveLayer(null, Paint(color:Color(0xb3000000)))
|
||||
2 | | | | | | paintChild RenderPadding at Point(654.6666666666667, 91.0)
|
||||
2 | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | paintChild RenderImage at Point(654.6666666666667, 91.0)
|
||||
2 | | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | paintChild RenderParagraph at Point(630.6666666666667, 125.0)
|
||||
2 | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | translate(630.6666666666667, 125.0)
|
||||
2 | | | | | | | translate(-630.6666666666667, -125.0)
|
||||
2 | | | | | | restore
|
||||
2 | | | paintChild RenderPositionedBox at Point(310.0, 155.0)
|
||||
2 | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | paintChild RenderParagraph at Point(310.0, 343.5)
|
||||
2 | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | translate(310.0, 343.5)
|
||||
2 | | | | | translate(-310.0, -343.5)
|
||||
2 | | paintChild RenderDecoratedBox at Point(0.0, 0.0)
|
||||
2 | | | TestPaintingCanvas() 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 | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | paintChild RenderConstrainedBox at Point(8.0, 25.0)
|
||||
2 | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | paintChild RenderPadding at Point(8.0, 39.0)
|
||||
2 | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | paintChild RenderParagraph at Point(32.0, 39.0)
|
||||
2 | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0
|
||||
2 | | | | | | | translate(32.0, 39.0)
|
||||
2 | | | | | | | translate(-32.0, -39.0)
|
||||
------------------------------------------------------------------------
|
||||
PAINTED 2 FRAMES
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user