颤动箭头标签栏?

2023-12-14

How I can make the cursor of tab bar with an arrow like this? enter image description here


您可以使用自定义画家和选项卡指示器来实现您的愿望指示器。

import 'package:flutter/material.dart';

class Delete extends StatefulWidget {
  Delete({Key key}) : super(key: key);

  @override
  _DeleteState createState() => _DeleteState();
}

class _DeleteState extends State<Delete> with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            indicatorSize: TabBarIndicatorSize.tab,
            indicator: CircleTabIndicator(color: Colors.orange),
            tabs: <Widget>[
              Tab(
                child: Text(
                  'fruits',
                ),
              ),
              Tab(
                child: Text(
                  'vegetables',
                ),
              ),
              Tab(
                child: Text(
                  'berries',
                ),
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Center(child: Text('Tab 1')),
            Center(child: Text('Tab 2')),
            Center(child: Text('Tab 3')),
          ],
        ),
      ),
    );
  }
}

class CircleTabIndicator extends Decoration {
  final BoxPainter _painter;

  CircleTabIndicator({@required Color color})
      : _painter = _CirclePainter(color);

  @override
  BoxPainter createBoxPainter([onChanged]) => _painter;
}

class _CirclePainter extends BoxPainter {
  final Paint _paint;

  _CirclePainter(Color color)
      : _paint = Paint()
          ..color = color
          ..isAntiAlias = true;

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    Path _trianglePath = Path();

    _trianglePath.moveTo(cfg.size.width / 2 - 10, cfg.size.height);
    _trianglePath.lineTo(cfg.size.width / 2 + 10, cfg.size.height);
    _trianglePath.lineTo(cfg.size.width / 2, cfg.size.height - 10);
    _trianglePath.lineTo(cfg.size.width / 2 - 10, cfg.size.height);
    _trianglePath.close();
    canvas.drawPath(_trianglePath, _paint);
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

颤动箭头标签栏? 的相关文章

随机推荐

  • Tensorflow 对象检测推理在 CPU 上速度缓慢

    系统信息 您正在使用的模型的顶级目录是什么 对象检测 ssd inception v2 我是否编写了自定义代码 而不是使用 TensorFlow 中提供的常用示例脚本 No 操作系统平台和发行版 例如Linux Ubuntu 16 04 乌
  • 如何将 COM 对象 Microsoft.Office.Interop 部署到 IIS,以便我的 C# WCF 服务引用能够工作?

    当我尝试在本地计算机上从 IIS 7 运行有关 Microsoft Office Interop Outlook 的 Web 应用程序时 出现如下错误 由于以下错误 检索 CLSID 为 0006F03A 0000 0000 C000 00
  • iPhone 应用程序的大小有什么限制?

    我有一个非常大的应用程序 它有大量的图像和声音 总共有 30 MB 大小 1 官方对应用程序大小有限制吗 2 我还应该考虑其他 实际 限制吗 四处阅读 有报道称应用程序的绝对最大大小为 2GB http discussions apple
  • TableVew - 抛出 KeyEvent 时编辑单元格

    我在 TableView 上有一个事件侦听器 用于侦听键盘事件 Add event listener to table table setOnKeyTyped event gt TablePosition
  • python 打印所有函数调用以了解脚本流程

    如何打印每个函数 方法调用 我尝试过使用 python m trace trace但它也打印函数内部代码 我只想要被调用的函数名称 在代码中使用回溯会打印调用命令本身之前调用的最后一个函数 并且代码包含许多类 你可能会发现 l useful
  • Ruby 中的 __FILE__ 是什么意思?

    我在 Ruby 中经常看到这样的情况 require File dirname FILE config environment 什么是 FILE mean 它是对当前文件名的引用 在文件中foo rb FILE 将被解释为 foo rb E
  • ASP.Net MVC ActionFilterAttributes 排序全局与本地

