Skip to content

Commit

Permalink
fix flutter sdk 3.7.0 badge conflict (#411)
Browse files Browse the repository at this point in the history 
* fix flutter sdk 3.7.0 badge conflict

* update version to 3.2.1

* remove useless code

* optimize the badge display
  • Loading branch information
@zhoujuanjuan
zhoujuanjuan authored Feb 1, 2023
1 parent 8825b86 commit d9bc99b
Show file tree
Hide file tree
Showing 2 changed files with 158 additions and 134 deletions.
289 changes: 157 additions & 132 deletions lib/src/components/tabbar/normal/brn_tab_bar.dart
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import 'package:badges/badges.dart';
import 'package:bruno/src/components/popup/brn_measure_size.dart';
import 'package:bruno/src/components/tabbar/indicator/brn_custom_width_indicator.dart';
import 'package:bruno/src/components/tabbar/normal/brn_tabbar_controller.dart';
Expand Down Expand Up @@ -168,24 +167,21 @@ enum BrnTabBarBadgeMode {
}

class BrnTabBarState extends State<BrnTabBar> {
/// 小红点容器的样式
late BadgeShape _badgeShape;

/// 小红点文案
late String _badgeText;

/// 小红点容器内边距
late EdgeInsets _badgePadding;

/// 小红点高度
late double _largeSize;

/// 小红点上偏移量
double _paddingTop = 0;

/// 小红点右偏移量
double _paddingRight = 0;

/// 小红点圆角
late BorderRadiusGeometry _borderRadius;

/// 展开更多的按钮宽度
final double _moreSpacing = 50;

Expand Down Expand Up @@ -382,46 +378,51 @@ class BrnTabBarState extends State<BrnTabBar> {
// 原始的自适应的tab样式
Widget _wrapOriginWidget(
BadgeTab badgeTab, bool lastElement, bool isScrollable) {
caculateBadgeParams(badgeTab);
var _contentWidget = Container(
alignment: Alignment.center,
height: 47,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Visibility(
visible: widget.hasIndex && badgeTab.topText != null,
var _contentWidget = LayoutBuilder(builder: (context, constraints) {
caculateBadgeParams(badgeTab, constraints);
return Container(
alignment: Alignment.center,
height: 47,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Visibility(
visible: widget.hasIndex && badgeTab.topText != null,
child: Text(
badgeTab.topText ?? "",
maxLines: 1,
overflow: TextOverflow.ellipsis,
)),
Badge(
isLabelVisible: (badgeTab.badgeNum != null
? badgeTab.badgeNum! > 0
: false) ||
badgeTab.showRedBadge ||
(badgeTab.badgeText != null
? badgeTab.badgeText!.isNotEmpty
: false),
label: Text(
_badgeText,
style: TextStyle(
color: Color(0xFFFFFFFF), fontSize: 10, height: 1),
),
backgroundColor: Colors.red,
alignment: AlignmentDirectional(_paddingRight, _paddingTop),
padding: _badgePadding,
largeSize: _largeSize,
child: Text(
badgeTab.topText ?? "",
badgeTab.text!,
maxLines: 1,
softWrap: true,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
)),
Badge(
showBadge:
(badgeTab.badgeNum != null ? badgeTab.badgeNum! > 0 : false) ||
badgeTab.showRedBadge ||
(badgeTab.badgeText != null
? badgeTab.badgeText!.isNotEmpty
: false),
badgeContent: Text(
_badgeText,
style:
TextStyle(color: Color(0xFFFFFFFF), fontSize: 10, height: 1),
),
shape: _badgeShape,
elevation: 0,
toAnimate: false,
borderRadius: _borderRadius,
alignment: Alignment.topLeft,
padding: _badgePadding,
position:
BadgePosition.topEnd(top: _paddingTop, end: _paddingRight),
child: Text(badgeTab.text!,
maxLines: 1, softWrap: true, overflow: TextOverflow.ellipsis),
)
],
),
);
style: TextStyle(fontSize: 16),
),
)
],
),
);
});
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expand All @@ -445,114 +446,138 @@ class BrnTabBarState extends State<BrnTabBar> {
// 定制的等分tab样式
Widget _wrapAverageWidget(
BadgeTab badgeTab, double? minWidth, bool lastElement) {
caculateBadgeParams(badgeTab);
return Container(
width: minWidth,
alignment: Alignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
return LayoutBuilder(builder: (context, constraints) {
caculateBadgeParams(badgeTab, constraints);
return Container(
width: minWidth,
alignment: Alignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
alignment: Alignment.center,
height: 47,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Visibility(
visible: widget.hasIndex && badgeTab.topText != null,
child: Text(
badgeTab.topText ?? "",
maxLines: 1,
overflow: TextOverflow.ellipsis,
)),
Badge(
isLabelVisible: (badgeTab.badgeNum != null
? badgeTab.badgeNum! > 0
: false) ||
badgeTab.showRedBadge ||
(badgeTab.badgeText != null
? badgeTab.badgeText!.isNotEmpty
: false),
backgroundColor: Colors.red,
label: Text(
_badgeText,
style: TextStyle(
color: Color(0xFFFFFFFF), fontSize: 10, height: 1),
),
alignment: AlignmentDirectional(_paddingRight, _paddingTop),
padding: _badgePadding,
largeSize: _largeSize,
child: Text(badgeTab.text!,
textAlign: TextAlign.center,
maxLines: 1,
softWrap: true,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 16)),
)
],
),
)),
Visibility(
visible: widget.hasDivider && !lastElement,
child: Container(
alignment: Alignment.center,
height: 47,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Visibility(
visible: widget.hasIndex && badgeTab.topText != null,
child: Text(
badgeTab.topText ?? "",
maxLines: 1,
overflow: TextOverflow.ellipsis,
)),
Badge(
showBadge: (badgeTab.badgeNum != null
? badgeTab.badgeNum! > 0
: false) ||
badgeTab.showRedBadge ||
(badgeTab.badgeText != null
? badgeTab.badgeText!.isNotEmpty
: false),
badgeContent: Text(
_badgeText,
style: TextStyle(
color: Color(0xFFFFFFFF), fontSize: 10, height: 1),
),
shape: _badgeShape,
elevation: 0,
toAnimate: false,
borderRadius: _borderRadius,
alignment: Alignment.topLeft,
padding: _badgePadding,
position: BadgePosition.topEnd(
top: _paddingTop, end: _paddingRight),
child: Text(badgeTab.text!,
maxLines: 1,
softWrap: true,
overflow: TextOverflow.ellipsis),
)
],
),
)),
Visibility(
visible: widget.hasDivider && !lastElement,
child: Container(
width: 1,
height: 20,
color: Color(0xffe4e6f0),
),
)
],
),
);
width: 1,
height: 20,
color: Color(0xffe4e6f0),
),
)
],
),
);
});
}

