Flutter控件之Tab选项卡封装

news2024/11/26 17:28:31

Tab选项卡，这是一个非常常见且权重很高的一个组件，随便打开一个App，比如CSDN，如下图，首页顶部就是一个Tab选项卡，这个功能可以说，几乎每个App都会存在。

在Android中，我们可以使用TabLayout+ViewPager，轻松的实现一个Tab指示器+页面滑动，而在Flutter当中呢，可以很负责任的告诉大家，也是很简单的就可以实现，主要使用到了TabBar和TabBarView，举一个特别简单的例子，如下代码所示，就是非常简单的Tab选项卡+底部页面的效果。

@override
  Widget build(BuildContext context) {
    List<Widget> tabs = []; //tab指示器
    List<Widget> bodyList = []; //tab指示器下面的内容Widget
    for (int i = 0; i < 9; i++) {
      tabs.add(Tab(text: "条目$i"));
      bodyList.add(Text("条目$i"));//内容可以是任意的Widget，比如列表等
    }
    return DefaultTabController(
      // 标签数量
        length: tabs.length,
        child: Scaffold(
            appBar: TabBar(
              // 多个标签时滚动加载
                isScrollable: true,
                // 标签指示器的颜色
                indicatorColor: Colors.red,
                // 标签的颜色
                labelColor: Colors.red,
                // 未选中标签的颜色
                unselectedLabelColor: Colors.black,
                // 指示器的大小
                indicatorSize: TabBarIndicatorSize.label,
                // 指示器的权重，即线条高度
                indicatorWeight: 4.0,
                tabs: tabs),
            // 标签页所对应的页面
            body: TabBarView(children: bodyList)));
  }

代码效果如下：

在Flutter当中实现起来是不是也是非常的简单呢，既然已经如此的简单了，为什么我们还要再封装一层呢？说白了一是为了扩展，扩展一下系统无法满足的功能，二是为了调用起来得心应手。ok，废话不多说，开始今天的概述。

今天的内容大概如下：

1、封装效果一览

2、确定封装属性和拓展属性

3、源码和具体使用

4、相关总结

一、封装效果一览

所有的效果都是基于原生而实现的，如下图所示：

二、确定封装属性和拓展属性

基本上封装的效果就如上图所示，要封装哪些属性，关于系统的属性，比如指示器的颜色，标签选中和未选中的颜色等等，都可以抛出去，让使用者选择性进行使用。

而需要的拓展的属性，就使得自定义的Tab更加的灵活，满足不同的实际的需求，比如，文本指示器，图片指示器，图文指示器等等，都可以灵活的添加一下。

具体的属性如下，大家在实际封装中，可以根据自身需要来动态的灵活的设置。

属性

类型

概述

tabTitleList

List<String>

tab指示器的标题集合,文字形式

tabImageList

List<String>

tab指示器的标题集合,图片形式

tabWidgetList

List<Widget>

tab指示器的标题集合,Widget形式

tabIconAndTextList

List<TabBarBean>

tab指示器的标题集合,左图右文形式

tabBodyList

List<Widget>

tab指示器对应的页面

onPageChange

Function(int)

页面滑动回调

indicatorColor

Color

指示器的颜色

labelColor

Color

标签的颜色

unselectedLabelColor

Color

未选中标签的颜色

indicatorSize

TabBarIndicatorSize

指示器的大小 是和文字宽度一样还是充满

indicatorHeight

double

indicatorHeight

isScrollable

bool

指示器是否支持滑动

tabImageWidth

double

图片指示器的宽 仅用于图片指示器和图文指示器

tabImageHeight

double

图片指示器的高 仅用于图片指示器和图文指示器

tabIconAndTextMargin

double

左图右文指示器，icon距离文字的距离

tabHeight

double

tab高度

三、源码和具体使用

源码相对比较的简单，仅仅对TabBar和TabBarView做了简单的封装，支持了多种格式的Tab类型，由于需要Tab控制器，这里使用了有状态的StatefulWidget。源码整体如下：

