Flutter如何监听Slidable组件状态变化 滑动时保持标题可见不被遮挡

实现方法 #

你可以通过Flutter自带的AnimatedBuilder监听Slidable控制器的动画变化，实现动态调整Row对齐的需求，不需要额外做Stream监听。Slidable组件提供的animation属于标准的Animation<double>对象，数值范围为0（滑动面板完全关闭）到1（滑动面板完全展开），AnimatedBuilder会自动监听这个动画的数值变化触发UI重建。

修改后的核心代码如下：

Widget _listTile(context) {
  // 获取Slidable控制器
  final slidableController = Slidable.of(context);
  // 绑定动画实现实时刷新
  return AnimatedBuilder(
    animation: slidableController?.animation ?? const AlwaysStoppedAnimation(0),
    builder: (context, child) {
      final isOpen = slidableController?.animation.value == 1;
      return ListTile(
        title: Row(
          // 完全打开时切换为End对齐，关闭时恢复Start对齐
          mainAxisAlignment: isOpen ? MainAxisAlignment.end : MainAxisAlignment.start,
          children: [
            Icon(
              itemCredential.icon,
              color: Colors.black,
            ),
            Padding(
              padding: const EdgeInsets.only(left: 8.0),
              child: Text(
                itemCredential.name,
                style: const TextStyle(
                  fontFamily: 'Roboto',
                  fontSize: 16,
                ),
              ),
            ),
          ],
        ),
        onTap: () => {
          slidableController?.animation.isCompleted == true
              ? slidableController?.close()
              : slidableController?.openEndActionPane()
        },
        trailing: const Icon(Icons.check_circle_outline, color: Colors.green),
      );
    },
  );
}

优化建议 #

如果想要避免对齐方式切换的生硬跳变，可以根据动画值动态计算标题的左侧边距，实现平滑移动的效果，示例如下：

title: Padding(
  // 120为右侧操作按钮总宽度，可根据自己实际布局调整数值
  padding: EdgeInsets.only(left: 120 * (slidableController?.animation.value ?? 0)),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      // 原有Icon、Text代码保持不变
    ],
  ),
),

内容的提问来源于stack exchange，提问作者Victor Moreira