我们可以单击listView的项目并添加一个容器吗？

Question

我有一个listView，当我单击listView的任何项目时，我想要的是，在该项目的正下方，我们打开了一个容器。 如果不能使用listView完成此操作，那么我可以用什么来制作这样的页面。

这是我要解释的页面。因此，点击带有黄色图标的行，它将打开其下方的容器

我们也可以单击任何行，并且只应在该行中打开。无论我们单击listView的第一项，最后一项还是中间项，都没有关系。 如果有其他事情要做，请建议

Answer 1

您可以使用ExpansionPanelList小部件，也可以使用expandable: ^4.0.1库

class Item {
  Item({
    this.expandedValue,
    this.headerValue,
    this.isExpanded = false,
  });

  String expandedValue;
  String headerValue;
  bool isExpanded;
}

List<Item> generateItems(int numberOfItems) {
  return List.generate(numberOfItems, (int index) {
    return Item(
      headerValue: 'Panel $index',
      expandedValue: 'This is item number $index',
    );
  });
}
List<Item> _data = generateItems(8);

这是ExpansionPanelList

的演示

@override
Widget build(BuildContext context) {
  return SingleChildScrollView(
    child: Container(
      child: _buildPanel(),
    ),
  );
}

Widget _buildPanel() {
  return ExpansionPanelList(
    expansionCallback: (int index, bool isExpanded) {
      setState(() {
        _data[index].isExpanded = !isExpanded;
      });
    },
    children: _data.map<ExpansionPanel>((Item item) {
      return ExpansionPanel(
        headerBuilder: (BuildContext context, bool isExpanded) {
         return Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text('8.11.19'),
            Text('8.11.19'),
            Text('345'),
            Text('390'),
          ],
        );
        },
        body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("Paid"),
            Text("390",style: Theme.of(context).textTheme.headline,),
            RaisedButton(onPressed: (){},child: Text('Yes,Received'),),
            SizedBox(height: 5,),
          ],
        ),
      ),
        isExpanded: item.isExpanded,
      );
    }).toList(),
  );
}

我希望能对您有所帮助。