listview - 如何在 ListView 中展开卡片以显示更多数据，甚至是另一个 ListView

Question

这里有没有人知道我如何通过 onTap() 扩展 ListView 项(在本例中为卡片)的内容 - 以显示更多选项？您知道那里有可以提供帮助的酒吧吗？

我已经看过了，但我不知道要搜索什么？我相信你们都能想象这样的场景:用户点击一个 ListView 项，它会打开或显示更多选项 - 可能是一个堆栈或另一个 ListView (水平)。

非常感谢您提供的任何信息。

Answer 1

您可以使用评论中提到的原生 Material 实现，也可以自己构建。

这是一个完整的工作示例，您可以根据需要进行修改。

import 'package:flutter/material.dart';


void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


  List<ListItem> listItems = List.generate(4, (int index) => ListItem(
    4,
    false
  ));

  _expandItem(ListItem listItem){
    setState(() {
      listItems.forEach((ListItem item) {
        if (item == listItem){
          item.expanded = !item.expanded;
        } else {
          item.expanded = false;
        }

      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: ListView(
            children: listItems.map((ListItem listItem) {
              return Card(
                child: Container(
                  child: Column(
                    children: <Widget>[
                      Text('Hello ${listItem.id}'),
                      RaisedButton(
                        child: Text('Expand'),
                        onPressed: () {
                          _expandItem(listItem);
                        },
                      ),

                      listItem.expanded ? Column(
                        children: List.generate(4, (int index) => Text('Hello $index')),
                      ) : Container(),
                    ],
                  ),
                ),
              );
            }).toList()
            ),
          ),
        ),
      );
  }
}


class ListItem {

  final int id;
  bool expanded;

  ListItem(this.id, this.expanded);
}