自定义TabLayou 带控制器
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class OrderTabLayout extends StatefulWidget{
OrderTabController controller;
OrderTabLayout(this.controller);
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return OrderTabLayoutState();
}
}
class OrderTabLayoutState extends State<OrderTabLayout>{
List<_TabsBean> _Tabs;
int index=0;
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
_Tabs=[
_TabsBean(widget.controller.wait_delivery,"待发货"),
_TabsBean(widget.controller.wait_paid,"待付款"),
_TabsBean(widget.controller.wait_receive,"已发货"),
_TabsBean(0,"全部"),
];
widget.controller.refresh=(){
setState(() {});
};
widget.controller.setIndex=(v){
setState(() {
index=v;
});
};
return Container(
width: double.infinity,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
..._Tabs.map((e) => Expanded(
child: GestureDetector(
child: Container(
child: Column(
children: <Widget>[
Container(
child: Text('${e.title}${e.count>0?"(${e.count})":""}',style: TextStyle(color: Colors.white,fontSize: 13),),
),
getIndex(e.title)==index?Container(
margin: EdgeInsets.symmetric(vertical: 5),
width: 35,
height: 2,
color: Colors.white,
):Container()
],
),
),
onTap: (){
setState(() {
if(index!=getIndex(e.title)){
index=getIndex(e.title);
widget.controller.onClick(index);
}
});
},
)
)).toList(),
],
),
);
}
int getIndex(String title){
for(int i=0;i<_Tabs.length;i++){
if(title==_Tabs[i].title){
return i;
}
}
return 0;
}
}
class _TabsBean{
int count;
String title;
_TabsBean(this.count, this.title);
}
class OrderTabController{
//跳转到目标索引
ValueChanged setIndex;
//点击状态改变监听
ValueChanged onClick;
//刷新页面
VoidCallback refresh;
int wait_delivery; //待发货
int wait_paid; //待付款
int wait_receive; //已发货
OrderTabController(this.wait_delivery,this.wait_paid,this.wait_receive);
OrderTabController.init(){
wait_delivery=0;
wait_receive=0;
wait_paid=0;
}
}
联动
import 'package:flutter/material.dart';
import 'package:qingye_selected_app/widgets/order_pageview_item.dart';
import 'package:qingye_selected_app/widgets/order_tabLayout.dart';
class OrderSearchPage extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return OrderSearchPageState();
}
}
class OrderSearchPageState extends State<OrderSearchPage>{
var isPageCanChanged = true;
OrderTabController _tabController=OrderTabController.init();
PageController _pageController=PageController();
List<Widget> _pageList;
@override
void initState() {
// TODO: implement initState
super.initState();
_tabController.onClick=(v){
setToPage(v);
};
_pageList=[
OrderPageviewItem(1),
OrderPageviewItem(2),
OrderPageviewItem(3),
OrderPageviewItem(4)
];
}
setToPage(int v) async {
isPageCanChanged=false;
await _pageController.animateToPage(v, duration: Duration(milliseconds: 500), curve:Curves.ease );
isPageCanChanged=true;
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Container(
child: Column(
children: <Widget>[
Container(
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xffF400AA),
Color(0xffFD9464)
],
begin: Alignment.centerLeft,
end: Alignment.centerRight
),
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(15),bottomRight: Radius.circular(15))
),
child: SafeArea(
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('订单管理',style: TextStyle(color: Colors.white,fontSize: 18,fontWeight: FontWeight.w500),),
Container(
width: double.infinity,
padding: EdgeInsets.only(top: 30,bottom: 10,left: 10,right: 10),
child: OrderTabLayout(_tabController),
),
],
),
),
Align(
alignment: Alignment.topLeft,
child: GestureDetector(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10,vertical: 5),
child: Icon(Icons.arrow_back_ios,size: 18,color: Colors.white,),
),
onTap: (){
Navigator.pop(context);
},
),
),
],
)
),
),
Expanded(
child: PageView.builder(
// physics: NeverScrollableScrollPhysics(), //禁止滑动
controller: _pageController,
itemCount: _pageList.length,
itemBuilder: (context,index){
return _pageList[index];
},
onPageChanged: (index){
if (isPageCanChanged) {//由于pageview切换是会回调这个方法,又会触发切换tabbar的操作,所以定义一个flag,控制pageview的回调
_tabController.setIndex(index);
}
},
),
)
],
),
),
);
}
}