Question

我想为用户建立一个日期选择器，以选择他们要预订课程的日期。到目前为止，我已经对逻辑进行了编码，以生成接下来的8天并连续显示，但是当用户点击日期时，我很难获得所选的索引。我该如何实现？

非常感谢您。

class TimeSlot extends StatelessWidget {
  List<Map<String, String>> get upComingDay {
    return List.generate(8, (index) {
      final weekDay = DateTime.now().add(
        Duration(days: index),
      );
      return {
        'day': DateFormat.E().format(weekDay).substring(0, 2),
        'date': DateFormat.d().format(weekDay),
      };
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: upComingDay.map((data) {
        return Column(
          children: <Widget>[
            Text(
              data['day'],
              style: TextStyle(
                color: Color.fromRGBO(30, 41, 51, 0.5),
              ),
            ),
            SizedBox(
              height: 7,
            ),
            GestureDetector(
              onTap: () {},
              child: CircleAvatar(
                backgroundColor: Color.fromRGBO(240, 242, 245, 1),
                radius: 14,
                child: CircleAvatar(
                  backgroundColor: Colors.white,
                  child: Text(
                    data['date'],
                    style: TextStyle(color: Colors.black, fontSize: 12),
                  ),
                  radius: 13,
                ),
              ),
            ),
          ],
        );
      }).toList(),
    );
  }
}

Answer 1

尝试使用此技巧：

替换

.map()

使用

.asMap().entries.map()

例如：

children: upComingDay.asMap().entries.map((dataEntry) {
        return Column(
          children: <Widget>[
            Text(
              dataEntry.value['day'],
              style: TextStyle(
                color: Color.fromRGBO(30, 41, 51, 0.5),
              ),
            ),
            SizedBox(
              height: 7,
            ),
            GestureDetector(
              onTap: () {
                // Whatever you wanna use the index for, refer as dataEntry.key for index
              },
              child: CircleAvatar(
                backgroundColor: Color.fromRGBO(240, 242, 245, 1),
                radius: 14,
                child: CircleAvatar(
                  backgroundColor: Colors.white,
                  child: Text(
                    dataEntry.value['date'],
                    style: TextStyle(color: Colors.black, fontSize: 12),
                  ),
                  radius: 13,
                ),
              ),
            ),
          ],
        );
      }).toList(),

能满足您的需求吗？

如何在颤抖的行中获取选定的索引

1 个答案: