点击按钮后如何保留Dropdown下拉框的选中值

点击连接按钮后，下拉框的选中值会消失（点击前显示已选中的服务器地址，点击后回到未选中的提示文本状态），希望选中值能保持可见。

解决方法 #

问题核心是DropdownSearch未绑定持久化的选中状态：每次Firestore快照更新触发StreamBuilder重建时，下拉框会重置为初始状态。按以下步骤修复：

1. 确保dataAddress是通过状态管理维护的变量（比如StatefulWidget的setState、Provider/Riverpod等），而非临时变量。
2. 给DropdownSearch添加selectedItem属性，绑定dataAddress，让下拉框始终读取并保持该选中值。
3. 修复dropdownBuilder的UI问题：原代码创建了Icon但未返回，需将Icon与Text组合后返回。

修改后的完整代码示例：

// 假设此代码位于StatefulWidget的build方法内，dataAddress是State类中的成员变量
StreamBuilder<QuerySnapshot>(
  stream: FirebaseFirestore.instance
          .collection('servers')
          .snapshots(includeMetadataChanges: true),
  builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
    if (snapshot.hasError) {
      return Text('Something went wrong');
    }
    if (snapshot.connectionState == ConnectionState.waiting) {
      return Text("Loading");
    }

    // 提取服务器列表，优化代码可读性
    final List<String> serverAddresses = snapshot.data!.docs
        .map((doc) => (doc.data()! as Map<String, dynamic>)["address"] as String)
        .toList();

    return Container(
      child: DropdownSearch<String>(
        // 关键：绑定选中状态，确保重建后仍保留选中值
        selectedItem: dataAddress,
        dropdownDecoratorProps: DropDownDecoratorProps(
          dropdownSearchDecoration: InputDecoration(
            labelText: "Server",
            labelStyle: TextStyle(color: Color(0xFFB4F4C8)),
            hintText: "Select a server",
            hintStyle: TextStyle(color: Color(0xFFB4F4C8)),
            icon: Icon(
              Icons.map_outlined,
              color: Color(0xFFB4F4C8),
            ),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Color(0xFFB4F4C8)),
              borderRadius: BorderRadius.circular(10.0),
            ),
            enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Color(0xFFB4F4C8)),
              borderRadius: BorderRadius.circular(8.0)),
          ),
        ),
        dropdownBuilder: ((context, selectedItem) {
          // 修复：返回包含图标和文本的Row组件
          return Row(
            children: [
              Icon(Icons.arrow_drop_down_circle_outlined,
                color: Color(0xFFB4F4C8),
              ),
              SizedBox(width: 8),
              Text(selectedItem ?? "",
                style: TextStyle(color: Color(0xFFfcfcfc)),
              ),
            ],
          );
        }),
        items: serverAddresses,
        onChanged: (String? data) {
          // 通过setState更新状态（StatefulWidget场景）
          setState(() {
            dataAddress = data;
          });
          // 若使用Provider等状态管理库，此处调用对应更新方法即可
        }
      ),
    );
  },
),

关键说明 #

• selectedItem: dataAddress：这是解决选中值丢失的核心配置，让DropdownSearch始终以dataAddress作为当前选中状态，无论StreamBuilder因快照更新重建多少次，都会保持选中值。
• 状态管理：dataAddress必须是持久化的状态变量，不能是局部变量。如果是小型页面用StatefulWidget的setState即可；大型应用建议用专业状态管理库统一维护状态。
• dropdownBuilder修复：原代码仅创建了Icon但未将其加入返回的Widget树，导致图标不显示，现在通过Row组件将图标与文本组合，保证UI完整。

内容的提问来源于stack exchange，提问作者rurjaf