Flutter中实现多选复选框并通过POST请求提交选中值

1. 准备工作 #

先在项目中导入必需的依赖包，在pubspec.yaml中添加：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0

然后在代码文件顶部导入：

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

2. 定义数据模型 #

创建类来统一管理用户选中状态，方便后续转换为指定的JSON格式：

class UserPresent {
  final String id;
  bool isPresent;

  UserPresent({required this.id, required this.isPresent});

  // 转换为请求需要的JSON结构
  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'isPresent': isPresent,
    };
  }
}

3. 完整实现带状态的Widget #

通过StatefulWidget管理全选状态和单个用户的选中状态，同时集成请求提交逻辑：

class MultiSelectCheckboxScreen extends StatefulWidget {
  const MultiSelectCheckboxScreen({super.key});

  @override
  State<MultiSelectCheckboxScreen> createState() => _MultiSelectCheckboxScreenState();
}

class _MultiSelectCheckboxScreenState extends State<MultiSelectCheckboxScreen> {
  bool _isSelectAll = false;
  List<UserPresent> _users = [
    UserPresent(id: '1', isPresent: false),
    UserPresent(id: '2', isPresent: false),
  ];

  // 全选/取消全选逻辑
  void _toggleSelectAll(bool? value) {
    setState(() {
      _isSelectAll = value ?? false;
      for (var user in _users) {
        user.isPresent = _isSelectAll;
      }
    });
    _submitSelectedData();
  }

  // 单个用户选中状态切换
  void _toggleUserSelection(int index, bool? value) {
    setState(() {
      _users[index].isPresent = value ?? false;
      // 判断是否所有用户都选中，同步全选状态
      _isSelectAll = _users.every((user) => user.isPresent);
    });
    _submitSelectedData();
  }

  // 构建请求体并发送POST请求
  Future<void> _submitSelectedData() async {
    final requestBody = {
      'data': _users.map((user) => user.toJson()).toList(),
    };

    try {
      final response = await http.post(
        Uri.parse('替换为你的实际接口地址'),
        headers: {'Content-Type': 'application/json'},
        body: jsonEncode(requestBody),
      );

      if (response.statusCode == 200) {
        if (mounted) {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('提交成功')),
          );
        }
      } else {
        if (mounted) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('提交失败：${response.statusCode}')),
          );
        }
      }
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('网络错误：$e')),
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('多选用户')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Row(
              children: [
                const Text('全选'),
                Checkbox(
                  value: _isSelectAll,
                  onChanged: _toggleSelectAll,
                ),
              ],
            ),
            Row(
              children: [
                const Text('user 1'),
                Checkbox(
                  value: _users[0].isPresent,
                  onChanged: (value) => _toggleUserSelection(0, value),
                ),
              ],
            ),
            Row(
              children: [
                const Text('user 2'),
                Checkbox(
                  value: _users[1].isPresent,
                  onChanged: (value) => _toggleUserSelection(1, value),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

4. 关键逻辑说明 #

• 全选同步：点击全选复选框时，批量更新所有用户的选中状态，并自动触提交请求。
• 单个选择同步：修改单个用户的选中状态后，自动检查是否所有用户都已选中，同步更新全选按钮的状态，随后提交请求。
• 请求格式匹配：通过UserPresent类的toJson方法，确保最终生成的请求体完全符合要求的JSON结构。

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