// 计算小红点尺寸相关参数
void caculateBadgeParams(BadgeTab badgeTab) {
void caculateBadgeParams(BadgeTab badgeTab, BoxConstraints constraints) {
_paddingTop = -5.0;

if (badgeTab.badgeNum != null) {
if (badgeTab.badgeNum! < 10) {
_badgePadding = EdgeInsets.all(5);
_badgeShape = BadgeShape.circle;
_badgePadding = EdgeInsets.only(left: 5.0, right: 5.0);
_largeSize = 16.0;
_badgeText = badgeTab.badgeNum?.toString() ?? "";
_paddingTop = -8;
_paddingRight = -18;
_borderRadius = BorderRadius.all(Radius.circular(8.5));
} else if (badgeTab.badgeNum! > 99) {
_badgePadding = EdgeInsets.fromLTRB(4, 3, 4, 2);
_badgeShape = BadgeShape.square;
_largeSize = 16.0;
_badgeText = "99+";
_paddingRight = -27;
_paddingTop = -5;
_borderRadius = BorderRadius.all(Radius.circular(8.5));
} else {
_badgePadding = EdgeInsets.fromLTRB(4, 3, 4, 2);
_badgeShape = BadgeShape.square;
_largeSize = 16.0;
_badgeText = badgeTab.badgeNum?.toString() ?? "";
_paddingTop = -5;
_paddingRight = -20;
_borderRadius = BorderRadius.all(Radius.circular(8.5));
}
} else {
if (badgeTab.badgeText != null && badgeTab.badgeText!.isNotEmpty) {
_badgePadding = EdgeInsets.fromLTRB(5, 3, 5, 2);
_badgeShape = BadgeShape.square;
_badgePadding = EdgeInsets.fromLTRB(6, 3, 6, 3);
_largeSize = 16.0;
_badgeText = badgeTab.badgeText?.toString() ?? "";
_paddingTop = -5;
_paddingRight = -20;
_borderRadius = BorderRadius.only(
topLeft: Radius.circular(8.5),
topRight: Radius.circular(8.5),
bottomRight: Radius.circular(8.5),
bottomLeft: Radius.circular(0));
} else {
_badgePadding = EdgeInsets.all(4);
_badgeShape = BadgeShape.circle;
_badgePadding = EdgeInsets.only(left: 4.0, right: 4.0);
_largeSize = 8.0;
_badgeText = "";
_paddingRight = -8;
_borderRadius = BorderRadius.all(Radius.circular(8.5));
_paddingTop = 1.0;
}
}

// 获取 tabTextWidth
TextStyle tabTextStyle =
TextStyle(overflow: TextOverflow.ellipsis, fontSize: 16);
TextPainter _tabTextPainter = TextPainter(
locale: Localizations.localeOf(context), textAlign: TextAlign.center);
_tabTextPainter.textDirection = TextDirection.ltr;
_tabTextPainter.maxLines = 1;
_tabTextPainter.text = TextSpan(text: badgeTab.text, style: tabTextStyle);
_tabTextPainter.layout(maxWidth: constraints.maxWidth);
double _tabTextWidth = _tabTextPainter.width;

// 获取 badgeTextWidth
TextStyle badgeTextStyle = TextStyle(height: 1, fontSize: 10);
TextPainter _badgeTextPainter =
TextPainter(textScaleFactor: MediaQuery.of(context).textScaleFactor);
_badgeTextPainter.textDirection = TextDirection.ltr;
_badgeTextPainter.maxLines = 1;
_badgeTextPainter.text = TextSpan(text: _badgeText, style: badgeTextStyle);
_badgeTextPainter.layout(maxWidth: constraints.maxWidth);
// 红点内 text 的宽度
double _badgeTextWidth = _badgeTextPainter.width;

double _badgeWidth = _badgeTextWidth + _badgePadding.horizontal;

// 获取外部传入的tab padding值
EdgeInsets _labelPadding = widget.labelPadding.resolve(TextDirection.ltr);

if ((_tabTextWidth + _badgeWidth) >
(constraints.maxWidth + _labelPadding.right)) {
// 如果tab文字宽度 + 红点宽度 > 约束宽度（父容器宽度）+ 设置tab 右padding 则将红点左移 红点宽度偏移量
// if(_badgeWidth > (constraints.maxWidth + _labelPadding.right)){
// _paddingRight = 0.0;
// }else{
_paddingRight = constraints.maxWidth + _labelPadding.right - _badgeWidth;
// }
} else {
_paddingRight = _tabTextWidth;
}
}

// 展开更多
Expand Down Expand Up @@ -615,7 +640,7 @@ class BrnTabBarState extends State<BrnTabBar> {
resetEntry();
}
_brnTabbarController.entry = overlayEntry;
Overlay.of(context)!.insert(_brnTabbarController.entry!);
Overlay.of(context).insert(_brnTabbarController.entry!);
}

void resetEntry() {
Expand Down
3 changes: 1 addition & 2 deletions pubspec.yaml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
name: bruno
description: An enterprise-class package of Flutter components for mobile applications.
version: 3.2.0
version: 3.2.1
homepage: https://github.com/LianjiaTech/bruno

environment:
Expand All @@ -16,7 +16,6 @@ dependencies:
flutter_easyrefresh: ^2.2.1
intl: ^0.17.0
photo_view: ^0.14.0
badges: ^2.0.2
bindings_compatible: ^1.0.1

dev_dependencies:
Expand Down

0 comments on commit d9bc99b

Please sign in to comment.