Skip to content

Commit

Permalink
fix BrnBottomTabBar 底部文字在特定情况下无法展示的问题。 (#145)
Browse files Browse the repository at this point in the history 
* [feature][2.2.x]: Add a Web Demo entrance;

* [fix][2.2.x]:  fix BrnBottomTabBar 底部文字在特定情况下无法展示的问题。
  • Loading branch information
@violinday
violinday authored Mar 30, 2022
1 parent 049a013 commit a707381
Show file tree
Hide file tree
Showing 4 changed files with 339 additions and 296 deletions.
4 changes: 4 additions & 0 deletions docs/components/bottomTabBar/BrnBottomTabBar/BrnBottomTabBar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,11 +81,15 @@ const BrnBottomTabBarItem({
| icon | Widget | 未选中时的icon | 是 | 无 |
| activeIcon | Widget | 选中时的icon | 否 | 无 |
| title | Widget? | Tab标题名调 | 否 | 无 |
| selectedTextStyle | TextStyle? | tab 选中文本样式 | 否 | 否 |
| unSelectedTextStyle | TextStyle? | tab 未选中文本样式 | 否 | 否 |
| backgroundColor | Color? | 背景色 | 否 | 无 |
| badge | Widget? | 未读信息 | 否 | 无 |
| badgeNo | String? | 未读信息个数 | 否 | 无 |
| maxBadgeNo | int | 未读消息最大个数 | 否 | 99 |



## 四、代码演示

### 效果1
Expand Down
137 changes: 82 additions & 55 deletions example/lib/sample/components/bottom_tabbar/bottom_tabbar_example.dart
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@


import 'package:bruno/bruno.dart';
import 'package:flutter/material.dart';

Expand All @@ -25,6 +23,9 @@ class BottomTabbarExampleState extends State<BottomTabbarExample>
/// test3
int _selectedIndexTest3 = 0;

/// test4
int _selectedIndexTest4 = 0;

/// 未读消息数量
String badgeNo1 = '100';

Expand Down Expand Up @@ -76,6 +77,14 @@ class BottomTabbarExampleState extends State<BottomTabbarExample>
});
}

/// test4
void _onItemSelectedTest4(int index) {
setState(() {
/// 置为当前选中item的索引值
_selectedIndexTest4 = index;
});
}

