Flutter 创建一个周的索引列表，每个列表中都有一个小时的列表

这是一张我以静态形式所做的图片：

实现我所做的工作的代码是：

Widget build(BuildContext context) {
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: 7,
      itemBuilder: (BuildContext context, int index) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Column(
              children: [
                Container(
                  height: 50,
                  width: 117,
                  child: Card(
                    color: Colors.orange,
                    child: Center(
                        child: Text(
                      WeekDays.days[index],
                      style: TextStyle(fontSize: 12, color: Colors.white),
                    )),
                  ),
                ),
                Container(
                  height: 250,
                  width: 117,
                  child: ListView.builder(
                    itemCount: ReservationTime.hours.length,
                    itemBuilder: (BuildContext context, int index) {
                      return Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Column(
                                children: [
                                  Container(
                                    height: 50,
                                    width: 117,
                                    child: GestureDetector(
                                      onTap: () {
                                      },
                                      child: new Card(
                                        elevation: 10,
                                        child: Center(child: Text(ReservationTime.hours[index],style: TextStyle(fontSize: 12,color: Colors.white))),
                                    ),
                                  ),),
                                ]
                              ),
                            ],
                          ),
                        ],
                      );
                    },
                  ),

我获取水平周天数数据的2个列表是：

class WeekDays {
  static final List<String> days = ['Monday 07 Dic', 'Tuesday 08 Dic', 'Wednesday 09 Dic', 'Thursday 10 Dic', 'Friday 11 Dic', 'Saturday 12 Dic', 'Sunday 13 Dic'];
}

班级工作日{
静态最终列表天数=[‘星期一07 Dic’、‘星期二08 Dic’、‘星期三09 Dic’、‘星期四10 Dic’、‘星期五11 Dic’、‘星期六12 Dic’、‘星期日13 Dic’]；
}

对于垂直列表：

class ReservationTime {
  static final List<String> hours = ['00.00 - 00.20', '00.20 - 00-40', '00.40 - 01.00', '01.00 - 01.20', '01.20 - 01.40','01.40 - 02.00','02.00 - 02.20','02.20 - 02.40','02.40 - 03.00','03.00 - 03.20','03.20 - 03.40','03.40 - 04.00','04.00 - 04.20','04.20 - 04.40','04.40 - 05.00'];
}

类保留时间{
静态最终列表时间=['00.00-00.20'、'00.20-00-40'、'00.40-01.00'、'01.00-01.20'、'01.40-01.40'、'01.40-02.00'、'02.00-02.20'、'02.20-02.40'、'02.40-03.00'、'03.20-03.40'、'03.40-04.00'、'04.00-04.20'；
}

根据图片，我想做的是用红色箭头标记的按钮将周列表切换到下周，用其他箭头切换到上周。 当然，我需要得到一周中的当前日期和一年中所有周的索引。 我知道我的方法有些错误，但我来这里是想问问是否有人知道如何做到这一点。

---

我需要创建一个日历，允许用户通过单击每个元素来预订时间，然后该元素将更改颜色并将其状态发送到数据库。

将所有内容包装在PageView.builder中，并向其提供PageController

PageView.builder(
    controller: _pageController,
      itemBuilder: (context, weekIndex) {
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: 7,
      itemBuilder: (BuildContext context, int index) {
        DateTime now = DateTime.now();
        int milliseconds = now.millisecondsSinceEpoch - (now.weekday - 1)*24*60*60*1000 + weekIndex*7*24*60*60*1000 + index*24*60*60*1000;
        DateTime dayDateTime = DateTime.fromMillisecondsSinceEpoch(milliseconds);
        int monthIndex = dayDateTime.month - 1;
        List months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        List weekdays = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'];
        String month = months[monthIndex];
        String day = dayDateTime.day.toString();
        String weekday = weekdays[dayDateTime.weekday - 1];
        String date = weekday + ' ' + day + ' ' + month;
        return Row(mainAxisAlignment: MainAxisAlignment.center, children: [
          Column(children: [
            Container(
              height: 50,
              width: 117,
              child: Card(
                color: Colors.orange,
                child: Center(
                    child: Text(
                  date,
                  style: TextStyle(fontSize: 12, color: Colors.white),
                )),
              ),
            ),
            Container(
                height: 250,
                width: 117,
                child: ListView.builder(
                  itemCount: ReservationTime.hours.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Column(
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Column(children: [
                              Container(
                                height: 50,
                                width: 117,
                                child: GestureDetector(
                                  onTap: () {},
                                  child: new Card(
                                    elevation: 10,
                                    child: Center(
                                        child: Text(
                                            ReservationTime.hours[index],
                                            style: TextStyle(
                                                fontSize: 12,
                                                color: Colors.white))),
                                  ),
                                ),
                              ),
                            ]),
                          ],
                        ),
                      ],
                    );
                  },
                ))
          ])
        ]);
      });})

在构建外部，您希望通过初始化PageController

PageController _pageController = PageController();

现在，要获得转到下一页的按钮，请使用PageController方法：

_pageController.nextPage(duration: Duration(milliseconds: 1000), curve: Curves.ease)

同样地，回到过去：

_pageController.previousPage(duration: Duration(milliseconds: 1000), curve: Curves.ease)

---

first ListView.builder中的块显示了如何为每天指定正确的日期，可能有更优雅的方法来完成此操作…

选择是单个还是多个？垂直列表中的每个项目的选择都是单个的。最重要的是水平每周列表索引您希望用户能够自由水平滚动吗？或者它应该总是折断，因此，星期一位于最左边的位置？横向而言，用户应更改每周视图，以便可以自由单击上面的按钮>，转到下一周和<上一周，然后列表的内容应根据周数据的大小。好的，很好，但如何根据实际周获取周索引今天11 dic。。还有一个？请参阅我刚才对如何设置日期所做的编辑。这就是你需要的吗？对不起，我把代码放错地方了，它工作得很好！在ListView生成器中，如果您调用

now.weekday

它将返回一个int值1->7（周一为1，周日为7），因此如果工作日是今天的工作日（周六），则

now.weekday==index+1

（因为索引从0->6开始）为真。但是，这适用于所有周六，因此您希望使用

now.weekday==index+1&&weekIndex==0

，以确保它不适用于未来的周六。该方法的工作原理是获取当前日期和时间（以“自历元起的毫秒数”表示），然后减去N天的毫秒数，得到当前周的星期一，这就是

now.millissecondssinceepoch-（now.weekday-1）*24*60*60*1000

正在做的事情。在此之前，我添加了两个额外的术语来按周（weekIndex*7*24*60*60*1000）和天（index*24*60*60*1000）移动毫秒。要按一个月移动，您需要一个类似monthIndex*30*7*24*60*60*1000的术语，其中需要重新标记weekIndex->monthIndex。