flutter TabBar含有背景图的demo

已于 2023-06-08 10:20:43 修改
阅读量437 收藏 3
点赞数
文章标签： flutter 前端
于 2023-06-08 10:07:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47985673/article/details/131101858
版权

效果图：

 源代码入下：

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: DefaultTabController(

        length: 4,

        child: Column(

          children: [

            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/dibu.png'),

                    fit: BoxFit.fitWidth),

              ),

              child: TabBar(

                labelPadding: EdgeInsets.only(left: 5),//tabs间距

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

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

                unselectedLabelColor: Colors.white,

                unselectedLabelStyle: const TextStyle(

                    fontWeight: FontWeight.normal, fontSize: 14),

                indicatorColor: Colors.red,               

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

                indicatorPadding: EdgeInsets.zero, //指示器距离

                indicator: const BoxDecoration(), //指示器隐藏

                tabs: <Widget>[

                  Container(

                    margin: prodAssetType == '0'

                        ? const EdgeInsets.only(top: 11)

                        : const EdgeInsets.only(top: 0),

                    constraints: BoxConstraints.expand(

                        height: prodAssetType == '0'

                            ? ScreenUtil().setHeight(57)

                            : ScreenUtil().setHeight(46),

                        width: ScreenUtil().setWidth(104)),

                    //设置背景图片

                    decoration: BoxDecoration(

                      image: DecorationImage(

                          image: prodAssetType == '0'

                              ? const AssetImage(

                                  'lib/src/images/productSwitching/quanbuchanpin.png')

                              : const AssetImage(

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

                          fit: BoxFit.fitWidth),

                    ),

                    alignment: Alignment.center,

                    child: const Text('全部产品'),

                  ),

                  Container(

                    margin: prodAssetType == '1'

                        ? const EdgeInsets.only(top: 11)

                        : const EdgeInsets.only(top: 0),

                    constraints: BoxConstraints.expand(

                        height: prodAssetType == '1'

                            ? ScreenUtil().setHeight(57)

                            : ScreenUtil().setHeight(46),

                        width: ScreenUtil().setWidth(104)),

                    //设置背景图片

                    decoration: BoxDecoration(

                      image: DecorationImage(

                          image: prodAssetType == '1'

                              ? const AssetImage(

                                  'lib/src/images/productSwitching/quanbuchanpin.png')

                              : const AssetImage(

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

                          fit: BoxFit.fitWidth),

                    ),

                    alignment: Alignment.center,

                    child: const Text('现金管理'),

                  ),

                  Container(

                    margin: prodAssetType == '2'

                        ? const EdgeInsets.only(top: 11)

                        : const EdgeInsets.only(top: 0),

                    constraints: BoxConstraints.expand(

                        height: prodAssetType == '2'

                            ? ScreenUtil().setHeight(57)

                            : ScreenUtil().setHeight(46),

                        width: ScreenUtil().setWidth(104)),

                    //设置背景图片

                    decoration: BoxDecoration(

                      image: DecorationImage(

                          image: prodAssetType == '2'

                              ? const AssetImage(

                                  'lib/src/images/productSwitching/quanbuchanpin.png')

                              : const AssetImage(

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

                          fit: BoxFit.fitWidth),

                    ),

                    alignment: Alignment.center,

                    child: const Text('固定收益'),

                  ),

                  Container(

                    margin: prodAssetType == '3'

                        ? const EdgeInsets.only(top: 11)

                        : const EdgeInsets.only(top: 0),

                    constraints: BoxConstraints.expand(

                        height: prodAssetType == '3'

                            ? ScreenUtil().setHeight(57)

                            : ScreenUtil().setHeight(46),

                        width: ScreenUtil().setWidth(104)),

                    //设置背景图片

                    decoration: BoxDecoration(

                      image: DecorationImage(

                          image: prodAssetType == '3'

                              ? const AssetImage(

                                  'lib/src/images/productSwitching/quanbuchanpin.png')

                              : const AssetImage(

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

                          fit: BoxFit.fitWidth),

                    ),

                    alignment: Alignment.center,

                    child: const Text('权益投资'),

                  ),

                ],

                onTap: (value) {

                  setState(() {

                    prodAssetType = value.toString();

                    requestForProductList();

                  });

                },

              ),

            ),

            Container(

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

                child: TabBarView(children: <Widget>[

                  ListView(

                    children: [

                      Container(

                        padding: const EdgeInsets.only(

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

                        child: Column(

                          children: [

                            Container(

                              child: EasyRefresh(

                                controller: _controller,

                                child: ListView.builder(

                                  shrinkWrap: true,

                                  physics: NeverScrollableScrollPhysics(),

                                  itemCount: dataList.length,

                                  itemBuilder: _cellForRow,//遍历数据的方法，需要自行遍历

                                ),

                              ),

                            )

                          ],

                        ),

                      )

                    ],

                  ),

                  ListView(

                    children: [

                      Container(

                        padding: const EdgeInsets.only(

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

                        child: Column(

                          children: [

                            Container(

                              child: EasyRefresh(

                                controller: _controller,

                                child: ListView.builder(

                                  shrinkWrap: true,

                                  physics: NeverScrollableScrollPhysics(),

                                  itemCount: dataList.length,

                                  itemBuilder: _cellForRow,

                                ),

                              ),

                            )

                          ],

                        ),

                      )

                    ],

                  ),

                  ListView(

                    children: [

                      Container(

                        padding: const EdgeInsets.only(

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

                        child: Column(

                          children: [

                            Container(

                              child: EasyRefresh(

                                controller: _controller,

                                child: ListView.builder(

                                  shrinkWrap: true,

                                  physics: NeverScrollableScrollPhysics(),

                                  itemCount: dataList.length,

                                  itemBuilder: _cellForRow,

                                ),

                              ),

                            )

                          ],

                        ),

                      )

                    ],

                  ),

                  ListView(

                    children: [

                      Container(

                        padding: const EdgeInsets.only(

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

                        child: Column(

                          children: [

                            Container(

                              child: EasyRefresh(

                                controller: _controller,

                                child: ListView.builder(

                                  shrinkWrap: true,

                                  physics: NeverScrollableScrollPhysics(),

                                  itemCount: dataList.length,

                                  itemBuilder: _cellForRow,

                                ),

                              ),

                            )

                          ],

                        ),

                      )

                    ],

                  ),

                ]))

          ],

        ),

      ),

    );

  }

Stop.婷
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flutter TabBar 实战使用技巧
智玲君
01-15 1306
Tabbar属性介绍： const TabBar({ Key key, @required this.tabs,//必须实现的，设置需要展示的tabs，最少需要两个 this.controller, this.isScrollable = false,//是否需要滚动，true为需要 this.indicatorColor,//选中下划线的颜色 this.indicatorWeight = 2.0,//选中下划线的高度，值越大高度越高，默认为2 thi
flutter控件----滑动图片背景的TabBar+TabBarView实现
姜澜的博客
05-24 3482
一、概述 项目要求实现以下效果： TabBar选中状态有一个背景图片，TabBarView翻页的时候会跟随移动。 本来想直接使用TabBar的indicator自定义为一个背景图片，这样就能非常方便的完成效果，结果发现可以自定义为带边框的Decoration，但是不能自定义为图片，否则就会报错。 然而自定义view实现起来又不是特别容易和方便，于是乎就想直接在TabBar外边加一个会移动的图片不...
flutter全屏背景图(包括appbar和状态栏)以及沉浸状态栏的设置
新技术革命
04-23 8220
设置背景图还是挺简单的，直接container里加个decration然后加个图片就行了，就像这样 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: '
Flutter 项目实战 05AppBar 的背景图片，沉浸式状态栏背景
最新发布
2401_84520093的博客
04-30 166
【代码】Flutter 项目实战 05AppBar 的背景图片，沉浸式状态栏背景。
设置tabbar有被选中的效果，添加背景
izhangtt的博客
03-31 321
//设置tabbar有被选中的效果，添加背景  self.tabBar.selectionIndicatorImage = [UIImage imageNamed:@"tabon_bg"];
tabbar修改背景点击换图 navbar修改背景
lhch的专栏
10-02 1039
@implementation MyNav  (一个合用navigationbar和tabbar的类) 修改tabbar的背景图片 Java代码   - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation   {       //
7、tabbar学习
huangcheng42123的博客
11-23 532
目录 一、tabbar学习... 1 二、微信开放能力button按钮-获取用户信息... 3 三、新建联系客户页面... 10 四、剪贴板使用... 14 五、拨打电话... 15 六、微信开放能力button按钮-意见与反馈... 16 一、tabbar学习 注：一下的代码是在《5、列表学习以及本地数据读取》基础上修改的 1、官方说明文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configura..
Flutter自定义TabBar的Indicator.zip
03-02
在本文中，我们将深入探讨如何在Flutter中自定义TabBar的Indicator，以便实现类似秒杀Tab的视觉效果。Flutter是一个由Google开发的开源UI工具包，用于构建高性能、高保真、多平台的移动应用程序。TabBar是Flutter中...
Flutter 滚动悬浮导航栏TabBar
02-11
本文将深入探讨如何在Flutter中实现滚动悬浮的导航栏，即TabBar，结合SliverAppBar、PageView和NestedScrollView等组件，为用户提供流畅的滚动体验。 一、Flutter TabBar基础 TabBar是Flutter中的一个核心组件，它...
flutter 高德地图插件demo
12-28
在本文中，我们将深入探讨如何在Flutter应用中集成和使用高德地图插件，以便为用户提供地图功能。Flutter是一款由Google开发的开源UI工具包，用于构建高性能、高保真度的跨平台移动应用。而高德地图是中国领先的数字...
android百度地图嵌入flutter demo
05-09
本示例"android百度地图嵌入flutter demo"就是为了解决这个问题，它展示了如何在Flutter应用中集成并动态更新百度地图，调通日期为2021年5月8日。 首先，我们需要理解Flutter的`Platform Channel`机制。这是Flutter...
flutter_iOSexcel_flutter_DEMO_
10-02
这个"flutter_iOSexcel_flutter_DEMO_"标题暗示我们这是一个关于在Flutter中处理iOS平台上Excel文件的示例项目。在描述中提到"flutter夸平台开发demo"，这意味着我们将探讨如何在Flutter框架下实现跨平台的开发，...
tabbar 设置背景图片
qq_28699375的博客
08-28 2620
[self.tabBar setBackgroundImage:[UIImage imageNamed:@"tabBarBackgroundImage"]]; 在项目中需要给tabbar设置背景图片，图片放置于Images.xcassets中，配置好1x，2x，3x图片，1x：320 × 98，2x：750 × 98 3x：1242 × 147  开发中，3x错给成了1242 × 98
iOS开发－设置tabBar的背景图片
kyf19920305的专栏
09-06 2316
设置tabBar的背景图片的原理是在tabBar上添加UIImageView，并且点击不同的Index则切换不同的图片。 （1）新建文件RootViewController，继承于UITabBarController，并且设置委托UITabBarControllerDelegate； （2）在AppDelegate.m中didFinishLaunchingWit
Flutter 自定义TabBar指示器(indicator)实现秒杀UI样式
上辈子作恶多端，这辈子写前端。
03-02 6979
一、话不多说，先来看下实现的交互效果，源码在文末 二、首先分解一下需求 自定义Tab指示器与Tab 当秒杀节点小于5个的时候，每一个Tab的宽度为平分屏幕宽度 当大于等于5个的时候，每一个Tab的宽度为固定宽度 1、先来看下最简单的TabBar与TabBarView需要如何实现 /// 省略若干代码... @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title:
flutter 设置背景图片
大灰狼的小绵羊哥哥的博客
11-18 8296
设置背景图片 做移动开始的朋友都知道项目中很多时候要用到用图片做背景，当然flutter也可以设置背景图片。 具体代码如下： class BackgroundImgDemo extends StatelessWidget { const BackgroundImgDemo({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Container( d.
Flutter UI基础 - 添加背景图片
迦南的专栏
07-31 1146
Flutter 中添加背景图片可以使用给Container添加decoration的方式。如下代码： body: Container( decoration: BoxDecoration( image: DecorationImage( image: AssetImage("images/main_bg_with_blank.png"), fit: BoxFit.cover, ), ), child: Column(), )
Flutter TabBar导航
10-10
好的，关于Flutter TabBar导航，我们可以通过TabBar和TabBarView来实现。 首先，需要在Scaffold的appBar属性中添加一个TabBar，然后在Scaffold的body属性中添加一个TabBarView来显示与选定选项卡对应的内容。具体实现代码如下： ``` class MyTabbedPage extends StatefulWidget { const MyTabbedPage({Key? key}) : super(key: key); @override State<MyTabbedPage> createState() => _MyTabbedPageState(); } class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin { late final TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(length: 3, vsync: this); } @override void dispose() { _tabController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('TabBar Demo'), bottom: TabBar( controller: _tabController, tabs: const [ Tab(icon: Icon(Icons.directions_car)), Tab(icon: Icon(Icons.directions_transit)), Tab(icon: Icon(Icons.directions_bike)), ], ), ), body: TabBarView( controller: _tabController, children: const [ Center( child: Text('Car'), ), Center( child: Text('Transit'), ), Center( child: Text('Bike'), ), ], ), ); } } ``` 此代码将创建一个具有三个选项卡的TabBar，并使用三个Center Widget作为TabBarView的子项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值