flutter 自定义TabBar 【top 0 级别】

这篇具有很好参考价值的文章主要介绍了flutter 自定义TabBar 【top 0 级别】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

flutter 自定义TabBar 【top 0 级别】,Flutter 进阶,flutter,javascript,开发语言

在日常开发中,tab 标签选项,是一个我们特别常用的一个组件了,往往我们在一个项目中,有很多地方会使用到它,每次单独去写,真的是太繁琐,这里我会定义一个通用的tab 选择器,喜欢的朋友可以拿去试试


一、基础widget

直接先上代码

class YSTabbarWidget extends StatefulWidget {
  /// tabList
  final List<String> tabs;

  /// 是否可滑动  (居左)
  final bool? isScrollable;

  /// 高亮文字大小
  final double? textSize;

  /// 非高亮文字大小
  final double? unTextSize;

  /// 小线颜色
  final Color? tabColors;

  /// 文字高亮颜色
  final Color? labelColor;

  /// 非高亮文字颜色
  final Color? unselectedLabelColor;

  /// controller 必传
  final TabController? controller;

  /// tab间距
  final double? horizontal;

  /// 下划线颜色,根据文字大小  根据tab大小
  final double lineBottom;

  final TabBarIndicatorSize? indicatorSize;

  /// page List
  final List<Widget> tabbarViewList;
  final Function(int)? didSelectIndex;

  /// 是否显示分割线
  final bool? showLine;
  const YSTabbarWidget(
      {Key? key,
      required this.tabs,
      required this.controller,
        this.tabbarViewList = const [],
      this.unselectedLabelColor,
      this.isScrollable,
      this.textSize = 16.0,
      this.unTextSize = 16.0,
      this.tabColors,
      this.labelColor,
      this.horizontal,
      this.lineBottom = 0,
      this.indicatorSize,
      this.didSelectIndex,
      this.showLine = true})
      : super(key: key);

  
  State<YSTabbarWidget> createState() => _YSTabbarWidgetState();
}

class _YSTabbarWidgetState extends State<YSTabbarWidget> {


  
  void initState() {
    // TODO: implement initState
    super.initState();
  }



  
  Widget build(BuildContext context) {
    return Column(
      // mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        getTabbarWidget(),
        widget.showLine == true
            ? Container(
                height: 0.5,
                color: const Color(0xffe5e5e5),
              )
            : Container(),
        getTabbarViewWidget(),
      ],
    );
  }
}

通过上面的代码,我们可以看到,这里定义了很多属性,当然每个属性都有注释进行解释,这里就不赘述了。

二、tab 标签

上面的代码中,我们可以看到这个getTabbarWidget() 自定义的组件,它就是我们需要自定义的一个tab 按钮部分了

Widget getTabbarWidget() {
  return TabBar(
      isScrollable: widget.isScrollable ?? false,
      controller: widget.controller,

      indicatorColor: widget.tabColors ?? Colours.app_main,
      // indicatorWeight:10,
      indicatorSize: widget.indicatorSize ?? TabBarIndicatorSize.label,
      indicatorPadding: const EdgeInsets.only(left: 0),
      indicator: UnderlineTabIndicator(
        insets: EdgeInsets.only(bottom: widget.lineBottom),
        borderRadius: const BorderRadius.all(Radius.circular(1)),
        borderSide: BorderSide(
          color: widget.tabColors ?? Colours.app_main,
          width: 2, //高度
        ),
      ),
      labelColor: widget.labelColor ?? Colours.app_main,
      unselectedLabelColor: widget.unselectedLabelColor ?? Colours.textBlack3,
      labelPadding:
          EdgeInsets.symmetric(horizontal: widget.horizontal ?? 20.w),
      labelStyle: TextStyle(
        fontSize: widget.textSize,
        fontWeight: FontWeight.w600,
      ),
      unselectedLabelStyle: TextStyle(fontSize: widget.unTextSize),
      onTap: (value) {
        if (widget.didSelectIndex != null) {
          widget.didSelectIndex!(value);
        }
      },
      tabs: widget.tabs.map<Tab>((String tab) {
        return Tab(
          text: tab,
        );
      }).toList());
}

结合篇头的代码及注释,我们可以简单的理解上面的每一行代码。这里需要说明的是,如果你想自定义tab 的样式或者是其他的一些功能需求,都可以直接在上面的代码中进行修改调整。

有人可能会有疑问,代码的中的showLine到底判断的是啥?

widget.showLine == true
    ? Container(
        height: 0.5,
        color: const Color(0xffe5e5e5),
      )
    : Container(),

其实它就是一个分界线,可以根据自己的需求进行调整样式,也可以根据showLine 参数,进行判断是否需要添加分界线。

三、barView

既然我们封装的使用通用的tabbar,那么barview 肯定是必不可少的,接来下我们看看getTabbarViewWidget() 这个自定义的组件。

