flutter body 中使用TabBar和TabBarView

写这篇文章的原因是因为我在开发过程中遇到了需要再tab上面有其他样式的的内容,但是在appBar中又无法做(个人不会写),百度了查了一天半,才根据一个属性完成了想要的效果,所以才有了这篇问题。

效果图

代码 

 红色为重点

 

 Widget build(BuildContext context) {

    return Scaffold(

        backgroundColor: Colors.transparent,

        resizeToAvoidBottomInset: false,

        appBar: PreferredSize(

          preferredSize: Size.fromHeight(50),

          child: Container(

              constraints: BoxConstraints.expand(

                  height: ScreenUtil().setHeight(80),

                  width: MediaQuery.of(context).size.width),

              //设置背景图片

              decoration: const BoxDecoration(

                image: DecorationImage(

                    image:

                        AssetImage('lib/src/images/productSwitching/toubu.png'),

                    fit: BoxFit.fitWidth),

              ),

              alignment: Alignment.center,

              child: AppBar(

                  backgroundColor: Colors.transparent,

                  elevation: 0,

                  actions: const [],

                  centerTitle: true,

                  automaticallyImplyLeading: false,

                  titleSpacing: 0,

                  title: const Text(

                    '设置',

                    style: TextStyle(

                      color: Color.fromRGBO(255, 255, 255, 1),

                      fontSize: 16,

                    ),

                    textAlign: TextAlign.center,

                  ))),

        ),

        body: Column(

          children: [

            Container(

                child: Column(children: [

              Stack(

                children: [

                  Image(

                    image: const AssetImage(

                        'lib/src/images/productSwitching/dibu.png'),

                    height: ScreenUtil().setHeight(88),

                    width: ScreenUtil().setWidth(375),

                    fit: BoxFit.fitWidth,

                  ),

                  Positioned(

                    bottom: 0,

                    left: 5,

                    child: Container(

                      // margin: const EdgeInsets.only(left: 5, right: 5),

                      padding: const EdgeInsets.only(left: 10, right: 10),

                      constraints: BoxConstraints.expand(

                          height: ScreenUtil().setHeight(72),

                          width: MediaQuery.of(context).size.width - 10),

                      //设置背景图片

                      decoration: const BoxDecoration(

                        image: DecorationImage(

                            image: AssetImage(

                                'lib/src/images/productSwitching/zixunjieshao.png'),

                            fit: BoxFit.fitWidth),

                      ),

                      alignment: Alignment.center,

                      child: const Text(

                        '      我的走的太快,灵魂都跟不上了。低头需要有勇气,抬头需要有底气。事事有回应,件件有着落,凡事有交代。',

                        style: TextStyle(

                            color: Colors.white,

                            fontSize: 13,

                            fontWeight: FontWeight.bold),

                      ),

                    ),

                  )

                ],

              ),

             ])),

            Container(

              decoration: const BoxDecoration(

                borderRadius: BorderRadius.only(

                  topLeft: Radius.circular(20),

                  topRight: Radius.circular(20),

                ),

              ),

              child: DefaultTabController(

                length: 7,

                child: Column(

                  children: [

                    TabBar(

                      labelColor: Color.fromRGBO(232, 19, 36, 1),

                      labelStyle: const TextStyle(fontWeight: FontWeight.bold),

                      unselectedLabelColor: const Color.fromRGBO(34, 34, 34, 1),

                      unselectedLabelStyle: const TextStyle(

                          fontWeight: FontWeight.normal, fontSize: 14),

                      indicatorColor: Colors.red,

                      indicatorSize: TabBarIndicatorSize.label,

                      isScrollable: true, //多个按钮可以滑动

                      tabs: const <Widget>[

                        Tab(text: "1"),

                        Tab(text: "2"),

                        Tab(text: "2"),

                        Tab(text: "4"),

                        Tab(text: "5"),

                        Tab(text: "6"),

                        Tab(text: "7"),

                      ],

                      onTap: (value) {

                        setState(() {

                          newsType = value;

                          curPage = 1;

                          pages = 1;

                          AllFunctionsFn();

                          // _cellForRowAllContent;

                          // _cellForRowComplianceForum;

                        });

                      },

                    ),

                    Container(

                        height: MediaQuery.of(context).size.height - 300,

                        child: TabBarView(children: <Widget>[

                          ListView(

                            children: [

                              Container(

                                padding: const EdgeInsets.all(14),

                                height: MediaQuery.of(context).size.height,

                                child: EasyRefresh(

                                  controller: _controller,

                                  header: const ClassicHeader(),

                                  footer: const ClassicFooter(),

                                  onRefresh: () async {

                                    await Future.delayed(

                                        const Duration(seconds: 1));

                                    if (!mounted) {

                                      return;

                                    }

                                    setState(() {

                                      curPage = 1;

                                    });

                                    _controller.finishRefresh();

                                    _controller.resetFooter();

                                  },

                                  onLoad: () async {

                                    await Future.delayed(

                                        const Duration(seconds: 1));

                                    if (!mounted) {

                                      return;

                                    }

                                    setState(() {

                                      if (curPage < pages) {

                                        curPage += 1;

                                        AllFunctionsFn();

                                      }

                                    });

                                    _controller.finishLoad(curPage >= pages

                                        ? IndicatorResult.noMore

                                        : IndicatorResult.success);

                                  },

                                  child:Text('tba1'),

                                ),

                              )

                            ],

                          ),

                          ListView(

                            children: [

                              Container(

                                padding: const EdgeInsets.only(

                                    left: 14, right: 14, top: 14, bottom: 14),

                                child: Column(

                                  children: [

                                    Image(

                                      image: const AssetImage(

                                          'lib/src/images/datuhegui.png'),

                                      height: ScreenUtil().setHeight(135),

                                    ),

                                    Container(

                                      height:

                                          MediaQuery.of(context).size.height -

                                              135,

                                      child: EasyRefresh(

                                        controller: _controller,

                                        header: const ClassicHeader(),

                                        footer: const ClassicFooter(),

                                        onRefresh: () async {

                                          await Future.delayed(

                                              const Duration(seconds: 1));

                                          if (!mounted) {

                                            return;

                                          }

                                          setState(() {

                                            curPage = 1;

                                          });

                                          _controller.finishRefresh();

                                          _controller.resetFooter();

                                        },

                                        onLoad: () async {

                                          await Future.delayed(

                                              const Duration(seconds: 1));

                                          if (!mounted) {

                                            return;

                                          }

                                          setState(() {

                                            if (curPage < pages) {

                                              curPage += 1;

                                              AllFunctionsFn();

                                            }

                                          });

                                          _controller.finishLoad(

                                              curPage >= pages

                                                  ? IndicatorResult.noMore

                                                  : IndicatorResult.success);

                                        },

                                        child:Text('tba2'),

                                      ),

                                    )

                                  ],

                                ),

                              )

                            ],

                          ),

                          ListView(

                            children: [

                              Container(

                                padding: const EdgeInsets.only(

                                    left: 14, right: 14, top: 14, bottom: 14),

                                child: Column(

                                  children: [

                                    Image(

                                      image: const AssetImage(

                                          'lib/src/images/datushalong.png'),

                                      height: ScreenUtil().setHeight(135),

                                    ),

                                    Container(

                                      height:

                                          MediaQuery.of(context).size.height -

                                              135,

                                      child: EasyRefresh(

                                        controller: _controller,

                                        header: const ClassicHeader(),

                                        footer: const ClassicFooter(),

                                        onRefresh: () async {

                                          await Future.delayed(

                                              const Duration(seconds: 1));

                                          if (!mounted) {

                                            return;

                                          }

                                          setState(() {

                                            curPage = 1;

                                          });

                                          _controller.finishRefresh();

                                          _controller.resetFooter();

                                        },

                                        onLoad: () async {

                                          await Future.delayed(

                                              const Duration(seconds: 1));

                                          if (!mounted) {

                                            return;

                                          }

                                          setState(() {

                                            if (curPage < pages) {

                                              curPage += 1;

                                              AllFunctionsFn();

                                            }

                                          });

                                          _controller.finishLoad(

                                              curPage >= pages

                                                  ? IndicatorResult.noMore

                                                  : IndicatorResult.success);

                                        },

                                       child:Text('tba3'),

                                      ),

                                    )

                                  ],

                                ),

                              )

                            ],

                          ),

                          ListView(

                            children: [

                              Container(

                                padding: const EdgeInsets.only(

                                    left: 14, right: 14, top: 14, bottom: 14),

                                child: Column(

                                  children: [

                                    Image(

                                      image: const AssetImage(

                                          'lib/src/images/datuhongguan.png'),

                                      height: ScreenUtil().setHeight(135),

                                    ),

                                    Container(

                                      height:

                                          MediaQuery.of(context).size.height -

                                              135,

                                      child: EasyRefresh(

                                        controller: _controller,

                                        header: const ClassicHeader(),

                                        footer: const ClassicFooter(),

                                        onRefresh: () async {

                                          await Future.delayed(

                                              const Duration(seconds: 1));

                                          if (!mounted) {

                                            return;

                                          }

                                          setState(() {

                                            curPage = 1;

                                          });

                                          _controller.finishRefresh();

                                          _controller.resetFooter();

                                        },

                                        onLoad: () async {

                                          await Future.delayed(

                                              const Duration(seconds: 1));

                                          if (!mounted) {

                                            return;

                                          }

                                          setState(() {

                                            if (curPage < pages) {

                                              curPage += 1;

                                              AllFunctionsFn();

                                            }

                                          });

                                          _controller.finishLoad(

                                              curPage >= pages

                                                  ? IndicatorResult.noMore

                                                  : IndicatorResult.success);

                                        },

                                       child:Text('tba4'),

                                      ),

                                    )

                                  ],

                                ),

                              )

                            ],

                          ),

                          ListView(

                            children: [

                              Container(

                                padding: const EdgeInsets.only(

                                    left: 14, right: 14, top: 14, bottom: 14),

                                child: Column(

                                  children: [

                                    Image(

                                      image: const AssetImage(

                                          'lib/src/images/kehudatu.png'),

                                      height: ScreenUtil().setHeight(135),

                                    ),

                                    Container(

                                      height:

                                          MediaQuery.of(context).size.height -

                                              135,

                                      child: EasyRefresh(

                                        controller: _controller,

                                        header: const ClassicHeader(),

                                        footer: const ClassicFooter(),

                                        onRefresh: () async {

                                          await Future.delayed(

                                              const Duration(seconds: 1));

                                          if (!mounted) {

                                            return;

                                          }

                                          setState(() {

                                            curPage = 1;

                                          });

                                          _controller.finishRefresh();

                                          _controller.resetFooter();

                                        },

                                        onLoad: () async {

                                          await Future.delayed(

                                              const Duration(seconds: 1));

                                          if (!mounted) {

                                            return;

                                          }

                                          setState(() {

                                            if (curPage < pages) {

                                              curPage += 1;

                                              AllFunctionsFn();

                                            }

                                          });

                                          _controller.finishLoad(

                                              curPage >= pages

                                                  ? IndicatorResult.noMore

                                                  : IndicatorResult.success);

                                        },

                                        child:Text('tba5'),

                                      ),

                                    )

                                  ],

                                ),

                              )

                            ],

                          ),

                          ListView(

                            children: [

                              Container(

                                padding: const EdgeInsets.only(

                                    left: 14, right: 14, top: 14, bottom: 14),

                                child: Column(

                                  children: [

                                    Image(

                                      image: const AssetImage(

                                          'lib/src/images/daxiaobao.png'),

                                      height: ScreenUtil().setHeight(135),

                                    ),

                                    Container(

                                      height:

                                          MediaQuery.of(context).size.height -

                                              135,

                                      child: EasyRefresh(

                                        controller: _controller,

                                        header: const ClassicHeader(),

                                        footer: const ClassicFooter(),

                                        onRefresh: () async {

                                          await Future.delayed(

                                              const Duration(seconds: 1));

                                          if (!mounted) {

                                            return;

                                          }

                                          setState(() {

                                            curPage = 1;

                                          });

                                          _controller.finishRefresh();

                                          _controller.resetFooter();

                                        },

                                        onLoad: () async {

                                          await Future.delayed(

                                              const Duration(seconds: 1));

                                          if (!mounted) {

                                            return;

                                          }

                                          setState(() {

                                            if (curPage < pages) {

                                              curPage += 1;

                                              AllFunctionsFn();

                                            }

                                          });

                                          _controller.finishLoad(

                                              curPage >= pages

                                                  ? IndicatorResult.noMore

                                                  : IndicatorResult.success);

                                        },

                                       child:Text('tba6'),

                                      ),

                                    )

                                  ],

                                ),

                              )

                            ],

                          ),

                          ListView(

                            children: [

                              Container(

                                padding: const EdgeInsets.only(

                                    left: 14, right: 14, top: 14, bottom: 14),

                                child: Column(

                                  children: [

                                    Container(

                                      height:

                                          MediaQuery.of(context).size.height,

                                      child: EasyRefresh(

                                        controller: _controller,

                                        header: const ClassicHeader(),

                                        footer: const ClassicFooter(),

                                        onRefresh: () async {

                                          await Future.delayed(

                                              const Duration(seconds: 1));

                                          if (!mounted) {

                                            return;

                                          }

                                          setState(() {

                                            curPage = 1;

                                          });

                                          _controller.finishRefresh();

                                          _controller.resetFooter();

                                        },

                                        onLoad: () async {

                                          await Future.delayed(

                                              const Duration(seconds: 1));

                                          if (!mounted) {

                                            return;

                                          }

                                          setState(() {

                                            if (curPage < pages) {

                                              curPage += 1;

                                              AllFunctionsFn();

                                            }

                                          });

                                          _controller.finishLoad(

                                              curPage >= pages

                                                  ? IndicatorResult.noMore

                                                  : IndicatorResult.success);

                                        },

                                        child:Text('tba7'),

                                      ),

                                    )

                                  ],

                                ),

                              )

                            ],

                          ),

                        ]))

                  ],

                ),

              ),

            ),

          ],

        ));

  }

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值