我想在 flutter 中创建用户配置文件列表？

Question

我是 flutter 的新手，出于练习目的，我正在创建一个献血应用程序，在我的应用程序中，我添加了一个用于捐赠者登记的注册表，现在当接受者需要血液时，他们会填写特定血液的表格相应地，收件人可以看到带有个人资料、姓名、城市和国家/地区的捐助者列表。 现在我需要帮助来创建这个显示列表中所有注册捐助者的页面。

Answer 1

首先，您需要创建数据 model，您可以在其中添加特定数据。 在用户填写数据的地方制作表格，然后将该数据放入 model。将这些模型添加到列表中，然后将 map 放入 listView。

Model：

class BloodDonor {
 final String profile;
 final String name;
 final String city;
 final String country;

 BloodDonor({
   required this.city,
   required this.country,
   required this.name,
   required this.profile,
 });
}

屏幕：

class GetDonorDetailScreen extends StatefulWidget {
  @override
  State<GetDonorDetailScreen> createState() => _GetDonorDetailScreenState();
}

class _GetDonorDetailScreenState extends State<GetDonorDetailScreen> {
  final GlobalKey<FormState> formKey = GlobalKey<FormState>();

  BloodDonor bloodDonor = BloodDonor();

  List<BloodDonor> donors = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Form(
          key: formKey,
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
            child: Column(
              children: [
                TextFormField(
                  decoration: InputDecoration(
                    hintText: 'Enter profile',
                  ),
                  validator: (valueEntered) {
                    return valueEntered!.isEmpty ? "Please fill here" : null;
                  },
                  onSaved: (value) {
                    bloodDonor.profile = value!;
                  },
                ),
                SizedBox(height: 10),
                TextFormField(
                  decoration: InputDecoration(
                    hintText: 'Enter Name',
                  ),
                  validator: (valueEntered) {
                    return valueEntered!.isEmpty ? "Please fill here" : null;
                  },
                  onSaved: (value) {
                    bloodDonor.name = value!;
                  },
                ),
                SizedBox(height: 10),
                TextFormField(
                  decoration: InputDecoration(
                    hintText: 'Enter City',
                  ),
                  validator: (valueEntered) {
                    return valueEntered!.isEmpty ? "Please fill here" : null;
                  },
                  onSaved: (value) {
                    bloodDonor.city = value!;
                  },
                ),
                SizedBox(height: 10),
                TextFormField(
                  decoration: InputDecoration(
                    hintText: 'Enter Country',
                  ),
                  validator: (valueEntered) {
                    return valueEntered!.isEmpty ? "Please fill here" : null;
                  },
                  onSaved: (value) {
                    bloodDonor.country = value!;
                  },
                ),
                SizedBox(height: 10),
                Center(
                  child: ElevatedButton(
                    child: Text("Add"),
                    onPressed: () {
                      if (formKey.currentState!.validate()) {
                        formKey.currentState!.save();
                        setState(() {
                          donors.add(bloodDonor);
                          bloodDonor = BloodDonor();
                          formKey.currentState?.reset();
                        });
                      }
                    },
                  ),
                ),
                SizedBox(height: 10),
                Expanded(
                  child: ListView(
                    children: [
                      for (final donor in donors)
                        ListTile(
                          title: Text(donor.name),
                          subtitle: Text(
                              "${donor.city}, ${donor.country} - ${donor.profile}"),
                        ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}