作者热门文章
- r - 以节省内存的方式增长 data.frame
- ruby-on-rails - ruby/ruby on rails 内存泄漏检测
- android - 无法解析导入android.support.v7.app
- UNIX 域套接字与共享内存(映射文件)
我正在尝试匹配这个设计
点击卡片应该展开
我不能用卡片包裹扩展 block ,因为扩展 block 基本上只有一行,我试着按照这个例子 flutter_catalog
我在谷歌上搜索了很多,但找不到我想要实现的示例,我在 stackoverflow 上找到的最接近的是这个 other question flutter 中没有可折叠/可扩展的卡片吗?
最佳答案
您绝对可以使用 Card
包裹 ExpansionTile
。 ExpansionTile
有一个 title
属性,它接受一个 Widget
,所以你可以将任何你想要的 Widget
传递给它。
乱七八糟的示例代码,但希望你明白了:
class ExpandedTile extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15.0))),
elevation: 2,
margin: EdgeInsets.all(12.0),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ExpansionTile(
backgroundColor: Colors.white,
title: _buildTitle(),
trailing: SizedBox(),
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
Text("Herzlich Willkommen"),
Spacer(),
Icon(Icons.check),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
Text("Das Kursmenu"),
Spacer(),
Icon(Icons.check),
],
),
)
],
),
),
);
}
Widget _buildTitle() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Text("MODUL 1"),
Spacer(),
Text("Mehr"),
],
),
Text("Kursubersicht"),
Row(
children: <Widget>[
Text("6 Aufgaben"),
Spacer(),
FlatButton.icon(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15.0))),
padding: EdgeInsets.symmetric(vertical: 4.0, horizontal: 8.0),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {},
icon: Icon(Icons.play_arrow),
label: Text("Fortsetzen"),
),
],
),
],
);
}
}
产生
点击时
关于Flutter 可折叠/可扩展卡片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56273062/
我是一名优秀的程序员,十分优秀!