来自Json的Flutter中的多个复选框

我已经能够在FutureBuilder小部件中显示来自API的json数据。但是,该小部件的每个列表都有复选框。每当我检查一个列表时,整个列表都会被检查。

我希望获得有关如何分别检查每个列表以及如何使用所选列表数据的帮助。

import 'package:flutter/material.dart';

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

class Location extends StatefulWidget {
  @override
  _LocationState createState() => _LocationState();
}

class _LocationState extends State<Location> {
  //initState
  bool selected = false;

  Future<List<User>> _getUsers() async {
    var data = await http
        .get("http://www.json-generator.com/api/json/get/cdjVKlMEde?indent=2");

    var jsonData = json.decode(data.body);

    List<User> users = [];

    for (var u in jsonData) {
      User user =
          User(u["index"],u["about"],u["name"],u["email"],u["picture"]);

      users.add(user);
    }

    print(users.length);

    return users;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Select City'),),body: Container(
        child: FutureBuilder(
          future: _getUsers(),builder: (BuildContext context,Asyncsnapshot snapshot) {
            print(snapshot.data);
            if (snapshot.data == null) {
              return Container(child: Center(child: Text("Loading...")));
            } else {
              return ListView.builder(
                itemCount: snapshot.data.length,itemBuilder: (BuildContext context,int index) {
                  return ListTile(
                    leading: CircleAvatar(
                      backgroundImage:
                          NetworkImage(snapshot.data[index].picture),title: Text(snapshot.data[index].name),subtitle: Text(snapshot.data[index].email),trailing: Checkbox(
                        value: selected,onChanged: (bool val) {
                          setState(() {
                            selected = val;
                          });
                        }),onTap: () {
                      Navigator.push(
                          context,new MaterialPageRoute(
                              builder: (context) =>
                                  DetailPage(snapshot.data[index])));
                    },);
                },);
            }
          },);
  }
}

class DetailPage extends StatelessWidget {
  final User user;

  DetailPage(this.user);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
      title: Text(user.name),));
  }
}

class User {
  final int index;
  final String about;
  final String name;
  final String email;
  final String picture;

  User(this.index,this.about,this.name,this.email,this.picture);
}

我希望获得有关如何分别检查每个列表以及如何使用所选列表数据的帮助。

xinshiye111 回答:来自Json的Flutter中的多个复选框

我已解决问题,请尝试运行以下代码。

说明

  • 初始化布尔类型列表

    var userStatus = List();

  • 在添加用户时将布尔值false添加到列表中,如下面的代码所示

    userStatus.add(false)

  • 现在在复选框中设置一个值

    值:userStatus [index]

  • 在复选框的onChanged事件中,使用设置状态切换用户状态

    userStatus [index] =!userStatus [index];

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,title: 'Flutter Demo',theme: ThemeData(
        primarySwatch: Colors.blue,),home: Location(),);
  }
}


class Location extends StatefulWidget {
  @override
  _LocationState createState() => _LocationState();
}

class _LocationState extends State<Location> {
  //initState
  bool selected = false;
  var userStatus = List<bool>();

  Future<List<User>> _getUsers() async {
    var data = await http
        .get("http://www.json-generator.com/api/json/get/cdjVKlMEde?indent=2");

    var jsonData = json.decode(data.body);

    List<User> users = [];

    for (var u in jsonData) {
      User user =
      User(u["index"],u["about"],u["name"],u["email"],u["picture"]);

      users.add(user);
      userStatus.add(false);
    }

    print(users.length);

    return users;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Select City'),body: Container(
        child: FutureBuilder(
          future: _getUsers(),builder: (BuildContext context,AsyncSnapshot snapshot) {
            print(snapshot.data);
            if (snapshot.data == null) {
              return Container(child: Center(child: Text("Loading...")));
            } else {
              return ListView.builder(
                itemCount: snapshot.data.length,itemBuilder: (BuildContext context,int index) {
                  return ListTile(
                    leading: CircleAvatar(
                      backgroundImage:
                      NetworkImage(snapshot.data[index].picture),title: Text(snapshot.data[index].name),subtitle: Text(snapshot.data[index].email),trailing: Checkbox(
                        value: userStatus[index],onChanged: (bool val) {
                          setState(() {
                            userStatus[index] = !userStatus[index];
                          });
                        }),onTap: () {
                      Navigator.push(
                          context,new MaterialPageRoute(
                              builder: (context) =>
                                  DetailPage(snapshot.data[index])));
                    },);
                },);
            }
          },);
  }
}

class DetailPage extends StatelessWidget {
  final User user;

  DetailPage(this.user);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(user.name),));
  }
}

class User {
  final int index;
  final String about;
  final String name;
  final String email;
  final String picture;

  User(this.index,this.about,this.name,this.email,this.picture);
}
本文链接:https://www.f2er.com/3128728.html

大家都在问