如何在NavigationBar中设置与Flutter中的BottomNavigationBar相似的选定图标大小变化的动画？

zwghvu4y 于 2023-06-07 发布在 Flutter

关注(0)|答案(3)|浏览(179)

我在和Flutter一起工作当我使用NavigationBar更改图标时我希望选中的图标具有更大的尺寸，但将此更改制作成动画，类似于在BottonNavigationBar中发生的情况，但NavigationBar版本我未能实现此动画

来源：https://stackoverflow.com/questions/76369952/how-to-animate-selected-icon-size-change-in-navigationbar-similar-to-bottomnavig

3条答案

按热度按时间

8yoxcaq71#

可以使用AnimatedContainer，示例如下

AnimatedContainer(
    duration: Duration(milliseconds: 200),
    padding: EdgeInsets.all(10),
    decoration: BoxDecoration(
      border: Border(
        bottom: BorderSide(
          width: isSelected ? 2.0 : 0.0,
          color: Colors.blue,
        ),
      ),
    ),
    child: Icon(
      icons[index],
      size: isSelected ? selectedIconSize : unselectedIconSize,
      color: isSelected ? Colors.blue : Colors.black,
    ),

赞(0）回复(0）举报 2023-06-07

rqmkfv5c2#

BottomNavigationBar(
          currentIndex: model.currentIndex,
          enableFeedback: true,
          landscapeLayout: BottomNavigationBarLandscapeLayout.centered,
          elevation: 0,
          onTap: model.setIndex,
          items: [
            BottomNavigationBarItem(
              label: 'Hem',
              activeIcon: Icon(
                Icons.home,
                color: CustomeColors.grey,
                size: 30.0,
              ),
              icon: Icon(
                Icons.home_outlined,
                size: 25.0,
              ),
            ),

赞(0）回复(0）举报 2023-06-07

wfveoks03#

AnimatedScale(
  scale: factor,
  duration: const Duration(seconds: 1),
  child: NavigationDestination(
    icon: Icon(
      Icons.home, // your icon
    ),
    label: '',
  ),
)

只需使用setState或任何状态管理更新factor

赞(0）回复(0）举报 2023-06-07

我来回答

如何在NavigationBar中设置与Flutter中的BottomNavigationBar相似的选定图标大小变化的动画？

3条答案

相关问题

热门标签

最新问答