import 'package:flutter/material.dart';
import 'package:vip_flutter/ui/widget/vip_text.dart';

///AUTHOR:AbnerMing
///DATE:2023/5/18
///INTRODUCE:TabBar组件

class VipTabBarView extends StatefulWidget {
  final List<String>? tabTitleList; //tab指示器的标题集合,文字形式
  final List<String>? tabImageList; //tab指示器的标题集合,图片形式
  final List<Widget>? tabWidgetList; //tab指示器的标题集合,Widget形式
  final List<VipTabBarBean>? tabIconAndTextList; //tab指示器的标题集合,左图右文形式
  final List<Widget>? tabBodyList; //tab指示器的页面
  final Function(int)? onPageChange; //页面滑动回调
  final Color? indicatorColor; //指示器的颜色
  final Color? labelColor; //标签的颜色
  final Color? unselectedLabelColor; //未选中标签的颜色
  final TabBarIndicatorSize? indicatorSize; //指示器的大小 是和文字宽度一样还是充满
  final double? indicatorHeight; //指示器的高度
  final bool? isScrollable; //指示器是否支持滑动
  final double? tabImageWidth; //图片指示器的宽 仅用于图片指示器和图文指示器
  final double? tabImageHeight; //图片指示器的高 仅用于图片指示器和图文指示器
  final double? tabIconAndTextMargin; //左图右文指示器，icon距离文字的距离
  final double? tabHeight; //tab高度

  const VipTabBarView(
      {this.tabTitleList,
      this.tabImageList,
      this.tabWidgetList,
      this.tabIconAndTextList,
      this.tabBodyList,
      this.onPageChange,
      this.indicatorColor = Colors.black,
      this.labelColor = Colors.black,
      this.unselectedLabelColor = Colors.grey,
      this.indicatorSize = TabBarIndicatorSize.tab,
      this.indicatorHeight = 2,
      this.isScrollable = true,
      this.tabImageWidth = 15,
      this.tabImageHeight = 15,
      this.tabIconAndTextMargin = 5,
      this.tabHeight = 44,
      super.key});

  @override
  State<VipTabBarView> createState() => _GWMTabBarViewState();
}

///左图右文的对象
class VipTabBarBean {
  String title;
  String icon;

  VipTabBarBean(this.title, this.icon);
}

