tabBar自定义组件点击tabbar, 页面切换了,但是图标选中状态没有跟着改变,怎么解决
时间: 2024-01-01 21:05:05 浏览: 60
这个问题通常是由于自定义的TabBar组件没有正确地传递选中状态导致的。要解决这个问题,你需要在自定义TabBar组件中,正确地管理选中状态并将其传递给子组件。
具体的做法是,在自定义TabBar组件中,为每个TabBarItem设置一个选中状态。当用户点击某个TabBarItem时,你需要将其选中状态设置为true,并将其他TabBarItem的选中状态设置为false。然后,你需要将选中状态传递给TabBarItem组件,让它根据选中状态来显示不同的图标和文字。
下面是一个简单的示例代码:
```
class CustomTabBar extends StatelessWidget {
final List<TabBarItem> items;
final int currentIndex;
final ValueChanged<int> onTap;
CustomTabBar({
Key key,
@required this.items,
@required this.currentIndex,
@required this.onTap,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
currentIndex: currentIndex,
onTap: onTap,
items: items.map((item) {
return BottomNavigationBarItem(
icon: item.icon,
title: item.title,
activeIcon: item.activeIcon,
);
}).toList(),
);
}
}
class TabBarItem {
final Widget icon;
final Widget title;
final Widget activeIcon;
TabBarItem({
@required this.icon,
@required this.title,
@required this.activeIcon,
});
}
```
在这个示例中,我们使用Flutter自带的BottomNavigationBar作为基础组件,并在CustomTabBar中对其进行了封装。TabBarItem是一个自定义的类,用于表示每个TabBarItem的图标、标题和选中状态。在CustomTabBar中,我们将TabBarItem转换为BottomNavigationBarItem,并将其添加到BottomNavigationBar中。同时,我们也将选中状态传递给了BottomNavigationBar组件。这样,当用户点击某个TabBarItem时,BottomNavigationBar会根据选中状态来显示不同的图标和文字。