如何制作可扩展卡？

Posted 2023-02-23

【中文标题】如何制作可扩展卡？

【英文标题】：How to make Expandable card?

【发布时间】：2019-07-25 22:44:41

【问题描述】：

我是 Flutter 的新手，我想做一个这样的卡片列表。

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

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

谢谢...

【问题讨论】：

您可以通过使用变量设置项目的高度然后使用 setState 更新它来做到这一点，这样当小部件被重建时高度已经改变。

你可以看看这个答案***.com/a/50533285/8954451

卡片背景的动画是怎么实现的？

【参考方案1】：

尝试在Card 中添加ExpansionTile，这将在您展开ExpansionTile 时展开Card

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'),
      ],
    ),
  ),
)

【讨论】：

看起来不错，但是有什么方法可以关闭卡片，点击扩展后出现的额外区域。

我没明白你的意思？

我的意思是当卡片处于展开状态时，如果我们点击展开区域，有没有办法关闭卡片。

【参考方案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;
    );
  ,
 ),
)

【讨论】：

我正在尝试将其用于项目，但在 widget.model.isExpanded 中出现错误，无法识别模型。有什么想法吗？

model 只不过是在小部件类中定义的一个对象，它具有 isExpanded 布尔变量。

【参考方案3】：

这是我在 cmets 中就您的问题所说的一个示例：

它包含一个Card和一个包含高度的Container，由于InkWell的onTap事件，点击卡片时高度会更新，onTap调用setState()函数来更新小部件，具有卡片的新高度。

   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,),
                  ),
                ),
              ],
            ),
          ),
        );
      

这还没有测试...

【讨论】：

我不知道为什么人们投反对票可能是因为你使用了 StatefulWidget 并且点击一张卡片也会影响其他卡片。

这无关紧要，因为投反对票将其标记为无用并且可能有用。