class _GWMTabBarViewState extends State<VipTabBarView>
    with SingleTickerProviderStateMixin {
  // 标签控制器
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    // 定义控制器
    _tabController = TabController(
      vsync: this,
      length: widget.tabBodyList != null ? widget.tabBodyList!.length : 0,
    );
    // 添加监听事件
    _tabController.addListener(() {
      //滑动的索引
      if (widget.onPageChange != null && !_tabController.indexIsChanging) {
        widget.onPageChange!(_tabController.index);
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    // 杀死控制器
    _tabController.dispose();
  }

  /*
   * 指示器点击
   */
  void onPage(position) {}

  @override
  Widget build(BuildContext context) {
    List<Widget> tabList = []; //tab指示器
    List<Widget> bodyList = []; //tab指示器对应的页面
    //文字形式
    if (widget.tabTitleList != null) {
      tabList = widget.tabTitleList!
          .map((e) => Tab(
                text: e,
                height: widget.tabHeight,
              ))
          .toList();
    }
    //图片形式
    if (widget.tabImageList != null) {
      tabList = widget.tabImageList!.map((e) {
        Widget view;
        if (e.contains("http")) {
          //网络图片
          view = Image.network(
            e,
            width: widget.tabImageWidth,
            height: widget.tabImageHeight,
          );
        } else {
          view = Image.asset(
            e,
            width: widget.tabImageWidth,
            height: widget.tabImageHeight,
          );
        }
        return Tab(icon: view, height: widget.tabHeight);
      }).toList();
    }
    //自定义Widget
    if (widget.tabWidgetList != null) {
      tabList = widget.tabWidgetList!;
    }
    //左图右文形式
    if (widget.tabIconAndTextList != null) {
      tabList = widget.tabIconAndTextList!.map((e) {
        return VipText(
          e.title,
          leftIcon: e.icon,
          height: widget.tabHeight,
          leftIconWidth: widget.tabImageWidth,
          leftIconHeight: widget.tabImageHeight,
          iconMarginRight: widget.tabIconAndTextMargin,
        );
      }).toList();
    }

    //指示器对应的页面
    if (widget.tabBodyList != null) {
      bodyList = widget.tabBodyList!.map((e) => e).toList();
    }

    return Scaffold(
      appBar: TabBar(
        // 加上控制器
        controller: _tabController,
        tabs: tabList,
        // 标签指示器的颜色
        indicatorColor: widget.indicatorColor,
        // 标签的颜色
        labelColor: widget.labelColor,
        // 未选中标签的颜色
        unselectedLabelColor: widget.unselectedLabelColor,
        // 指示器的大小
        indicatorSize: widget.indicatorSize,
        // 指示器的权重，即线条高度
        indicatorWeight: widget.indicatorHeight!,
        // 多个标签时滚动加载
        isScrollable: widget.isScrollable!,
        onTap: onPage,
      ),
      body: TabBarView(
        // 加上控制器
        controller: _tabController,
        children: bodyList,
      ),
    );
  }
}

简单使用

传一个标题集合和页面集合就可以轻松实现了。

  @override
  Widget build(BuildContext context) {
    return const VipTabBarView(
      tabTitleList:  ["条目一", "条目二"],
      tabBodyList: [
        Text("第一个页面"),//可以是任意的Widget
        Text("第二个页面"),//可以是任意的Widget
      ],
    );
  }

所有案例

对应第一条的封装效果，可直接复制查看效果。

import 'package:flutter/material.dart';

import '../widget/vip_tab_bar_view.dart';
import '../widget/vip_text.dart';

///AUTHOR:AbnerMing
///DATE:2023/5/20
///INTRODUCE:TabBar组件效果页面

class TabBarPage extends StatefulWidget {
  const TabBarPage({super.key});

  @override
  State<TabBarPage> createState() => _TabBarPageState();
}

class _TabBarPageState extends State<TabBarPage> {
  @override
  Widget build(BuildContext context) {
    var tabs = ["条目一", "条目二", "条目三", "条目四", "条目五", "条目六", "条目七", "条目八"];
    var tabs2 = ["条目一", "条目二", "条目三"];
    var tabImages = [
      "https://www.vipandroid.cn/ming/pic/new_java.png",
      "https://www.vipandroid.cn/ming/pic/new_android.png",
      "https://www.vipandroid.cn/ming/pic/new_kotlin.png"
    ]; //图片指示器
    var bodyList = tabs
        .map((e) => VipText(e, backgroundColor: Colors.amberAccent))
        .toList();
    var bodyList2 = tabs2
        .map((e) => VipText(e, backgroundColor: Colors.amberAccent))
        .toList();
    return Column(children: [
      const VipText("多个Tab滑动",
          alignment: Alignment.topLeft,
          marginTop: 10,
          style: TextStyle(fontWeight: FontWeight.bold)),
      SizedBox(
          height: 80,
          child: VipTabBarView(
            tabTitleList: tabs,
            tabBodyList: bodyList,
            onPageChange: ((position) {
              //页面滑动监听
              print(position);
            }),
          )),
      const VipText("固定Tab不滑动",
          alignment: Alignment.topLeft,
          marginTop: 10,
          style: TextStyle(fontWeight: FontWeight.bold)),
      SizedBox(
          height: 80,
          child: VipTabBarView(
            tabTitleList: tabs2,
            tabBodyList: bodyList2,
            isScrollable: false,
          )),
      const VipText("修改指示器颜色",
          alignment: Alignment.topLeft,
          marginTop: 10,
          style: TextStyle(fontWeight: FontWeight.bold)),
      SizedBox(
          height: 80,
          child: VipTabBarView(
            tabTitleList: tabs2,
            tabBodyList: bodyList2,
            isScrollable: false,
            labelColor: Colors.red,
            unselectedLabelColor: Colors.black,
            indicatorColor: Colors.red,
          )),
      const VipText("修改指示器大小",
          alignment: Alignment.topLeft,
          marginTop: 10,
          style: TextStyle(fontWeight: FontWeight.bold)),
      SizedBox(
          height: 80,
          child: VipTabBarView(
            tabTitleList: tabs2,
            tabBodyList: bodyList2,
            isScrollable: false,
            labelColor: Colors.red,
            unselectedLabelColor: Colors.black,
            indicatorColor: Colors.red,
            indicatorSize: TabBarIndicatorSize.label,
          )),
      const VipText("图片指示器",
          alignment: Alignment.topLeft,
          marginTop: 10,
          style: TextStyle(fontWeight: FontWeight.bold)),
      SizedBox(
          height: 80,
          child: VipTabBarView(
            tabImageList: tabImages,
            tabBodyList: bodyList2,
            isScrollable: false,
            labelColor: Colors.red,
            unselectedLabelColor: Colors.black,
            indicatorColor: Colors.red,
            indicatorSize: TabBarIndicatorSize.label,
          )),
      const VipText("左图右文指示器",
          alignment: Alignment.topLeft,
          marginTop: 10,
          style: TextStyle(fontWeight: FontWeight.bold)),
      SizedBox(
          height: 80,
          child: VipTabBarView(
            tabIconAndTextList: [
              VipTabBarBean(
                  "Java", "https://www.vipandroid.cn/ming/pic/new_java.png"),
              VipTabBarBean("Android",
                  "https://www.vipandroid.cn/ming/pic/new_android.png"),
              VipTabBarBean("Kotlin",
                  "https://www.vipandroid.cn/ming/pic/new_kotlin.png"),
            ],
            tabBodyList: bodyList2,
            isScrollable: false,
            labelColor: Colors.red,
            unselectedLabelColor: Colors.black,
            indicatorColor: Colors.red,
            indicatorSize: TabBarIndicatorSize.label,
          ))
    ]);
  }
}

四、相关总结

在Flutter中我们使用Tab选项卡和底部的页面结合使用时，一定要考虑懒加载，否则，在有网络请求的时候，每次切换页面的时候，数据都会重新加载，这给用户体验是相当的不好，具体如何实现，大家可以去网上搜索搜索，有大把的文章概述，这里就不赘述了，好了铁子们，本篇文章就先到这里，希望可以帮助到大家。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/551623.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

“Shell“iptales防火墙设置

“Shell“iptales防火墙设置

文章目录 一.Linux防火墙基础1.1Linux包过滤防火墙概述1.2四表五链1.3规则链之间的匹配顺序1.4规则链内的匹配顺序1.5总结 二.编写防火墙规则2.1iptables防火墙的配置方法2.2规则的匹配2.3命令使用 一.Linux防火墙基础 1.1Linux包过滤防火墙概述 Linux 系统的防火墙: IP信息包…
阅读更多...
惯性导航论文详解：神经惯性定位

惯性导航论文详解：神经惯性定位

来源&#xff1a;投稿 作者&#xff1a;小灰灰 编辑&#xff1a;学姐 论文标题&#xff1a;Neural Inertial Localization 论文链接: https://arxiv.org/pdf/2203.15851v1.pdf 图1.从IMU测量到位置估计。给定惯性传感器数据&#xff08;左&#xff09;&#xff0c;我们的方法…
阅读更多...
C#，生信软件实践（04）——DNA数据库EMBL格式文件的解释器之完整源代码

C#，生信软件实践（04）——DNA数据库EMBL格式文件的解释器之完整源代码

EMBL文件的格式详解请阅读前面的文章&#xff1a; C#&#xff0c;生信软件实践&#xff08;02&#xff09;——DNA数据库EMBL格式详解及转为FASTA格式文件的源代码https://blog.csdn.net/beijinghorn/article/details/130462070 本文的代码用于&#xff1a; &#xff08;1&a…
阅读更多...
Linux---文件操作命令（cp、mv、rm）

Linux---文件操作命令（cp、mv、rm）

1. cp命令 cp命令可以用于复制文件\文件夹&#xff0c;cp命令来自英文单词&#xff1a;copy。 语法&#xff1a;cp [选项] 参数1 参数2 参数1&#xff1a;Linux路径&#xff0c;表示被复制的文件或文件夹 参数2&#xff1a;Linux路径&#xff0c;表示要复制去的地方 选…
阅读更多...
《Java 核心技术面试》课程笔记（十一）

《Java 核心技术面试》课程笔记（十一）

Java 提供了哪些 IO 方式&#xff1f; 典型回答 Java IO 基于不同的 IO 抽象模型和交互方式&#xff0c;可以分为&#xff1a; BIO&#xff0c;传统的 java.io 包&#xff0c;它基于流模型实现。 提供了我们最熟知的⼀些 IO 功能&#xff0c;比如 File 抽象、输入输出流等。交…
阅读更多...
安装编译PostgreSql15.3.0

安装编译PostgreSql15.3.0

一、下载源码 方式一 官网手动下载 https://www.postgresql.org/download/. 解压 tar -zxvf postgresql-14.2.tar.gz方式二 git clone git clone https://github.com/postgres/postgres.git解压或下载后计入postgres目录 cd postgres-15.3二、创建目录 用root账户创建 创建…
阅读更多...
[iOS开发]＜多线程-NSOperation操作队列NSOperationQueue＞

[iOS开发]＜多线程-NSOperation操作队列NSOperationQueue＞

前言 寒假期间学习过GCD。今天学习NSOperation。同样都是多线程封装&#xff0c;NSOperation和NSOperationQueue是基于GCD的更高一层的封装&#xff0c;完全的面向对象&#xff0c;相比于GCD复杂的各种API方法&#xff0c;它的优势就是更加的简单实用&#xff0c;代码的可读性…
阅读更多...
电力电子课设—数控产生PWM波——使用51单片机输出占空比可调PWM波（按钮控制、数码管显示）控制速成教程

电力电子课设—数控产生PWM波——使用51单片机输出占空比可调PWM波（按钮控制、数码管显示）控制速成教程

我们学校电气专业开始做电力电子的课设了&#xff0c;小组选了一项制作硬件电路的任务&#xff0c;里面有要求采用数控方式实现DC-DC电压变换的输出电压调节&#xff0c;数控在电路中的体现就是用单片机输出可调占空比的PWM作用于产生PWM波控制IGBT的芯片。考虑到可能有同学没接…
阅读更多...
金领冠520解密母乳源代码，助推婴配粉中国式现代化高速发展

金领冠520解密母乳源代码，助推婴配粉中国式现代化高速发展

又是一年520&#xff0c;又是一个“全国母乳喂养宣传日”。 1990年5月10日&#xff0c;为保护、促进和支持母乳喂养&#xff0c;更好地实行优生优育&#xff0c;原中华人民共和国国家卫生部召开新闻发布会&#xff0c;确立每年5月20日为“全国母乳喂养宣传日”。 那时&#x…
阅读更多...
[GXYCTF2019]BabySQli1

[GXYCTF2019]BabySQli1

拿到题目一看就是sql注入&#xff0c;所以还是老样子账号admin密码随便输入&#xff0c;回显但是密码错误 当用户名随便输入时&#xff0c;回显用户名错误&#xff0c;说明是先检测用户名&#xff0c;再检测密码 应该是存在过滤 通过burp爆破大致找出过滤字符&#xff0c;还有就…
阅读更多...
css flex布局

css flex布局

css flex布局 flex是flexible Box的缩写&#xff0c;意为“弹性布局”&#xff0c;任何一个容器都可以指定为flex布局。 当我们为父盒子设为flex布局以后&#xff0c;子元素的float、clear和vertical-align属性将失效 总结flex布局原理&#xff1a; 就是通过给父盒子添加fl…
阅读更多...
Java - AQS（一）

Java - AQS（一）

Java - AQS&#xff08;一&#xff09; 在Java中&#xff0c;AQS代表AbstractQueuedSynchronizer&#xff08;抽象队列同步器&#xff09;。AQS是Java并发包中用于构建同步器的基础框架。它提供了一种实现同步状态管理、线程等待和通知的机制。 AQS主要通过一个int类型的状态…
阅读更多...
轻松玩转开源大语言模型bloom（四）

轻松玩转开源大语言模型bloom（四）

前言 前几篇都围绕着语言模型的decoding strategy来讲述&#xff0c;今天将进入进阶篇&#xff0c;在解码策略效果有限和提示词修改也无法满意的情况下如何提升模型的效果呢&#xff1f;这时我们需要对大语言模型进行fine-tune&#xff0c;即微调。一般我们用的大语言模型都是…
阅读更多...
chatgpt赋能Python-python5个数从小到大排序

chatgpt赋能Python-python5个数从小到大排序

Python中的5个数从小到大排序 在Python中&#xff0c;排序是一个常见的操作。我们经常需要对一组数据进行排序&#xff0c;以便更方便地对数据进行分析和处理。在本文中&#xff0c;我们将探讨Python中如何排序5个数&#xff0c;具体来说&#xff0c;是从小到大排序。 介绍 …
阅读更多...
chatgpt赋能Python-python5__3

chatgpt赋能Python-python5__3

Python5%-3: 介绍和结论 什么是Python5%-3 Python5%-3是在Python 3语言版本中增加的一个新特性&#xff0c;它是Python语言中对移动开发的支持扩展&#xff0c;这个特性被称为Python5%-3。 具体来说&#xff0c;Python5%-3允许开发者能够更方便地创建移动应用程序&#xff0…
阅读更多...
大脑MRI去噪技术研究进展

大脑MRI去噪技术研究进展

导读 磁共振(MR)图像诊断的准确性取决于图像的质量&#xff0c;而图像质量下降的主要原因是由于噪声和伪影。噪声是由成像环境错误或传输系统失真所引起的。因此&#xff0c;去噪方法对提高图像质量起着重要作用。然而&#xff0c;在去噪和保留结构细节之间需要权衡。现有的大…
阅读更多...
【Linux】Linux 下的权限（初）

【Linux】Linux 下的权限（初）

d1 目录下有目录dir&#xff0c;和一个普通文件 test.c 重点看到文件的各种权限&#xff0c;拆分清晰地理解&#xff08;重&#xff09; 观察到权限和文件类型一坨除了第一列的文件类型其他的都是文件相关的权限&#xff0c;而且是三个三个分开 为什么分开呢&#xff1f;是因为…
阅读更多...
【leetcode】456. 132 模式 单调栈出栈特性

【leetcode】456. 132 模式 单调栈出栈特性

看题意是要在数组中找到一个大于左右元素波峰。 一开始看数据量是 10e5&#xff0c;还以为是 nlogn算法。没想到居然是个 n 的单调栈。 这道题利用了递减单调栈出栈的特性, 出栈元素 k、栈中某一个特定元素 j 满足 nums[j] > nums[k]&#xff0c;如果从数组后面向前遍历的…
阅读更多...
什么是uni-app？为什么要学习uni-app？

什么是uni-app？为什么要学习uni-app？

文章目录 前言 一、什么是uni-app框架&#xff1f; 二、为什么要学&#xff1f; 三、uni-app开发的适用场景是什么&#xff1f; 总结 前言 随着前端技术的不断发展进步&#xff0c;跨端开发成为了程序猿不得不面临的一个难题&#xff0c;uni-app的出现解决了程序猿不断重复…
阅读更多...
《Java 核心技术面试》课程笔记（十）

《Java 核心技术面试》课程笔记（十）

如何保证集合是线程安全的? 典型回答 Java 提供了不同层⾯的线程安全支持。 在传统集合框架内部&#xff0c;除了 Hashtable 等同步容器&#xff0c;还提供了所谓的同步包装器&#xff08;Synchronized Wrapper&#xff09;&#xff0c;我们可以调用 Collections 工具类提供…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023