Question

我试图在单击时更改底部导航栏中的FloatingActionButton（）图标。它工作正常，但仅当我离开屏幕并返回时才显示？有人知道怎么了吗？会在changeIcon（）中调用Setstate来强制重新渲染，否则我错了吗？

我非常感谢您的帮助:)

编辑：如果我将if this.pressed bool语句作为子句放入，它甚至不起作用。 this.pressed标志的状态从false更改为true（打印状态），但即使这样也不会导致按钮更改其图标。

     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'))
      ],
    );
  }
}

Answer 1

您正在更改状态的图标，并使用setState()，这很好，但是请注意，setState()正在使用{{1} }}参数为Scaffold，并且您正在floatingActionButton方法中设置floatingActionButton: this.floatingActionButton，该方法将仅被调用一次（每次实例化整个Widget时）。由于该this.floatingActionButton仅用初始图标实例化一次，因此initState()触发的重建不会用新图标来呈现FAB。

请尝试将this.floatingActionButton设置为setState()而不是this.floatingActionButton，因为根据flutter.dev documentation article on didChangeDependecies，它将是

此State对象的依赖项更改时调用。

Flutter：如何在按下时更改BottomNavBar中的FloatingactionButton图标？

1 个答案: