1.属性介绍
const TabBar({
Key key,
@required this.tabs,//必须实现的,设置需要展示的tabs,最少需要两个
this.controller,
this.isScrollable = false,//是否需要滚动,true为需要
this.indicatorColor,//选中下划线的颜色
this.indicatorWeight = 2.0,//选中下划线的高度,值越大高度越高,默认为2
this.indicatorPadding = EdgeInsets.zero,
this.indicator,//用于设定选中状态下的展示样式
this.indicatorSize,//选中下划线的长度,label时跟文字内容长度一样,tab时跟一个Tab的长度一样
this.labelColor,//设置选中时的字体颜色,tabs里面的字体样式优先级最高
this.labelStyle,//设置选中时的字体样式,tabs里面的字体样式优先级最高
this.labelPadding,
this.unselectedLabelColor,//设置未选中时的字体颜色,tabs里面的字体样式优先级最高
this.unselectedLabelStyle,//设置未选中时的字体样式,tabs里面的字体样式优先级最高
this.dragStartBehavior = DragStartBehavior.start,
this.onTap,//点击事件
})
上代码:
import 'package:flutter/material.dart';
import 'package:flutter_widget_project/page_one.dart';
import 'package:flutter_widget_project/page_three.dart';
import 'package:flutter_widget_project/page_two.dart';
class TabViewOne extends StatefulWidget {
@override
_TabViewOneState createState() => _TabViewOneState();
}
class _TabViewOneState extends State<TabViewOne> {
List<Tab> _tabs = [];
@override
void initState() {
// TODO: implement initState
super.initState();
_tabs = [
Tab(icon: Icon(Icons.directions_car), text: "汽车"),
Tab(icon: Icon(Icons.flight), text: "飞机"),
Tab(icon: Icon(Icons.local_shipping), text: "卡车"),
Tab(icon: Icon(Icons.camera_alt), text: "相机"),
Tab(icon: Icon(Icons.camera_alt), text: "相机"),
Tab(icon: Icon(Icons.camera_alt), text: "相机"),
Tab(icon: Icon(Icons.camera_alt), text: "相机"),
];
}
Widget bodyView({bool isSame = false}){
Widget tempWidget;
if(isSame){
tempWidget = TabBarView(
children: _tabs.map((item) => Container(
child: Text(
item.text,
style: TextStyle(fontSize: 14, color: Colors.red),
),
))
.toList(),
);
}else{
tempWidget = TabBarView(
children: [
PageOne(),
Container(
child: Text("2323"),
),
Container(
child: Image.network("https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg"),
),
Container(
child: Image.asset("assets/images/c.jpg"),
),
Container(
child: Image.asset("assets/images/c.jpg"),
),
Container(
child: Image.asset("assets/images/c.jpg"),
),
Container(
child: Image.asset("assets/images/c.jpg"),
),
],
);
}
return tempWidget;
}
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: _tabs.length,
child: Scaffold(
appBar: AppBar(
title: Text("TabViewOne"),
bottom: TabBar(
isScrollable: true,
tabs: _tabs,
labelPadding: EdgeInsets.symmetric(horizontal: 30),
),
),
body: bodyView(isSame: false),
),
);
}
}