Question

我是新手，要列出这样的卡片清单。

我试图理解原始的Project，但我无法弄清楚。

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

谢谢...

Answer 1

如果您不想使用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;
    });
  },
 ),
)

Answer 2

尝试在ExpansionTile内添加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 3

以下是我在对您的问题的评论中说的一个例子：

它包含一个Card，其中一个Container包含一个高度，由于InkWell的onTap事件而在点击卡片时，高度会更新，onTap调用{ {3}}功能以使用Card的新高度更新小部件。

   class MyApp extends StatefulWidget {
      double oldheight = 100.0;
      double newheight = 200.0;
      double height = 200.0;

      @override
      Widget build(BuildContext context) {
        final title = 'Basic List';

        return MaterialApp(
          title: title,
          home: Scaffold(
            appBar: AppBar(
              title: Text(title),
            ),
            body: ListView(
              children: <Widget>[
                InkWell(
                  onTap: () {
                    setState(() {
                      if (height == oldheight) {
                        height = newheight;
                      }
                      else{
                        height = oldheight;
                      }
                    });
                  },
                  child: Card(
                    child:Container(height: height,),
                  ),
                ),
              ],
            ),
          ),
        );
      }

这还没有经过测试...

如何制作扩展卡？

3 个答案: