Flutter：如何实现下拉列表以在点击时显示文本字段？

Question

我对 Flutter 比较陌生，我正在尝试实现一种功能，在从下拉列表中选择一个项目时，一个 TextField 小部件会出现在其下方。

这是我的 DropdownButton 的代码片段：

final items = ['Healthy', 'Unhealthy'];
 ...

    DropdownMenuItem<String> buildMenuItem(String item) => DropdownMenuItem(
          value: item,
          child: Text(
            item,
            style: const TextStyle(
              fontSize: 16,
              // fontWeight: FontWeight.bold,
              fontFamily: "Ubuntu",
              color: Colors.black54,
            ),
          ),
        );

     ...

      Container(
        width: scrwidth * 0.8,
        height: scrheight / 14,
        padding: const EdgeInsets.symmetric(
            horizontal: 12, vertical: 4),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          border: Border.all(color: Colors.black54, width: 1),
        ),
        child: DropdownButtonHideUnderline(
          child: DropdownButton<String>(
            icon: const Icon(
              Icons.arrow_drop_down,
              color: Colors.black54,
            ),
            hint: const Text(
              "Health",
              style: TextStyle(
                fontFamily: "Ubuntu",
                fontWeight: FontWeight.bold,
              ),
            ),
            isExpanded: true,
            value: value,
            items: items.map(buildMenuItem).toList(),
            onChanged: (value) =>
                setState(() => this.value = value),
          ),
        ),
      ),

目前，TextField 小部件未显示。现在看起来是这样的：

我在网上搜索了解决方案，但没有找到任何可以解决我的具体问题的内容。任何帮助将不胜感激！

提前谢谢您！

Answer 1

您可以使用可见性小部件来显示/隐藏文本字段。这将由状态变量控制，我们将其称为 isVisible。所以我们有

bool isVisible = false;

.....

Visibility(
    visible: isVisible,
    child: TextField(),
);

默认情况下，文本字段不会显示，但我们可以在选择下拉列表值时使其可见。

DropdownButtonHideUnderline(
    ....
onChanged: (value) =>
          setState(() {
              this.value = value;
              if (this.value == "Unhealthy") {
                  isVisible = true;
               } else {
                  isVisible = false;
                      }
                })
           );