目录
-
- 演示效果
- 演示代码
- 关键逻辑解析
- 状态切换 vs 直接属性动画
- 小结
- 工程下载
卡片交互里，有一种效果和信息组织关系更密切：展开折叠。它常见于 FAQ、设置项、通知列表等场景。默认只显示标题，点击后展开详情，再次点击收起。这个效果的核心不是能不能展开，而是展开和收起的过程是否平滑自然。
实现思路是：用一个矩形组件作为卡片整体，里面分成头部和身体（隐藏）两部分。头部固定高度，身体组件初始高度为 0，通过状态来切换身体组件的高度，并给高度加上行为动画。
演示效果
以下演示代码来自 qml_container/Demo_ExpandableCard.qml，为便于阅读，只展示了关键代码。
演示代码
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
FadeInAnimation {
ColumnLayout {
anchors.fill: parent
anchors.margins: 20
spacing: 15
TitleSeparator {
title: \”展开/折叠卡片\”
description: \”点击卡片头部展开或折叠详情区域，高度与箭头旋转平滑过渡\”