    我想知道 ActionFilterAttribute 属性的执行是否有顺序 我猜测本地的 在控制器的操作上定义的 ActionFilterAttribute 正在按照在操作上定义的顺序执行 然而 有人不知道全局过滤器是否先于本地过滤器应用
  • 仅在登录页面设置 SSL 页面

    我想仅为登录页面设置 SSL 页面 我该怎么做 我参考这篇文章 http weblogs asp net scottgu archive 2007 04 06 tip trick enabling ssl on iis7 using sel
  • python qt,在另一个小部件(声子)上方显示文本/标签

    我正在使用 PySide 制作一个视频播放器 它是与 Qt 框架的 python 绑定 我正在使用声子 一个模块 来显示视频 我想在视频上方显示文本作为字幕 如何在我的声子小部件上方放置另一个小部件 opengl 是一个选项吗 如果您只是创
  • 如何对 google LatLng 对象进行字符串化?

    我正在使用谷歌地图 API 并尝试对点数组进行字符串化 每个点都有纬度和经度 我想要做的是将数据字符串化并将其存储在数据库中 以便以后检索 问题是 由于谷歌地图存储和使用数据的方式 结果JSON stringify有时是奇怪的随机 例如 有
  • 使用分号和大括号的 C# 命名空间声明有什么区别?

    我注意到 C 中命名空间声明的两种不同方法 namespace FirstProgram and namespace FirstProgram 我正在寻找有关 C 中两种类型的命名空间声明的主要区别和用途的信息 示例 带有分号 namesp
  • Ajax 将文件从浏览器上传到 FTP 服务器

    是否可以使用ajax将文件从浏览器上传到FTP服务器 不可以 浏览器不提供允许从 JavaScript 写入 FTP 的 API 你可以将文件发布到 HTTP 端点然后使用服务器端代码将其推送到您的 FTP 服务器
  • 测量 Angular 中 svg 元素的尺寸

    我正在尝试使用 SVG 在 Angular 中创建一个类似仪表的组件来绘制形状 我想将文本放在矩形内居中 文本将根据仪表的值而变化 因此 我想调整字体大小以使该值适合矩形 或者 我可以调整数字格式 例如 如果字符串太长 则使用科学记数法 使
  • 使用 svndumpfilter 包含多个文件夹

    我在服务器中创建了一个名为 allProjects 的存储库 以下是 allProjects 结构 所有项目 Projects projectA projectB projectC projectD projectE 现在我正在尝试创建另一
  • 当 ASP.NET 5 (vNext) 无法重定向绑定时我该怎么办?

    我刚刚接触 MVC 6 我安装了 VS 2015 并使用默认设置ASP NET 5 preview MVC Web Application模板在本地 IIS 下一切运行良好 然后我尝试使用以下命令切换默认 DI 容器StructureMap
  • 如何访问输出阶段的 Mapper/Reducer 计数器?

    我在 Mapper 类中创建了一些计数器 使用 appengine mapreduce Java 库 v 0 5 编写的示例 Override public void map Entity entity getContext increme
  • RewriteCond 文件存在

    这么简单的问题但我和htaccess却一直相处不来 如果文件存在 则提供该文件 如果 URI 只是 并且 index html 存在 则提供 index html 否则提供 app php 这是 htaccess Disable the d
  • 如何在 ASP.NET 表单上设置必需的复选框?

    我对此进行了一些搜索 并且找到了几个部分答案 但是没有任何东西让我感到温暖模糊 这是执行此操作的正确方法 要回答针对此问题最常见的投诉 复选框可以有两种合法状态 选中和未选中 这是一个 我接受条款和条件 复选框 必须选中该复选框才能完成注册
  • 将 LINQ 结果转换为 ObservableCollection

    事实上 它是 LINQ 结果可能与该问题无关 但无论如何我都会提到它 因为这是导致该问题的上下文 我运行 LINQ 查询 结果是 IEnumerable
  • 颤动箭头标签栏?

    How I can make the cursor of tab bar with an arrow like this 您可以使用自定义画家和选项卡指示器来实现您的愿望指示器 import package flutter material