flutter 如何制作可扩展卡?

uwopmtnx  于 2023-03-31  发布在  Flutter
关注(0)|答案(3)|浏览(123)

我是新来的,我想做一个这样的卡片清单。

我试图理解原来的Project,但我不能弄清楚。
我只是想做一个没有背景GIF/视频效果的可扩展卡
谢谢...

bnl4lu3b

bnl4lu3b1#

尝试在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'),
      ],
    ),
  ),
)
wfauudbj

wfauudbj2#

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

vulvrdjw3#

以下是我在评论中对你的问题所说的一个例子:
它包含一个Card和一个ContainerContainer包含一个高度,由于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,),
                  ),
                ),
              ],
            ),
          ),
        );
      }
  • 这还没测试过 *

相关问题