Flutter：如何实现下拉列表以在单击中显示Textfield？

Question

我对扑朔迷离的速度相对较新，并且正在尝试实现一个功能，而从下拉列表中选择项目后，就会下方出现Textfield Widget。

这是我的下拉列表的代码段：

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

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

bool isVisible = false;

.....

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

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

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