flutter PageView+自定义tabLayout,联动

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

                  },
              ),
            )
          ],
        ),
      ),
    );
  }
  
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,657评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,662评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,143评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,732评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,837评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,036评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,126评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,868评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,315评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2 351