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的子代。

如何在列表视图中展开卡以显示更多数据，甚至在另一个列表视图中

2 个答案: