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'),

                                      ),

                                    )

                                  ],

                                ),

                              )

                            ],

                          ),

                        ]))

                  ],

                ),

              ),

            ),

          ],

        ));

  }

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要从另一个页面跳转到TabBarTabBarView的页面,您可以使用Flutter的导航机制。以下是一个简单的示例: 假设您有两个页面:HomePage和TabbedPage。HomePage包含一个按钮,点击该按钮将导航到TabbedPage,TabbedPage包含TabBarTabBarView,每个标签对应一个页面。 在HomePage,您可以使用Navigator.push方法跳转到TabbedPage: ```dart import 'package:flutter/material.dart'; import 'tabbed_page.dart'; class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home'), ), body: Center( child: RaisedButton( child: Text('Go to Tabbed Page'), onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => TabbedPage()), ); }, ), ), ); } } void main() { runApp(MaterialApp( home: HomePage(), )); } ``` 在TabbedPage,您可以创建一个DefaultTabController来管理TabBarTabBarView,并在TabBar定义标签。每个标签对应一个页面。 ```dart import 'package:flutter/material.dart'; import 'tab_page.dart'; class TabbedPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Tabbed Page'), bottom: TabBar( tabs: [ Tab(text: 'Page 1'), Tab(text: 'Page 2'), ], ), ), body: TabBarView( children: [ TabPage(title: 'Page 1'), TabPage(title: 'Page 2'), ], ), ); } } class TabPage extends StatelessWidget { final String title; TabPage({this.title}); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Text(title), ), ); } } ``` 在上面的示例,TabbedPage使用TabBarTabBarView来展示两个页面。每个页面由TabPage小部件表示。您可以根据实际需求自定义这些页面。 当您从HomePage点击按钮跳转到TabbedPage时,将会显示TabBarTabBarView,并且您可以在TabBar进行不同标签页之间的切换。 希望对您有所帮助!如果有任何其他问题,请随时提问。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值