我是新来的,我想做一个这样的卡片清单。
我试图理解原来的Project,但我不能弄清楚。我只是想做一个没有背景GIF/视频效果的可扩展卡谢谢...
bnl4lu3b1#
尝试在Card中添加ExpansionTile,这将在展开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'), ], ), ), )
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的值。
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; }); }, ), )
vulvrdjw3#
以下是我在评论中对你的问题所说的一个例子:它包含一个Card和一个Container,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,), ), ), ], ), ), ); }
3条答案
按热度按时间bnl4lu3b1#
尝试在
Card
中添加ExpansionTile
,这将在展开ExpansionTile
时展开Card
wfauudbj2#
如果你不想使用
ExpansionTile
,那么最简单的方法之一就是:使用此小部件并传递折叠的子项和展开的子项,并在单击按钮或文本时更改
isExpanded
的值。现在点击图标/文本更改
isExpanded
的值:vulvrdjw3#
以下是我在评论中对你的问题所说的一个例子:
它包含一个Card和一个Container,Container包含一个高度,由于InkWell的onTap事件,当卡被点击时,高度被更新,onTap调用setState()函数来更新小部件,使用卡的新高度。