如何在列表視圖中展開卡以顯示更多數據，甚至在另一個列表視圖中

Question

這里有沒有人對onTap（）如何擴展列表視圖項（在本例中為卡片）的內容有任何想法-顯示更多選項？ 您知道那里有一家酒吧可以幫助您嗎？

我看了一下，但不知道要搜索什么？ 我敢肯定，大家都可以想象這種情況：用戶單擊一個列表視圖項，它會打開或顯示更多選項-可能是堆棧或另一個列表視圖（水平）。

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

Answer 1

您可以按照注釋中所述使用本機材料實現，也可以自己構建。

這是一個完整的工作示例，您可以根據需要進行修改。

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);
}

Answer 2

您可以使用ExpansionPanel作為子女ExpansionPanelList或者你可以使用ExpansionTile為ListView控件的孩子。