先上效果图,页面贼丑,但功能正确!
在简单的单页面中会只用一个dart文件去写Row、Column、Container等Widgets。
而在复杂的应用中,单单一个页面是不够,根据不同的需要,组件化Class类复用。
首先可以根据tab的个数创建对应的Dart页面。
底部导航栏
红色圈出的是pages文件夹下bottom Tabs 4个tab文件。
//book_page.dart
import 'package:flutter/material.dart'; //每个新建的都要引入
class Book extends StatelessWidget{
@override
Widget build(BuildContext context){
return new Center(
child: Text('Book'),
);
}
}
//main.dart
//1.引入4个tab页面-相对路径和绝对路径都可以
import 'pages/home.page.dart';
import 'pages/book_page.dart';
import 'pages/movie_page.dart';
import 'pages/music_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Router',
theme: ThemeData(
primarySwatch: Colors.orange,
),
home: Homes(),//页面
//路由表设置
routes: <String, WidgetBuilder>{
'/Second':(BuildContext context) => new SecondPage(),
},
);
}
}
//2.
class Homes extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _HomesState();
}
}
//3.List<Widget>存放你的页面
//List<BottomNavigationBarItem>存放底部图标
//底部导航栏有几个图标,那么就需要添加几个BottomNavigationBarItem。不过最好不要添加过多的底部导航,最多5个。一般应该没有超过5个图标的吧。
class _HomesState extends State<Homes> {
int _currentIndex = 0;
final List<Widget> _children = [Home(), Book(), Music(), Movie()];
final List<BottomNavigationBarItem> _list = <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.book),
title: Text('Book'),
),
BottomNavigationBarItem(
icon: Icon(Icons.music_video),
title: Text('Music'),
),
BottomNavigationBarItem(
icon: Icon(Icons.movie),
title: Text('Movie'),
),
];
@override
Widget build(BuildContext context) {
return Scaffold( //构建底部导航,并添加点击事件
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
onTap: onTabTapped,
currentIndex: _currentIndex,//点击索引
items: _list,
),
body: _children[_currentIndex],
);
}
//点击事件
void onTabTapped(int index) {
//通过setState告诉Scaffold,你点击了哪一个,它在显示哪一个了
setState(() {
_currentIndex = index;
});
}
}
顶部导航栏
绿色圈出的是pages文件夹下top Tabs 3个tab文件。
import 'package:flutter/material.dart'; //依旧引入
import 'tab_bike.dart';
import 'tab_car.dart';
import 'tab_transit.dart';
当我们切换 Tab 导航栏时,Tab 的内容要跟着发生改变,这个就是需要 TabCOntroller 来完成的。想要简单地实现,使用 DefaultTabController 就可以了。
DefaultTabController(
// The number of tabs / content sections we need to display
length: 3,
child: // See the next step!
);
Tab的位置,这里的是放在了title的位置。TabBar:Tab (Icon / title ),TabBarView:Tab 页的内容
class Home extends StatelessWidget{
@override
Widget build(BuildContext context){
return new DefaultTabController(//DefaultTabController
length: 3,
child: Scaffold(
appBar: AppBar(
title: TabBar(
tabs: <Widget>[
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
)
),
body: TabBarView(
children: <Widget>[
Container(
child: TabCar(), //TabCar对应tab_car.dart的Class name
),
Container(
child: TabTransit(),//TabCar对应tab_transit.dart的Class name
),
Container(
child: TabBike(),//TabCar对应tab_bike.dart的Class name
),
],
),
),
);
}
}
这里贴出tab_bike.dart的代码
import 'package:flutter/material.dart';
class TabBike extends StatelessWidget{
@override
Widget build(BuildContext context){
return new Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.directions_bike),
Text('TabBike')
],
),
);
}
}
网友评论