美文网首页
flutter PageView+自定义tabLayout,联动

flutter PageView+自定义tabLayout,联动

作者: A然后呢 | 来源:发表于2020-09-14 20:33 被阅读0次

自定义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);
                    }

                  },
              ),
            )
          ],
        ),
      ),
    );
  }
  
}

相关文章

网友评论

      本文标题:flutter PageView+自定义tabLayout,联动

      本文链接:https://www.haomeiwen.com/subject/zaktyktx.html