Flutter可折叠/可扩展卡片

Question

我正在尝试匹配这个设计

点击后，卡片应该展开

我不能使用包含扩展瓷砖的卡片，因为扩展瓷砖基本上只有一行，我试图遵循这个示例 flutter_catalog

我搜索了很多，但找不到我想要实现的示例，最接近的是stackoverflow上的这个其他问题，在Flutter中没有可折叠/可扩展的卡片吗？

- m1416

Answer 1

你完全可以使用一个 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"),
            ),
          ],
        ),
      ],
    );
  }
}

生成

当点击时

- Jordan Davies

---

你显然是一位Flutter专家，感谢你的回答。 - m1416