Question

当我从由服务器数据填充的DropdownMenuItem中选择一个值时，我试图更改屏幕上显示的内容。

我已经能够使用DropdownMenuItem同步服务器数据。

我的数据是这种形式；

tomcat7

因此，一旦我单击索引为1的值，屏幕应显示与该值相关的内容。现在，我将所有数据显示在屏幕上。

我如何同步数据

 {
   "data":[
            {"id": 1, "country": "B"},
            {"id": 2, "country": "C"},
          ]
 }

我希望与DropdownMenuItem上选择的值有关的内容显示在屏幕上。

Answer 1

如果要显示特定于所选值的内容，请使用DropdownButton中的onChanged函数。

与上述代码示例一样，您将获得newValue，它是选定的值。在此回调函数中，您只需检查应显示哪些内容，然后设置状态即可。

onChanged: (String newValue) {
      setState(() {
        dropdownValue = newValue;
        contentToDisplay = Text(items[newValue]['country'])
      });
    },

变量contentToDisplay将是在类中定义的小部件，您可以将其内置到树中任何所需的位置。

Scaffold(
   body: Column(
       children: [
           DropdownButton(...),
           Container(
               color: Colors.grey,
               child: contentToDisplay 
           )
       ]
   )
)

如何根据所选值显示内容

1 个答案: