如何在特定事件后更改 CheckboxListTile 的標題？

Question

我一直試圖讓它工作，基本上我有一個 ListView，里面有兩個 CheckBoxListTiles，當用戶選擇一個 CheckBoxListTile 時，會彈出一個帶有 DatePicker 的模式，我想要實現的是在用戶選擇日期之后， CheckBoxListTile 文本（或我猜的標題）被更改為日期，這是我到目前為止的代碼。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart' show timeDilation;

class ChecklistWidget extends StatefulWidget {
  @override
  _ChecklistWidget createState() => _ChecklistWidget();
}

class _ChecklistWidget extends State<ChecklistWidget> {
    String date1 = "";
    String date2 = "";
    Map<String, bool> values = {
    'Choose a specific date': false,
    'Choose an alternative date': false,
  };
  @override 
  Widget build(BuildContext build){

    return new ListView(
        shrinkWrap: true,
        children: values.keys.map((String key) {
          return new CheckboxListTile(
            title: new Text(key),
            value: values[key],
            onChanged: (bool value) {
              setState(() {
                values[key] = value;
                showCupertinoModalPopup(context: context, builder: (BuildContext context) { return _buildDatePicker(
                    CupertinoDatePicker(
                        mode: CupertinoDatePickerMode.dateAndTime,
                        initialDateTime: DateTime.now(),
                        onDateTimeChanged: (DateTime newDateTime) {
                           // date1 = newDateTime.toString();
                            print("Your Selected Date: ${newDateTime.day}");


                        },
                    ),
                    ); });
              });
              title: date1;
            },
          );
        }).toList(),
      );

  }

   Widget _buildDatePicker(Widget picker){
    return Container(
      height: 216.0,
      padding: const EdgeInsets.only(top: 6.0),
      color: CupertinoColors.white,
      child: DefaultTextStyle(   style: const TextStyle(
                color: CupertinoColors.black,
                fontSize: 22.0,
                ),
                child: GestureDetector(
                // Blocks taps from propagating to the modal sheet and popping.
                onTap: () {},
                child: SafeArea(
                    top: false,
                    child: picker,
                ),
                ),)
    );
  }
}

感謝任何幫助，我是 flutter 的新手，所以我確定我只是遺漏了一些東西，但我無法理解它。

Answer 1

我建議您不要遍歷 map 鍵，因為您的日期數量有限，因此最好只構建每個日期並相應地更新其值。

如果您確實有未知數量的日期，最好將每個日期存儲在 model 中，並帶有label 、 value和enabled字段。

但這對於您的情況就足夠了：

class _ChecklistWidget extends State<ChecklistWidget> {
  String date1;
  String date2;
  bool specificDateEnabled = false;
  bool alternativeDateEnabled = false;
  @override
  Widget build(BuildContext build) {
    return new ListView(shrinkWrap: true, children: [
      CheckboxListTile(
        title: Text(date1 ?? 'Choose a specific date'),
        value: specificDateEnabled,
        onChanged: (bool value) {
          setState(() {
            specificDateEnabled = value;
            showCupertinoModalPopup(
                context: context,
                builder: (BuildContext context) {
                  return _buildDatePicker(
                    CupertinoDatePicker(
                      mode: CupertinoDatePickerMode.dateAndTime,
                      initialDateTime: DateTime.now(),
                      onDateTimeChanged: (DateTime newDateTime) {
                        setState(() {
                          date1 = newDateTime.toString();
                        });
                      },
                    ),
                  );
                });
          });
        },
      ),
      CheckboxListTile(
        title: Text(date2 ?? 'Choose an alternative date'),
        value: alternativeDateEnabled,
        onChanged: (bool value) {
          setState(() {
            alternativeDateEnabled = value;
            showCupertinoModalPopup(
                context: context,
                builder: (BuildContext context) {
                  return _buildDatePicker(
                    CupertinoDatePicker(
                      mode: CupertinoDatePickerMode.dateAndTime,
                      initialDateTime: DateTime.now(),
                      onDateTimeChanged: (DateTime newDateTime) {
                        setState(() {
                          date2 = newDateTime.toString();
                        });
                      },
                    ),
                  );
                });
          });
        },
      ),
    ]);
  }

   Widget _buildDatePicker(Widget picker){
    return Container(
      height: 216.0,
      padding: const EdgeInsets.only(top: 6.0),
      color: CupertinoColors.white,
      child: DefaultTextStyle(   style: const TextStyle(
                color: CupertinoColors.black,
                fontSize: 22.0,
                ),
                child: GestureDetector(
                // Blocks taps from propagating to the modal sheet and popping.
                onTap: () {},
                child: SafeArea(
                    top: false,
                    child: picker,
                ),
                ),)
    );
  }
}