如何实现图示交互效果？含bottom sheet及箭头方向切换功能

• 希望实现如图所示的效果：
  
• 点击触发bottom sheet的功能已实现
• 需要解决：图中向上箭头与向下箭头的切换效果

箭头切换实现方案 #

1. Android 原生实现 #

• 准备两个矢量图资源（向上、向下箭头），或用系统自带Drawable
• 通过状态变量控制切换：

var isArrowUp = true

arrowView.setOnClickListener {
    isArrowUp = !isArrowUp
    arrowView.setImageResource(
        if (isArrowUp) R.drawable.ic_arrow_up else R.drawable.ic_arrow_down
    )
}

• 想要平滑动画的话，用AnimatedVectorDrawable做旋转过渡效果即可

2. Flutter 实现 #

• 基于StatefulWidget管理箭头状态：

class ArrowToggle extends StatefulWidget {
  @override
  _ArrowToggleState createState() => _ArrowToggleState();
}

class _ArrowToggleState extends State<ArrowToggle> {
  bool _isUp = true;

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(_isUp ? Icons.arrow_upward : Icons.arrow_downward),
      onPressed: () => setState(() => _isUp = !_isUp),
    );
  }
}

• 加AnimatedSwitcher可以给切换过程加过渡动画

3. Web/H5 实现 #

• 用CSS类配合JS切换：

<button id="arrowBtn" class="arrow-up"></button>

.arrow-up::after { content: "↑"; }
.arrow-down::after { content: "↓"; }

const btn = document.getElementById('arrowBtn');
btn.addEventListener('click', () => {
    btn.classList.toggle('arrow-up');
    btn.classList.toggle('arrow-down');
});

• 也可以用CSS旋转实现，只需要一套箭头图标：

.arrow { transition: transform .3s ease; }
.arrow.down { transform: rotate(180deg); }

然后JS切换down类即可

内容的提问来源于stack exchange，提问作者Raven Ben