我试图在单击时更改底部导航栏中FloatingActionButton()的图标。它工作得很好,但只有当我离开屏幕回来的时候?有人知道出什么事了吗?调用changeIcon()中的Setstate应该强制重新呈现,还是我错了?
我真的很感激你的帮助:)
return FloatingActionButton(
child: this.pressed ? Icon(Icons.people) : Icon(Icons.close),
onPressed: () {
changeIcon();
});
class HomeState extends State<Home> {
MapRadials buttonProvider;
Icon fabIcon = Icon(Icons.perm_media);
FloatingActionButton floatingActionButton;
int _currentIndex = 0;
List<Widget> _screens = [
FeedScreen(),
MapScreen(),
MapScreen(),
NotificationScreen(),
ChatScreen(),
];
@override
void initState() {
super.initState();
floatingActionButton = FloatingActionButton(
onPressed: () {},
child: fabIcon,
);
}
void changeIcon(Icon icon) {
setState(() {
fabIcon = icon;
});
}
@override
Widget build(BuildContext context) {
final MapRadials radialProvider = Provider.of<MapRadials>(context);
this.buttonProvider = radialProvider;
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
leading: IconButton(
icon: Icon(
Icons.menu,
size: 30.0,
color: Colors.black,
),
onPressed: () {},
),
actions: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
IconButton(
icon: Icon(
Icons.filter_list,
size: 30.0,
color: Colors.black,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.search,
size: 30.0,
color: Colors.black,
),
onPressed: () {},
),
],
)
],
)
],
),
bottomNavigationBar: bottomNavBar(),
floatingActionButton: this.floatingActionButton,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
body: _screens[_currentIndex],
);
}
void onTabTapped(int index) {
setState(() {
if (index != 2) {
_currentIndex = index;
floatingActionButton = getFloatingActionButton(index);
}
});
}
Widget getFloatingActionButton(int index) {
switch (index) {
case 0: // Home
return FloatingActionButton(child: Icon(Icons.add), onPressed: () {});
case 1: // Map
return FloatingActionButton(
child: fabIcon,
onPressed: () {
changeIcon(Icon(Icons.save));
});
case 2: // Notification
return FloatingActionButton(
child: Icon(Icons.clear_all), onPressed: () {});
case 3: // Chat
return FloatingActionButton(
child: Icon(Icons.add_comment), onPressed: () {});
default:
return FloatingActionButton(child: Icon(Icons.add), onPressed: () {});
}
}
Widget bottomNavBar() {
return BottomNavigationBar(
type: BottomNavigationBarType.fixed,
onTap: onTabTapped,
currentIndex: _currentIndex,
showSelectedLabels: false,
showUnselectedLabels: false,
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: Colors.black,
),
title: Text('Feed'),
),
BottomNavigationBarItem(
icon: Icon(
Icons.person_pin_circle,
color: Colors.black,
),
title: Text('Map')),
BottomNavigationBarItem(
icon: Icon(
null,
),
title: Text('Placeholder')),
BottomNavigationBarItem(
icon: Icon(
Icons.notifications,
color: Colors.black,
),
title: Text('Noftications'),
),
BottomNavigationBarItem(
icon: Icon(
Icons.chat_bubble,
color: Colors.black,
),
title: Text('Chat'))
],
);
}
}
您正在更改状态中的图标,并对其使用setstate()
,这很好,但是请注意,setstate()
正在用scaffold
重新构建小部件树,其floatingActionButton
参数为floatingActionButton:this.floatingActionButton
,并且在initstate()
方法中设置this.floatingActionButton
,该方法只调用一因为this.floatingActionButton
只使用初始图标实例化一次,所以由setstate()
触发的重建不会使用新图标呈现FAB。
尝试在didchangeDependencies()
中设置this.floatingActionButton
而不是initstate()
,因为根据关于didChangeDependecies的flutter.dev文档文章,它将是
当此状态对象的依赖项更改时调用。