【自学 Flutter】18 TabBar、TabBarView
removeTop: true,
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(20.0),
color: Colors.blue,
child:
Row(
children: <Widget>[
ClipOval(
child: Image.network("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3024387196,1621670548&fm=27&gp=0.jpg",width: 80.0,),
),
Container(
margin: EdgeInsets.only(left: 50.0),
child: Text("无名氏",style: TextStyle(
fontSize: 20.0,
color: Colors.white
),),
),
],
),
),
Expanded(
child: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.person,color: Colors.orange,),
title: Text("个人信息"),
onTap: (){},
),
ListTile(
leading: Icon(Icons.wallpaper,color: Colors.orange,),
title: Text("我的相册"),
onTap: (){},
),
ListTile(
leading: Icon(Icons.wallpaper,color: Colors.orange,),
tit
le: Text("我的相册"),
onTap: (){},
),
ListTile(
leading: Icon(Icons.settings,color: Colors.orange,),
title: Text("设置"),
onTap: (){},
),
],
),
)
],
)
),
);
}
}
2.解释源代码
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin{
//声明 TabController
TabController tabController;
//
List<String> list = ["首页","追番","历史"];
@override
void initState() {
super.initState();
//创建 TabController
tabController = TabController(length: list.length, vsync: this);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("导航栏名称"),
leading: Builder(builder: (context){
return IconButton(
icon: Icon(Icons.dehaze,color: Colors.white,),
onPressed: (){
Scaffold.of(context).openDrawer();
},
);
}),
actions: <Widget>[
IconButton(
icon:Icon(Icons.share),
color: Colors.white,
onPressed: (){},
),
],
//生成 Tab 菜单
bottom: TabBar(
tabs: list.map( (e)=> Tab(text: e) ).toList(),
controller: tabController,
),
),
drawer: MyDrawer(),
body: TabBarView(
//通过监听切换 Tab 页
controller: tabController,
//创建 3 个 Tab 页
children: list.map((e){
return Container(
alignment: Alignment.center,
child: Text(e),
);
}).toList(),
),
//底部导航栏
bottomNavigationBar: BottomAppBar(
//背景颜色
color: Colors.orange,
//底部导航栏留个圆形的空位
shape: CircularNotchedRectangle(),
child: Row(
//横向平分空间
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(icon: Icon(Icons.group_work,color: Colors.white,), onPressed: (){}),
//该位置留空
SizedBox(),
IconButton(icon: Icon(Icons.apps,color: Colors.white,), onPressed: (){})
],
),
),
//浮动按钮
floatingActionButton: IconButton(icon: Icon(Icons.add_circle,color: Colors.blue),iconSize: 60,padding: EdgeInsets.all(0), onPressed: (){}),
//浮动按钮位置
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
)
);
}
}
class MyDrawer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Drawer(
child: MediaQuery.removePadding(
context: context,
removeTop: true,
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(20.0),
color: Colors.blue,
child:
Row(
children: <Widget>[
ClipOval(
child: Image.network("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3024387196,1621670548&fm=27&gp=0.jpg",width: 80.0,),
),
Container(
margin: EdgeInsets.only(left: 50.0),
child: Text("无名氏",style: TextStyle(
fontSize: 20.0,
color: Colors.white
),),
),
],
),
),
Expanded(
child: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.person,color: Colors.orange,),
title: Text("个人信息"),
onTap: (){},
),
ListTile(
leading: Icon(Icons.wallpaper,color: Colors.orange,),
title: Text("我的相册"),
onTap: (){},
),
ListTile(
leading: Icon(Icons.wallpaper,color: Colors.orange,),
title: Text("我的相册"),
onTap: (){},
),
ListTile(
leading: Icon(Icons.settings,color: Colors.orange,),
title: Text("设置"),
onTap: (){},
),
],
),
)
],
)
),
);
}
}
还未添加个人签名 2021.10.31 加入
还未添加个人简介
评论