Flutter中动态列表按钮文本随日期选择独立变更的问题

嘿，我一眼就看出问题所在啦——你用了一个全局的buttonText变量来控制所有按钮的显示文本，所有按钮都绑定到同一个值上，那不管点哪个按钮，只要这个变量一变，所有按钮自然都会跟着变。咱们来一步步修改代码，让每个按钮独立维护自己的日期：

问题核心分析 #

1. 单个buttonText变量被所有按钮共享，导致状态同步更新
2. _pickDate里每次调用都dates.add(chosen)，这会让dates列表长度越来越长，和按钮数量不匹配，后续用dates[index]取值会出问题

修复步骤 #

1. 调整状态变量，用列表对应每个按钮的日期

首先，把你的单个buttonText去掉，直接用dates列表来维护每个按钮的日期（初始时可以设为null，表示还没选择日期）。在你的State类里初始化dates：

List<DateTime?> dates = [];

2. 修改日期选择函数，按索引更新对应日期

把_pickDate改成接收按钮索引的函数，直接更新dates列表对应位置的元素，而不是追加新元素：

Future<void> _pickDate(int index) async {
  DateTime? date = await showDatePicker(
    context: context,
    initialDate: dates[index] ?? DateTime.now(), // 已选过的话显示之前的日期，否则显示当前
    firstDate: DateTime(DateTime.now().year - 100),
    lastDate: DateTime.now(),
  );
  if (date != null) {
    setState(() {
      dates[index] = date; // 直接更新对应索引的日期，不再用add
    });
  }
}

3. 修改ListView.builder，让每个按钮绑定自己的日期

在_dateList里，我们要确保dates列表的长度和按钮数量一致，同时每个按钮的文本根据对应索引的dates值来显示：

Widget _dateList() {
  int itemCount = pregController.text.isEmpty ? 0 : int.parse(pregController.text);
  
  // 确保dates列表长度和按钮数量匹配，新增的按钮默认显示null（即"date"）
  if (dates.length != itemCount) {
    // 保留已有的日期，新增的位置设为null
    dates = List.generate(itemCount, (i) => i < dates.length ? dates[i] : null);
  }

  return Container(
    margin: EdgeInsets.all(10),
    width: MediaQuery.of(context).size.width * 0.8,
    height: MediaQuery.of(context).size.height * 0.1,
    child: ListView.builder(
      scrollDirection: Axis.horizontal,
      shrinkWrap: true,
      itemCount: itemCount,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          padding: EdgeInsets.all(5),
          width: MediaQuery.of(context).size.width * 0.3,
          child: RaisedButton(
            color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
            key: Key(index.toString()),
            // 根据dates[index]是否为null，显示默认文本或格式化后的日期
            child: Text(
              dates[index] != null 
                  ? '${dates[index]!.day}/${dates[index]!.month}/${dates[index]!.year}'
                  : 'date',
              textAlign: TextAlign.center,
              style: GoogleFonts.lato(
                textStyle: TextStyle(color: Colors.white),
              ),
            ),
            onPressed: () => _pickDate(index), // 把当前按钮的索引传给选择函数
          ),
        );
      },
    ),
  );
}

额外注意点 #

• 如果用户修改输入的按钮数量，上面的代码会自动调整dates列表的长度，保留已选择的日期，新增的按钮显示默认的"date"
• 去掉了原来的birth变量，因为我们直接在_pickDate里更新dates列表，不需要额外的中间变量

这样修改后，每个按钮就会独立维护自己的选中日期，再也不会出现点击一个按钮所有按钮都变的情况啦！

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