@override
Widget build(BuildContext context) {
return MaterialApp(
Expand All @@ -98,32 +107,47 @@ class BottomTabbarExampleState extends State<BottomTabbarExample>
items: <BrnBottomTabBarItem>[
// 定义每个BottomTabBarItem，子属性请看源码
BrnBottomTabBarItem(
icon:
Image(image: AssetImage("assets/icons/navbar_house.png")),
activeIcon:
Image(image: AssetImage("assets/icons/navbar_house.png")),
icon: Image(image: AssetImage("assets/icons/navbar_house.png")),
activeIcon: Image(
image: AssetImage("assets/icons/navbar_house.png"),
color: Colors.blue,
),
title: Text(titles[0])),
BrnBottomTabBarItem(
icon:
Image(image: AssetImage("assets/icons/navbar_house.png")),
icon: Image(image: AssetImage("assets/icons/navbar_house.png")),
activeIcon: Image(
image: AssetImage("assets/icons/navbar_house.png"),
color: Colors.blue,
),
title: Text(titles[1])),
BrnBottomTabBarItem(
icon:
Image(image: AssetImage("assets/icons/navbar_house.png")),
icon: Image(image: AssetImage("assets/icons/navbar_house.png")),
activeIcon: Image(
image: AssetImage("assets/icons/navbar_house.png"),
color: Colors.blue,
),
title: Text(titles[2])),
BrnBottomTabBarItem(
icon:
Image(image: AssetImage("assets/icons/navbar_house.png")),
activeIcon:
Image(image: AssetImage("assets/icons/navbar_house.png")),
icon: Image(image: AssetImage("assets/icons/navbar_house.png")),
activeIcon: Image(
image: AssetImage("assets/icons/navbar_house.png"),
color: Colors.blue,
),
title: Text(titles[3])),
BrnBottomTabBarItem(
icon:
Image(image: AssetImage("assets/icons/navbar_house.png")),
title: Text(titles[4])),
icon: Image(image: AssetImage("assets/icons/navbar_house.png")),
activeIcon: Image(
image: AssetImage("assets/icons/navbar_house.png"),
color: Colors.blue,
),
title: Text(titles[4]),
),
BrnBottomTabBarItem(
icon:
Image(image: AssetImage("assets/icons/navbar_house.png")),
icon: Image(image: AssetImage("assets/icons/navbar_house.png")),
activeIcon: Image(
image: AssetImage("assets/icons/navbar_house.png"),
color: Colors.blue,
),
title: Text(titles[5])),
],
),
Expand All @@ -138,66 +162,69 @@ class BottomTabbarExampleState extends State<BottomTabbarExample>
currentIndex: _selectedIndexTest1,
onTap: _onItemSelectedTest1,
items: <BrnBottomTabBarItem>[
BrnBottomTabBarItem(
icon: Icon(icons[0]), title: Text(titles[0])),
BrnBottomTabBarItem(icon: Icon(icons[0]), title: Text(titles[0])),
],
),
Padding(
padding: const EdgeInsets.all(12.0),
child: Text('极限条件测试2，有8个item'),
child: Text('有 2 个 item'),
),
BrnBottomTabBar(
fixedColor: Colors.blue,
currentIndex: _selectedIndexTest2,
onTap: _onItemSelectedTest2,
items: <BrnBottomTabBarItem>[
BrnBottomTabBarItem(
icon: Icon(icons[0]), title: Text(titles[0])),
BrnBottomTabBarItem(
icon: Icon(icons[0]), title: Text(titles[0])),
BrnBottomTabBarItem(
icon: Icon(icons[0]), title: Text(titles[0])),
BrnBottomTabBarItem(
icon: Icon(icons[0]), title: Text(titles[0])),
BrnBottomTabBarItem(
icon: Icon(icons[0]), title: Text(titles[0])),
BrnBottomTabBarItem(
icon: Icon(icons[0]), title: Text(titles[0])),
BrnBottomTabBarItem(
icon: Icon(icons[0]), title: Text(titles[0])),
BrnBottomTabBarItem(
icon: Icon(icons[0]), title: Text(titles[0])),
BrnBottomTabBarItem(icon: Icon(icons[0]), title: Text(titles[0])),
BrnBottomTabBarItem(icon: Icon(icons[0]), title: Text(titles[0])),
],
),
Padding(
padding: const EdgeInsets.all(12.0),
child: Text('极限条件测试3，text比较长的情况'),
child: Text('极限条件测试2，有8个item'),
),
BrnBottomTabBar(
fixedColor: Colors.blue,
currentIndex: _selectedIndexTest3,
onTap: _onItemSelectedTest3,
items: _getTabBarItems(count: 8),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: Text('极限条件测试3，text比较长的情况'),
),
BrnBottomTabBar(
fixedColor: Colors.blue,
currentIndex: _selectedIndexTest4,
onTap: _onItemSelectedTest4,
items: <BrnBottomTabBarItem>[
BrnBottomTabBarItem(
icon: Icon(icons[0]), title: Text("1111111111")),
BrnBottomTabBarItem(
icon: Icon(icons[0]), title: Text("2222222222")),
BrnBottomTabBarItem(
icon: Icon(icons[0]), title: Text("3333333333")),
BrnBottomTabBarItem(
icon: Icon(icons[0]), title: Text("4444444444")),
BrnBottomTabBarItem(
icon: Icon(icons[0]), title: Text("5555555555")),
BrnBottomTabBarItem(
icon: Icon(icons[0]), title: Text("6666666666")),
BrnBottomTabBarItem(
icon: Icon(icons[0]), title: Text("7777777777")),
BrnBottomTabBarItem(
icon: Icon(icons[0]), title: Text("8888888888")),
BrnBottomTabBarItem(icon: Icon(icons[0]), title: Text("1111111111")),
BrnBottomTabBarItem(icon: Icon(icons[0]), title: Text("2222222222")),
BrnBottomTabBarItem(icon: Icon(icons[0]), title: Text("3333333333")),
BrnBottomTabBarItem(icon: Icon(icons[0]), title: Text("4444444444")),
BrnBottomTabBarItem(icon: Icon(icons[0]), title: Text("5555555555")),
BrnBottomTabBarItem(icon: Icon(icons[0]), title: Text("6666666666")),
BrnBottomTabBarItem(icon: Icon(icons[0]), title: Text("7777777777")),
BrnBottomTabBarItem(icon: Icon(icons[0]), title: Text("8888888888")),
],
),
],
)),
);
}

List<BrnBottomTabBarItem> _getTabBarItems({int count = 1}) {
return List<BrnBottomTabBarItem>.generate(
count,
(index) => BrnBottomTabBarItem(
icon: Icon(
icons[0],
color: Colors.grey,
),
title: Text(titles[0]),
activeIcon: Icon(
icons[0],
color: Colors.blue,
),
));
}
}
14 changes: 11 additions & 3 deletions lib/src/components/tabbar/bottom/brn_bottom_tab_bar_item.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,31 @@ import 'package:flutter/material.dart';
/// 特别注意：Tab的右上角小红点可能不符合UI规范，可以使用BrnBadge小红点组件
class BrnBottomTabBarItem {
const BrnBottomTabBarItem({
required this.icon,
this.title,
required this.icon,
Widget? activeIcon,
this.selectedTextStyle,
this.unSelectedTextStyle,
this.backgroundColor,
this.badge,
this.badgeNo,
this.maxBadgeNo = 99,
}) : activeIcon = activeIcon ?? icon;

/// Tab标题名
final Widget? title;

/// 未选中时的icon
final Widget icon;

/// 选中时的icon
final Widget activeIcon;

/// Tab标题名
final Widget? title;
/// tab 选中文本样式
final TextStyle? selectedTextStyle;

/// tab 未选中文本样式
final TextStyle? unSelectedTextStyle;

/// 背景色
final Color? backgroundColor;
Expand Down
Loading

0 comments on commit a707381

Please sign in to comment.