You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.20 12:59:35