ExpansionPanelRadio 的唯一 headerValue 和 expandedValue

Question

如何为每个可展开的磁贴添加唯一值以使常见问题解答看起来像这样？

从这个 link 中获取我的代码：https://medium.com/aubergine-solutions/how-to-create-expansion-panel-list-in-flutter-2fba574366e8

我想添加我自己独特的 headerValue 和 expandedValue 而不是让它像

那样只占用一个标准数字

 headerValue: 'Book $index',
      expandedValue: 'Details for Book $index goes here'

我可能会使用这个 class 而不是他们的：

class FAQ {
  FAQ({
    this.id,
    this.expandedValue,
    this.headerValue,
  });

  int id;
  String expandedValue;
  String headerValue;
}

Answer 1

您可以创建自定义 class，它可以 return 您的问题列表。在您的 Item class 中，您需要定义函数 Item.fromJson(dynamic json)，它将 return 您 Map 或您的项目。然后你可以再创建一个函数，你将把你的实际数据传递给你的 class Item 它会 return 你 Map 这样你就可以在你的小部件中使用了。

这是完整的代码和工作

  class Item {
  final String id;
  final String expandedValue;
  final String headerValue;
  Item(
    this.id,
    this.expandedValue,
    this.headerValue,
  );

  factory Item.fromJson(dynamic json) {
    return Item(
        "${json['id']}", "${json['expandedValue']}", "${json['headerValue']}");
  }
}

var mylist = [
  {"id": "1", "headerValue": "question 1", "expandedValue": "answer 1"},
  {"id": "2", "headerValue": "question 2", "expandedValue": "answer 2"}
];

getFeedbackList() {
  return mylist.map((json) => Item.fromJson(json)).toList();
}

class ExpansionItems extends StatefulWidget {
  const ExpansionItems({Key? key}) : super(key: key);

  @override
  State<ExpansionItems> createState() => _ExpansionItemsState();
}

class _ExpansionItemsState extends State<ExpansionItems> {
  final List<Item> _data = getFeedbackList();
  @override
  Widget build(BuildContext context) {
    print(_data);
    return SingleChildScrollView(
      child: Container(
        child: _buildPanel(),
      ),
    );
  }

  Widget _buildPanel() {
    return ExpansionPanelList.radio(
      initialOpenPanelValue: 2,
      children: _data.map<ExpansionPanelRadio>(
        (Item item) {
          return ExpansionPanelRadio(
            value: item.id,
            headerBuilder: (BuildContext context, bool isExpanded) {
              return ListTile(
                title: Text(item.headerValue),
              );
            },
            body: ListTile(
              title: Text(item.expandedValue),
            ),
          );
        },
      ).toList(),
    );
  }
}

你可以试试上面的代码here

ExpansionPanelRadio 的唯一 headerValue 和 expandedValue

Unique headerValue and expandedValue for ExpansionPanelRadio

class

list

expansion

flutter