Flutter自定义BottomAppBar实现点击选项2dp抬升效果的方案求助
Flutter自定义BottomAppBar实现点击选项2dp抬升效果的方案求助
大家好,我最近在Flutter项目里做了一个自定义的BottomAppBar,目前的结构和需求是这样的:
- 底部导航栏一共有5个选项,每个选项都包含图标和对应的文字
- 我想实现的交互效果是:当点击某个选项时,这个选项能向上抬升2dp,以此突出当前选中状态
下面是我目前写的部分代码:
child: BottomAppBar( color: Colors.transparent, // BottomAppBar의 배경색을 투명하게 설정 child: Column( children: [ Gaps.v23, Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Gaps.v8, GnbTap( text: '교외 지원', isSelected: _selectedIndex == 0, onTap: () => _onTap(0), selectedIndex: _selectedIndex, selecetedImage: AppImages.outSchool_active, unselecetedImage: AppImages.outSchool_inactive, ), GnbTap( text: '교내 지원', isSelected: _selectedIndex == 1, onTap: () => _onTap(1), selectedIndex: _selectedIndex, selecetedImage: AppImages.school_active, unselecetedImage: AppImages.school_inactive, ), // 剩余3个GnbTap组件省略 ], ), ], ), )
我想要达到的具体交互效果:
- 点击第一个「교외 지원」选项时,该选项组件向上抬升2dp
- 点击第二个「교내 지원」选项时,对应的选项组件也向上抬升2dp
我已经翻查了BottomAppBar的相关属性和文档,但没找到能直接实现这个抬升效果的方法,想请教各位大佬有没有可行的解决方案?
备注:内容来源于stack exchange,提问作者Help ToBright
相关产品推荐
相关产品推荐

