在 Flutter 中创建下拉菜单

Question

我想要在我的应用程序中做的是根据列表内容添加一个下拉列表。我有这样的事情：

[
    {
        id: val,
        displayName: Enter value,
        type: string, 
        value: "any"
    },
    {
        id: si,
        displayName: Source,
        type: list,
        value: [
            MO
        ],
        data: [
            {id: 1, displayId: MO},
            {id: 2, displayId: AO},
            {id: 3, displayId: OffNet}
        ]
     }
 ]

目前有 2 个条目。我想要做的是显示一个下拉列表，其中包含这些选项（Enter value 和Source）作为下拉列表的 2 个条目：

• 如果选择了Enter value，则应在其旁边显示一个文本框，因为它的类型为string。
• 如果选择了下拉列表中的Source 选项，则另一个包含这些条目（MO、AO、Offnet）的下拉列表应该作为下拉值出现，因为它具有一种列表类型。

简而言之，根据第一个下拉菜单的选择，应选择要显示的小部件（文本框或其他下拉菜单）。

如果有人知道或以前做过同样的事情，请帮助我，谢谢。

Answer 1

我会使用StatefulWidget 来实现您的需求（如果您不使用更高级的状态管理选项）。状态将有助于跟踪用户的选择，以及决定是否呈现文本字段或另一个下拉列表（或根本不呈现）。

我在下面添加了一个完整的工作示例。请注意，它确实不遵循最佳实践，您可能希望将其拆分为单独的小部件以获得更好的可组合性（和可读性）。但是，我选择了一种快速而简单的方法来将所有东西都放在一个地方。

另外请注意，一旦用户做出选择，您可能希望进行更多处理。在这里，我简单说明如何根据用户的选择（或更一般地说，StatefulWidget's 状态的变化）呈现不同的小部件。因此，此示例仅用于强调一个原则。

import 'package:flutter/material.dart';

void main() {
  runApp(DropdownExample());
}

class DropdownExample extends StatefulWidget {
  @override
  _DropdownExampleState createState() => _DropdownExampleState();
}

class _DropdownExampleState extends State<DropdownExample> {
  String type;
  int optionId;

  final items = [
    {
      "displayName": "Enter value",
      "type": "string",
    },
    {
      "displayName": "Source",
      "type": "list",
      "data": [
        {"id": 1, "displayId": "MO"},
        {"id": 2, "displayId": "AO"},
        {"id": 3, "displayId": "OffNet"}
      ]
    }
  ];

  @override
  Widget build(BuildContext context) {
    Widget supporting = buildSupportingWidget();

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Dropdown Example")),
        body: Center(
          child: Container(
            height: 600,
            width: 300,
            child: Row(
              children: <Widget>[
                buildMainDropdown(),
                if (supporting != null) supporting,
              ],
            ),
          ),
        ),
      ),
    );
  }

  Expanded buildMainDropdown() {
    return Expanded(
      child: DropdownButtonHideUnderline(
        child: DropdownButton(
          value: type,
          hint: Text("Select a type"),
          items: items
              .map((json) => DropdownMenuItem(
                  child: Text(json["displayName"]), value: json["type"]))
              .toList(),
          onChanged: (newType) {
            setState(() {
              type = newType;
            });
          },
        ),
      ),
    );
  }

  Widget buildSupportingWidget() {
    if (type == "list") {
      List<Map<String, Object>> options = items[1]["data"];
      return Expanded(
        child: DropdownButtonHideUnderline(
          child: DropdownButton(
            value: optionId,
            hint: Text("Select an entry"),
            items: options
                .map((option) => DropdownMenuItem(
                    child: Text(option["displayId"]), value: option["id"]))
                .toList(),
            onChanged: (newId) => setState(() {
              this.optionId = newId;
            }),
          ),
        ),
      );
    } else if (type == "string") {
      return Expanded(child: TextFormField());
    }
    return null;
  }