import 'package:flutter/material.dart';
class TapAppBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: choices.length,//这样设计的可拓展性强
child: Scaffold(
appBar: AppBar(
leading: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.arrow_back),
),
title: const Text('roadkiller'),
bottom: TabBar(
isScrollable: false,//可滚动与否
tabs: choices.map((Choice choice) {
return Tab(//顶部导航栏的结构
text: choice.title,//文字
icon: Icon(choice.icon),//图标
);
}).toList(),//注意要转成List,因为tabs里边是children:widget[]
),
),
body: TabBarView(//主体部分是TabView
children:choices.map((Choice choice) {
return Padding(//返回一个Padding
padding: const EdgeInsets.all(16.0),
child: ChoiceCard(
choice: choice,
),
);
}).toList(),//注意也是List
),
),
),
);
}
}
class Choice {
const Choice({this.title, this.icon});
final String title;
final IconData icon;
}
const List<Choice> choices = const <Choice>[//可拓展性
const Choice(title: 'Car', icon: Icons.directions_car),
const Choice(title: 'Bike', icon: Icons.directions_bike),
const Choice(title: 'Bus', icon: Icons.directions_bus),
const Choice(title: 'Walk', icon: Icons.directions_walk),
const Choice(title: 'Train', icon: Icons.directions_transit)
];
class ChoiceCard extends StatelessWidget {
const ChoiceCard({Key key, this.choice}) : super(key: key);//继承
final Choice choice;
@override
Widget build(BuildContext context) {
return Card(
color: Colors.white,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,//横向大小
crossAxisAlignment: CrossAxisAlignment.center,//纵向对齐方式
children: <Widget>[
Icon(
choice.icon,
size: 128.0,
),
Text(
choice.title,
)
]),
),
);
}
}