如何制作可扩展卡？

Question

我是 flutter 的新手，我想列出这样的卡片。

我试图了解原始项目，但我无法弄清楚。

我只想制作一张没有背景gif/视频效果的可扩展卡片

谢谢...

Answer 1

尝试添加一个ExpansionTile内部 a Card，这将Card在您展开时展开ExpansionTile

Card(
  child: Padding(
   padding: EdgeInsets.only(
      top: 36.0, left: 6.0, right: 6.0, bottom: 6.0),
      child: ExpansionTile(
      title: Text('Birth of Universe'),
        children: <Widget>[
         Text('Big Bang'),
         Text('Birth of the Sun'),
         Text('Earth is Born'),
      ],
    ),
  ),
)

Answer 2

如果您不想使用，ExpansionTile那么最简单的方法之一就是遵循

class ExpandableCardContainer extends StatefulWidget {
  final bool isExpanded;
  final Widget collapsedChild;
  final Widget expandedChild;

  const ExpandableCardContainer(
      {Key key, this.isExpanded, this.collapsedChild, this.expandedChild})
      : super(key: key);

  @override
  _ExpandableCardContainerState createState() =>
      _ExpandableCardContainerState();
}

class _ExpandableCardContainerState extends State<ExpandableCardContainer> {
  @override
  Widget build(BuildContext context) {
    return new AnimatedContainer(
      duration: new Duration(milliseconds: 200),
      curve: Curves.easeInOut,
      child: widget.isExpanded ? widget.expandedChild : widget.collapsedChild,
    );
  }
}

使用此小部件并传递折叠的子项和展开的子项并更改isExpanded单击按钮或文本时的值。

 ExpandableCardContainer(
      expandedChild: createExpandedColumn(context),
      collapsedChild: createCollapsedColumn(context),
      isExpanded: widget.model.isExpanded,
 )

现在更改isExpanded单击图标/文本的值

GestureDetector(
  child: Icon(
    widget.model.isExpanded
        ? EvaIcons.chevronDownOutline
        : EvaIcons.chevronUpOutline,
    color: Colors.grey,
    size: 20,
  ),
  onTap: () {
    setState(() {
      widget.model.isExpanded =
          !widget.model.isExpanded;
    });
  },
 ),
)