Flutter如何实现选择列表显示值与返回值分离的功能

需求说明：从接口拉取用户列表，选择列表页面展示用户name，选中后直接返回对应用户的id用于提交到数据库。

完全可以实现，Flutter的选择类组件原生支持值与展示视图分离，不需要额外复杂处理，以下是可直接运行的示例代码：

1. 前置依赖与数据模型定义 #

首先在pubspec.yaml中添加网络请求依赖：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0 # 可替换为最新稳定版本

然后定义User数据模型：

class User {
  final int id;
  final String name;
  User({required this.id, required this.name});
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
    );
  }
}

2. 网络请求方法封装 #

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<List<User>> fetchUsers() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));
  if (response.statusCode == 200) {
    List<dynamic> body = json.decode(response.body);
    return body.map((json) => User.fromJson(json)).toList();
  } else {
    throw Exception('用户数据加载失败');
  }
}

3. 核心选择页面实现 #

这里使用Flutter原生DropdownButton组件实现，选中直接返回用户id：

import 'package:flutter/material.dart';

class UserSelectorPage extends StatefulWidget {
  const UserSelectorPage({super.key});
  @override
  State<UserSelectorPage> createState() => _UserSelectorPageState();
}

class _UserSelectorPageState extends State<UserSelectorPage> {
  List<User> _userList = [];
  int? _selectedUserId; // 存储选中的用户id，即需要返回的实际值

  @override
  void initState() {
    super.initState();
    _loadUsers();
  }

  Future<void> _loadUsers() async {
    _userList = await fetchUsers();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('用户选择')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('请选择用户：'),
            const SizedBox(height: 10),
            _userList.isEmpty
                ? const CircularProgressIndicator()
                : DropdownButton<int>(
                    hint: const Text('请选择用户'),
                    value: _selectedUserId,
                    isExpanded: true,
                    items: _userList.map((user) {
                      return DropdownMenuItem<int>(
                        value: user.id, // 实际返回值为用户id
                        child: Text(user.name), // 页面展示值为用户name
                      );
                    }).toList(),
                    onChanged: (value) {
                      setState(() {
                        _selectedUserId = value;
                      });
                      // 此处拿到的value就是选中用户的id，可直接提交到数据库
                      // 示例：选中Leanne Graham时value=1，选中Ervin Howell时value=2
                      debugPrint('选中的用户id：$_selectedUserId');
                    },
                  ),
            const SizedBox(height: 20),
            if (_selectedUserId != null)
              Text('当前选中的用户id：$_selectedUserId'),
          ],
        ),
      ),
    );
  }
}

扩展说明 #

如果需要使用其他样式的选择组件（比如底部弹出列表选择、带搜索功能的选择框），逻辑完全通用：只需要将需要返回的id作为组件的实际绑定值，展示层单独渲染name字段即可，二者完全独立互不影响。

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