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 , 高度 自适应 ,同时不能超过黑色相框的 高度 ; ...
随机推荐
- 安装云崽Bot+GPT3插件
安装云崽Bot+GPT3插件 这次我们来搭建云崽Bot,云崽Bot其实是一个用于原神的机器人,不过众多大佬开发出了很多有趣的插件供我们使用,这次我们就是用其中的一个插件Chat-gpt(其不是正宗的C ...
- VMware 虚拟机安装 OpenWrt 作旁路由 单臂路由 img 镜像转 vmdk 旁路由无法上网 没网络
重要注意事项 由于布线原因笔记本只能采用无线的方式连接路由器,在Windows10的环境下使用无线网卡桥接,结果软路由无法上网,翻阅了各种帖子最终发现跟系统底层的协议栈有关系,随即放弃使用有线网卡,不 ...
- 学习Java Day14
今天进一步学习了Java的类,学习了LocalDay:
- Java第五讲异常处理总结
1. 在运行上述代码时javac产生idiv字节码指令,在运行下面的程序时javac产生ddiv字节指令,导致了两段代码运行结果不同. 2. 3.finally语句块一定会执行吗? /** * 自定义 ...
- 在Unity中对森林植被进行优化
https://www.163.com/dy/article/DP6665QP0526E124.html
- .NET 中创建录音机和播放器应用
前言 在本博客中,你将了解如何在 .NET MAUI 中开发录音机和播放器.音频播放器将录制和播放音频文件.此应用程序可以在Android和iOS上部署和使用. 预览 以下是该录音机和播放录音的应用程 ...
- tp save()的用法
save()方法可以新增数据,也可以修改数据 但是要注意,在第二次save()的时候会默认修改 需 model('Keyword')->isUpdate(false)->save($dat ...
- Java面向对象之Object类
Object类 Object类是所有Java类的根父类 如果在类的声明中未使用extends关键字指明其父类,则默认父类为java.lang.Object类 Object类中的功能(属性.方法)就具有 ...
- Vue CLI 2内置框架webpack框架结构解析
目前Vue已经到3.X版本,相应的Vue CLI也已经是Vue CLI 3版本,创建命令使用vue create,如果要用2.X版的vue init命令,需要全局安装一个桥接工具: npm insta ...
- hive中对时间处理的函数总结
日期转为时间戳 unix_timestamp('2022-11-12 00:00:00.000') 结果:1668182400 from_unixtime(unix_timestamp('2022-1 ...