Widget getTabbarViewWidget() {
  if(widget.tabbarViewList.isNotEmpty){
    return Expanded(
      child: TabBarView(
        controller: widget.controller,
        children: widget.tabbarViewList,
      ),
    );
  }else{
    return Container();
  }
}

getTabbarViewWidget 的代码就比较少了,简单的来说,就是穿一个个上下文controller, 再传入你的widget 就可以了。

看到这里,你学废了没?


总结

简简单单一个widget,复制粘贴直接用,废话不多说,啥?没有写怎么调用?不知道怎么调用,你还是去看看前面的文章吧。文章来源地址https://www.toymoban.com/news/detail-793514.html

到了这里,关于flutter 自定义TabBar 【top 0 级别】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Flutter插件开发-(进阶篇)

    一、概述 Flutter也有自己的Dart Packages仓库。 插件的开发和复用能够提高开发效率,降低工程的耦合度 ,像网络请求(http)、用户授权(permission_handler)等客户端开发常用的功能模块,我们只需要引入对应插件就可以为项目快速集成相关能力,从而专注于具体业务功能的实现。 除

    2024年02月08日
    浏览(38)
  • Flutter开发进阶之动画

    在Flutter中,动画是至关重要的一个部分,它能够为应用程序提供更加丰富和生动的用户体验,Flutter中的动画系统是UI框架的核心功能之一,也是开发者学习Flutter框架的重要部分,由于动画原理在所有程序中都是相同的,即视觉暂留,因此理解这一原理对于更好地使用Flutter的

    2024年01月21日
    浏览(44)
  • flutter开发实战-inappwebview实现flutter与Javascript的交互JSBridge

    flutter开发实战-inappwebview实现flutter与Javascript的交互JSBridge 在使用webview中,需要实现flutter与Javascript交互,在使用webview_flutter插件的时候,整理了一下webview与Javascript的交互JSBridge,具体可以查看 https://blog.csdn.net/gloryFlow/article/details/131683122 这里使用inappwebview插件来实现flutter与

    2024年02月08日
    浏览(52)
  • Flutter开发进阶之并发操作数据库

    尽管 Flutter 本身不包含任何数据库功能,但可以使用各种第三方库和插件来在 Flutter 应用程序中实现数据库功能; 以下将使用sqflite作为例子,sqflite允许在 Flutter 应用程序中执行 SQL 查询,创建和管理数据库表,以及执行其他常见的数据库操作。 在将sqflite添加到Flutter项目的

    2024年01月17日
    浏览(41)
  • Flutter开发进阶之使用Socket实现主机服务

    在Flutter开发实践中,有一些业务是需要主从机合作搭配的服务,其中一些重要的数据和功能是交由主机进行存储和管理,从机再通过UDP和TCP与主机通讯去获得权限,一般在同一个局域网内的多端实现。 广播 在主从机未建立联系之前,主从机除了自身的权限是已知的是不知道

    2024年01月21日
    浏览(46)
  • flutter开发实战-实现webview与Javascript通信JSBridge

    flutter开发实战-实现webview与H5中Javascript通信JSBridge 在开发中,使用到webview,flutter实现webview是使用原生的插件实现,常用的有webview_flutter与flutter_inappwebview 这里使用的是webview_flutter,在iOS上,WebView小部件由WKWebView支持。在Android上,WebView小部件由WebView支持。 这里使用的是w

    2024年02月14日
    浏览(43)
  • flutter开发实战-自定义相机camera功能

    flutter开发实战-自定义相机camera功能。 Flutter 本质上只是一个 UI 框架,运行在宿主平台之上,Flutter 本身是无法提供一些系统能力,比如使用蓝牙、相机、GPS等,因此要在 Flutter 中调用这些能力就必须和原生平台进行通信。 实现相机功能,我们使用的是camera插件。 在pubspec.

    2024年02月15日
    浏览(49)
  • Flutter TabBar下方白条隐藏

    我们在设置AppBar的时候,常常用到TabBar做嵌套导航,但是由于tabbar自带下划线,会使得界面的设计不美观 这是由于我们在 MaterialApp里面的theme主题管理中开启了 useMaterial3: true ,这会导致TabBar组件样式出现下划线 解决的方案有两种 方案一 在 Themedate 里面将 useMaterial3 设置为

    2024年02月02日
    浏览(53)
  • flutter:BottomNavigationBar和TabBar

    BottomNavigationBar r和 TabBar 都是用于创建导航栏的组件,但它们有一些区别。 位置不同: BottomNavigationBar 通常位于屏幕底部,用于主要导航;而 TabBar 通常位于屏幕顶部或底部,用于切换不同的视图或页面。 样式不同: BottomNavigationBar 是一个水平的导航栏,通常包含固定数量的

    2024年02月14日
    浏览(43)
  • flutter TabBar指示器

    第一层tabView 第二层tabView 指示器: // Copyright 2018 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import ‘package:flutter/material.dart’; import ‘package:flutter/widgets.dart’; /// Used with [TabBar.indicator] to draw a horizontal line be

    2024年02月04日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包