flutter tabbar指示器indicator宽度高度自定义
在tabbar中indicator宽度是无法修改的,所以需要咱们去自定义indicator。
下面是自定义的代码,直接拷贝使用,已做好修改。
// 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 below the
/// selected tab.
///
/// The selected tab underline is inset from the tab's boundary by [insets].
/// The [borderSide] defines the line's color and weight.
///
/// The [TabBar.indicatorSize] property can be used to define the indicator's
/// bounds in terms of its (centered) widget with [TabIndicatorSize.label],
/// or the entire tab with [TabIndicatorSize.tab].
class TabSizeIndicator extends Decoration { final double wantWidth;//传入的指示器宽度,默认20 /// Create an underline style selected tab indicator.
///
/// The [borderSide] and [insets] arguments must not be null.
const TabSizeIndicator({
this.borderSide = const BorderSide(width: 2.0, color: Colors.blue),
this.insets = EdgeInsets.zero,
this.wantWidth = 20
}) : assert(borderSide != null),
assert(insets != null),
assert(wantWidth != null); /// The color and weight of the horizontal line drawn below the selected tab.
final BorderSide borderSide;//指示器高度以及颜色 ,默认高度2,颜色蓝 /// Locates the selected tab's underline relative to the tab's boundary.
///
/// The [TabBar.indicatorSize] property can be used to define the
/// tab indicator's bounds in terms of its (centered) tab widget with
/// [TabIndicatorSize.label], or the entire tab with [TabIndicatorSize.tab].
final EdgeInsetsGeometry insets; @override
Decoration lerpFrom(Decoration a, double t) {
if (a is UnderlineTabIndicator) {
return UnderlineTabIndicator(
borderSide: BorderSide.lerp(a.borderSide, borderSide, t),
insets: EdgeInsetsGeometry.lerp(a.insets, insets, t),
);
}
return super.lerpFrom(a, t);
} @override
Decoration lerpTo(Decoration b, double t) {
if (b is TabSizeIndicator) {
return TabSizeIndicator(
borderSide: BorderSide.lerp(borderSide, b.borderSide, t),
insets: EdgeInsetsGeometry.lerp(insets, b.insets, t),
);
}
return super.lerpTo(b, t);
} @override
_MyUnderlinePainter createBoxPainter([ VoidCallback onChanged ]) {
return _MyUnderlinePainter(this,wantWidth, onChanged);
}
} class _MyUnderlinePainter extends BoxPainter {
final double wantWidth;
_MyUnderlinePainter(this.decoration, this.wantWidth,VoidCallback onChanged)
: assert(decoration != null),
super(onChanged); final TabSizeIndicator decoration; BorderSide get borderSide => decoration.borderSide;
EdgeInsetsGeometry get insets => decoration.insets; Rect _indicatorRectFor(Rect rect, TextDirection textDirection) {
assert(rect != null);
assert(textDirection != null);
final Rect indicator = insets.resolve(textDirection).deflateRect(rect); //希望的宽度
// double wantWidth = 20;
//取中间坐标
double cw = (indicator.left + indicator.right) / 2;
return Rect.fromLTWH(cw - wantWidth / 2,
indicator.bottom - borderSide.width, wantWidth, borderSide.width);
} @override
void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
assert(configuration != null);
assert(configuration.size != null);
final Rect rect = offset & configuration.size;
final TextDirection textDirection = configuration.textDirection;
final Rect indicator = _indicatorRectFor(rect, textDirection).deflate(borderSide.width / 2.0);
final Paint paint = borderSide.toPaint()..strokeCap = StrokeCap.square;
canvas.drawLine(indicator.bottomLeft, indicator.bottomRight, paint);
}
}
将源码拷贝过来进行修改。以上代码就是修改好的。下面是使用方式。
TabBar(
indicator: TabSizeIndicator(wantWidth:
15,borderSide: BorderSide(width:
2.0,color: Colors.red)),//TabSizeIndicator已有默认值,宽度默认20,颜色蓝色,高度2,不需要修改的可以不传参数
//TabSizeIndicator();即可
isScrollable: true,
controller: _tabController,
unselectedLabelStyle: TextStyle(
fontSize: 13, fontWeight: FontWeight.bold),
labelStyle: TextStyle(
fontWeight: FontWeight.bold, fontSize: 13),
tabs:_tabbarItem()
),
flutter tabbar指示器indicator宽度高度自定义的更多相关文章
- 灵活、可高度自定义的——Progress进度圈、弹窗、加载进度、小菊花
DDProgressHUD的介绍 提供了四种类型的展示: 显示无限旋转的加载图(比如小菊花,可以自定义),显示文字信息.网络刷新时经常用到. 显示加载进度的动画,也可以显示文字.网络下载时用的比较多, ...
- CSS控制div宽度最大宽度/高度和最小宽度/高度
在网页制作中经常要控制div宽度最大宽度/高度或者最小宽度/高度,但是在IE6中很多朋友都会遇到不兼容的头疼问题,包括我也经常遇到这样的问题,在百度查了很多都没法解决,后来在一个论坛上学习到,在这里跟 ...
- fancybox 点击 js脚本判断验证,fancybox的宽度高度设置
当我们在使用fancybox做弹出窗口的时候,可能在弹窗之前就需要判断一些验证条件,例如我这里有个案例,用户必须先得勾选一个 那么怎么做呢?我们用到fancybox的一个onStart方法就可以了 $ ...
- span宽度高度设置
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- C#获取显示器宽度高度,桌面宽度高度等
1.C#获取显示器宽度高度,桌面宽度高度等 //获取当前显示器的宽度和高度 int width = Screen.PrimaryScreen.Bounds.Width; int height = Sc ...
- java中得到图片的宽度 高度:
java中得到图片的宽度 高度:BufferedImage srcImage = null;srcImage = ImageIO.read(new File(srcImagePath));int sr ...
- simple高度自定义的jqPaginator 项目中做分页的应用技巧
最近做后台管理系统,分页用到的不少,项目中其实已经有分页功能的组件但是不够高度自定义,于是就找到了 jqPaginator 高度自定义的Html结构 初始化引用如下: $("#paginat ...
- 使用 <embed> 标签显示 flash文件(swf)格式 ,如何设置 width 和 height 宽度,高度.
1. embed 标签 支持 .swf 格式. .flv 的不支持. 2. 通常情况下, 网站中上传 多个 flash文件. 它的默认大小是不一样的. 而且 可以 宽度 大于 高度(横向的) ...
- js 获取浏览器/网页宽度高度整理
网页宽度.高度: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.bo ...
- 相册 垂直居中; 水平居中. 1)宽度 大于高度, 宽度 100%; 2) 高度 大于 宽度 , 高度100%; getimagesize , list --->line-height , text-align, vertical-align, max-height, max-width
一: 效果: 1) 黑色 部分是 相框. 2) 图片 要实现 水平居中, 垂直居中 3) 如果 宽度 大于 高度 ,那么 宽度 100% ,如图1 , 高度 自适应 ,同时不能超过黑色相框的 高度 ; ...
随机推荐
- 鸣人的影分身(等级考试4级 2021-03 T3)
题目: 此题题干又臭又长,直接看简化版. 鸣人的影分身(等级考试4级 2021-03 T3)等效于 把m个苹果分到n个盘子中,问有几种可能? dp[i][j]表示有i个盘子j个苹果时有多少种放法. 用 ...
- c++ stl 详解 csp备考
最近在准备csp认证考试,打算使用c++语言,以下是关于c++ stl库的内容: algorithm概览(作者:当格子衫爱上Helloworld) stl库详解(作者:c语言中文网) https:// ...
- Emacs Client启动方式,在WSL像VIM一样操作
这个会判断是否启动 Emacs daemon,如果没有启动他会自己启动 alias ec='emacsclient -t -a ""' alias sec='sudo emacsc ...
- Idea未识别maven项目
https://blog.csdn.net/qq_41460654/article/details/120539509
- HEU_KMS_Activator_v27.0.2全能系统数字许可激活工具
HEU_KMS_Activator_v27.0.2全能系统数字许可激活工具 HEU KMS Activator是KMS激活工具,支持激活 Windows XP.Windows 7.Windows 8. ...
- javaEE(单元测试、反射、动态代理、xml)
单元测试 最小的功能单元编写测试代码,java针对方法,检查方法的正确性 JUnit单元测试框架 @Test注解 public class A { @Test public void a(){ ... ...
- Archiver Appliance bug report(问题已解决,见文末)
本来想发到EPICS mailist里问的,可是发了两次给弹回来,不方便的等不及了,就在这问吧,谁知道怎么解决麻烦一定指导一下. ########################## Hi ALL: ...
- java环境变量配置-最新版
安装 百度"java下载"进入官网下载最新版,闭着眼睛安装: 配置jre 因java11以上不自带jre,需要我们自己配置,配置如下: # 终端进入jdk所在的目录后执行 bin\ ...
- OSI网络7层模型,TCP/IP协议族
ARP和RARP协议在OSI中属于数据链路层,在我们的认知里属于网络层,与IP在一层 OSI 7层模型比这个5层模型多了三层,5层模型熟悉的情况下,可以这么记多出的层:用表会输 应用层 表示层 会话层 ...
- 在使用vite报global的错
解决: