让小部件在点击另一个小部件时显示 Flutter

Posted 2023-02-23

【中文标题】让小部件在点击另一个小部件时显示 Flutter

【英文标题】：Make widget shows on tapping another widget Flutter

【发布时间】：2020-11-07 10:46:05

【问题描述】：

我正在开发一个 Flutter 应用程序，该应用程序显示每个房间中的智能家居设备，看起来像这样

当我点击房间图片时，我想让红圈中的部分出现在它的正下方，但我不知道这种动画是如何调用的。

我将 ListView 用于圆圈中的部分，将 InkWell 用于图片。

提前谢谢你

更新 在听从 cmets 的建议后（谢谢），我找到了这个包 https://pub.dev/packages/expandable 超级好用，非常直观。我会推荐任何尝试创建此可扩展卡的人来查看它

【问题讨论】：

它应该在屏幕底部吗...如果是这样，我会推荐一个 MODALBOTTOMSHEET。

它应该出现在被点击的图片的正下方。就像我点击卧室一样，列表视图应该出现在卧室和厨房之间。

【参考方案1】：

请检查一下...这里有几种解决方案可以实现您的目标 How to make Expandable card?

【参考方案2】：

我建议您将设备列表放在 AnimatedContainer 中：

AnimatedContainer(
   height: isKitchenOpened ? 400 : 0,
   duration: Duration(milliseconds: 300),
   child: Placeholder(),
)

isKitchenOpened 是一个布尔值，您可以在点击厨房图片时切换。

你也可以改变动画曲线，比如curve: Curves.decelerate