Flutter 中的动态嵌套列表项选择

Question

我将开发一个电子商务应用程序，并希望选择产品的不同属性。这些属性来自数据库并且它们是动态的。这是示例屏幕截图：

这里我们有三个属性：

袖子 脖子 设计

这些属性及其数量是动态的。属性可以多于 3 个。

现在在这种情况下，我们有两个列表。一个用于自我、颈部和设计。以及其他对应的值，如 full、half、without。

我想为所有的袖子、脖子和设计选择价值。

您能否提供我如何实现此场景的工作流程。

提前致谢。

Answer 1

我有点不知道您的数据到底是什么样的，您获得了多少个列表？这些列表中的每一个都有什么？您能否发布您的代码，以便我更好地查看它们？

无论如何，我要做的是编写一个具有标题和值列表的类：

class Section {
  Section({required this.title, required this.values});
  String title;
  List<String> values;
}

然后，当您从数据库中获取项目时，您可以像这样构造它们：

// example
List<Section> sections = [
  Section(title: 'Sleeves', values: ['Full', 'Half', 'Without']),
  Section(title: 'Neck', values: ['Round', 'High']),
  Section(title: 'Design', values: ['Beioided', 'Print']),
];

然后在 UI 上，您会执行如下操作：

class SectionDisplay extends StatelessWidget {
  SectionDisplay({required this.sections});
  final List<Section> sections;

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: sections.map((v) => _buildSection(v)).toList(),
    );
  }

  Widget _buildSection(Section section) {
    
    return Column(children: [
      Text(section.title),
      Row(
        children: [
          for (var value in section.values)
            ElevatedButton(
              child: Text(value), 
              onPressed: () {
                int index = section.values.indexOf(value);
                print("$index'th value: $value");
              },
        ],
      ),
    ]);
  }
}

希望这是你所需要的。