首页 > 建站教程 > dart >  dart笔记2:顶部tabbar正文

dart笔记2:顶部tabbar

dart笔记2:顶部tabbar
01import 'package:flutter/material.dart';
02 
03class TabbedAppBarSample extends StatelessWidget {
04  @override
05  Widget build(BuildContext context) {
06    return MaterialApp(
07        home: DefaultTabController(
08      length: choices.length,
09      child: Scaffold(
10        appBar: AppBar(
11          title: Text('Tabbed AppBar'),
12          bottom: TabBar(
13            isScrollable: true,
14            tabs: choices.map((Choice choice) {
15              return Tab(text: choice.title, icon: Icon(choice.icon));
16            }).toList(),
17          ),
18        ),
19        body: TabBarView(
20            children: choices.map((Choice choice) {
21          return Padding(
22            padding: EdgeInsets.all(16.0),
23            child: ChoiceCard(choice: choice),
24          );
25        }).toList()),
26      ),
27    ));
28  }
29}
30 
31class Choice {
32  const Choice({this.title, this.icon});
33  final String title;
34  final IconData icon;
35}
36 
37const List<Choice> choices = const <Choice>[
38  const Choice(title: 'CAR', icon: Icons.directions_car),
39  const Choice(title: 'BICYCLE', icon: Icons.directions_bike),
40  const Choice(title: 'BOAT', icon: Icons.directions_boat),
41  const Choice(title: 'BUS', icon: Icons.directions_bus),
42  const Choice(title: 'TRAIN', icon: Icons.directions_railway),
43  const Choice(title: 'WALK', icon: Icons.directions_walk)
44];
45 
46class ChoiceCard extends StatelessWidget {
47  const ChoiceCard({Key key, this.choice}) : super(key: key);
48 
49  final Choice choice;
50 
51  @override
52  Widget build(BuildContext context) {
53    final TextStyle textStyle = Theme.of(context).textTheme.bodyText1;
54    return Card(
55      color: Colors.white,
56      child: Center(
57        child: Column(
58          mainAxisSize: MainAxisSize.min,
59          crossAxisAlignment: CrossAxisAlignment.center,
60          children: <Widget>[
61            Icon(
62              choice.icon,
63              size: 128.0,
64              color: textStyle.color,
65            ),
66            Text(
67              choice.title,
68              style: textStyle,
69            )
70          ],
71        ),
72      ),
73    );
74  }
75}
76 
77void main() => runApp(TabbedAppBarSample())