主页 / user-20601090

jon's questions

Martin Hope
jon
Asked: 2023-11-10 23:17:52 +0800 CST
  • 5

我想改变 html 表格的样式。现在看起来像这样：在此输入图像描述

这是代码：

    <div className="student-schedule">
      <table className="student-calendar-table">
        <thead>
          <tr>
            <th className=''></th>
            {weekDays.map((day) => (
              <th className='student-th border-left' colSpan={6} key={day}>
                {day}
              </th>
            ))}
          </tr>
          <tr>
            <th className=''></th>
            {dates.map((date) => (
              <th className='student-th border-left' colSpan={6} key={date}>
                {date}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {timeSlots.map((time, i) => (
            <tr key={time}>
              <td className='student-td cell'>{time}</td>
              {tableCells[i].map((cell, index) => {
                const cellsLen = cell.length;
                const tdElements = [];
                if (cellsLen < 4) {
                  for (let j = 0; j < cellsLen; j++) {
                    tdElements.push(<td onClick={() => handleCellClick(cell[j])} className={findCss(cell[j], j)} key={index + '-' + j} colSpan={6 / cellsLen}>{cell[j].isReserved ? cell[j].lessonWith : cell[j].lessonWith}</td>);
                  }
                  return tdElements;
                }
                else {
                  return (<td onClick={() => OpenMultipleInstructorPopupVisible(cell)} className='student-td multiple-instructors student-block border-left' colSpan={6}>3+ osoby</td>);
                }

              })}

            </tr>
          ))}
        </tbody>
      </table>
      <div>
        {isReservationPopupVisible && <ReservationPopup onClose={closePopup} block={block} myReservations={myReservations} blocks={blocks} />}
        {isMultipleInstructorPopupVisible && <MultipleInstructorsPopup onClose={closePopup} blocks={extraInstructors} myReservations={myReservations} allBlocks={blocks} />}
      </div>
    </div>

和CSS：

.student-th{
  color: rgb(71, 71, 71);
}
.student-td {
  border-radius: 10px;
  border-right: 3px solid #dedbd9; 
  border-left: 3px solid #dedbd9; 
  border-top: 1px solid #dedbd9; 
  border-bottom: 1px solid #dedbd9;
  color: rgb(71, 71, 71);
  box-sizing:content-box;
}

.student-calendar-table {
  border-collapse: separate;
  background-color: #dedbd9;
  margin: auto;
  width: 98%;
  border-radius: 30px; 
  overflow: hidden;
  margin: 0 auto; 
}

/* .border-left {
  border-left: 10px solid #f70b0b;
} */

.cell {
  height: 80px;
}

.student-block {
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
  color: rgb(71, 71, 71);
}

该findCss函数所做的只是处理颜色。我一直在与两件非常糟糕的事情作斗争：

  1. 为每列设置相同的宽度，无论列中有多少个块
  2. 我希望每天的列之间的空间像下面的屏幕截图一样，其中列的宽度（标记为蓝色框）大小相同，并且列之间有很好的间隙，不会切割第一个单元格的左边框每列（标记为红色）。现在，我通过为每个第一个单元格设置 border-left 来实现这个切割间隙，如下所示：
.border-left {
  border-left: 10px solid #dedbd9;
}

但这并不能解决问题，因为左侧被切断了。我将不胜感激的帮助

在此输入图像描述

<div class="student-schedule"><table class="student-calendar-table"><thead><tr><th class=""></th><th class="student-th border-left" colspan="6" style="width: 200px;">Poniedziałek</th><th class="student-th border-left" colspan="6" style="width: 200px;">Wtorek</th><th class="student-th border-left" colspan="6" style="width: 200px;">Środa</th><th class="student-th border-left" colspan="6" style="width: 200px;">Czwartek</th><th class="student-th border-left" colspan="6" style="width: 200px;">Piątek</th><th class="student-th border-left" colspan="6" style="width: 200px;">Sobota</th><th class="student-th border-left" colspan="6" style="width: 200px;">Niedziela</th></tr><tr><th class=""></th><th class="student-th border-left" colspan="6" style="width: 200px;">13/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">14/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">15/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">16/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">17/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">18/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">19/11/2023</th></tr></thead><tbody><tr><td class="student-td cell">8:00</td><td class="student-td student-block instructor-0 border-left" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-1" colspan="3">Aneta Gajos</td><td class="student-td student-block instructor-2 border-left" colspan="2">Krzysztof Wiśniewski</td><td class="student-td not-available student-block-unavailable" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-1 border-left" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-2" colspan="2">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-0 border-left" colspan="6">Paweł Jankowski</td><td class="student-td student-block instructor-0 border-left" colspan="6">Paweł Jankowski</td><td class="student-td student-block instructor-2 border-left" colspan="6">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-0 border-left" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-3" colspan="3">Robert Maj</td></tr><tr><td class="student-td cell">10:00</td><td class="student-td student-block instructor-0 border-left" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-1" colspan="3">Aneta Gajos</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td><td class="student-td not-available student-block-unavailable" colspan="2">Aneta Gajos</td><td class="student-td not-available student-block-unavailable" colspan="2">Krzysztof Wiśniewski</td><td class="student-td reserved-by-me student-block" colspan="2">Robert Maj</td><td class="student-td student-block instructor-3 border-left" colspan="3">Robert Maj</td><td class="student-td student-block instructor-0" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-2 border-left" colspan="3">Krzysztof Wiśniewski</td><td class="student-td not-available student-block-unavailable" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-1 border-left" colspan="3">Aneta Gajos</td><td class="student-td student-block instructor-2" colspan="3">Krzysztof Wiśniewski</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td></tr><tr><td class="student-td cell">12:00</td><td class="student-td student-block instructor-0 border-left" colspan="3">Paweł Jankowski</td><td class="student-td not-available student-block-unavailable" colspan="3">Aneta Gajos</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td><td class="student-td student-block instructor-1 border-left" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-2" colspan="2">Krzysztof Wiśniewski</td><td class="student-td not-available student-block-unavailable" colspan="2">Robert Maj</td><td class="student-td student-block instructor-3 border-left" colspan="3">Robert Maj</td><td class="student-td student-block instructor-0" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-2 border-left" colspan="2">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-0" colspan="2">Paweł Jankowski</td><td class="student-td not-available student-block-unavailable border-left" colspan="2">Aneta Gajos</td><td class="student-td not-available student-block-unavailable" colspan="2">Robert Maj</td><td class="student-td not-available student-block-unavailable" colspan="2">Krzysztof Wiśniewski</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td></tr><tr><td class="student-td cell">14:00</td><td class="student-td not-available student-block-unavailable border-left" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-1" colspan="3">Aneta Gajos</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td><td class="student-td student-block instructor-1 border-left" colspan="2">Aneta Gajos</td><td class="student-td not-available student-block-unavailable" colspan="2">Krzysztof Wiśniewski</td><td class="student-td not-available student-block-unavailable" colspan="2">Robert Maj</td><td class="student-td student-block instructor-3 border-left" colspan="3">Robert Maj</td><td class="student-td student-block instructor-0" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-2 border-left" colspan="2">Krzysztof Wiśniewski</td><td class="student-td not-available student-block-unavailable" colspan="2">Robert Maj</td><td class="student-td not-available student-block-unavailable" colspan="2">Paweł Jankowski</td><td class="student-td student-block instructor-1 border-left" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-2" colspan="2">Krzysztof Wiśniewski</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td></tr><tr><td class="student-td cell">16:00</td><td class="student-td not-available student-block-unavailable border-left" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-1" colspan="3">Aneta Gajos</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td><td class="student-td student-block instructor-2 border-left" colspan="3">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-3" colspan="3">Robert Maj</td><td class="student-td student-block instructor-3 border-left" colspan="3">Robert Maj</td><td class="student-td student-block instructor-0" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-2 border-left" colspan="2">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-0" colspan="2">Paweł Jankowski</td><td class="student-td not-available student-block-unavailable border-left" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-2" colspan="2">Krzysztof Wiśniewski</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td></tr><tr><td class="student-td cell">18:00</td><td class="student-td not-available student-block-unavailable border-left" colspan="6">Paweł Jankowski</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td><td class="student-td student-block instructor-2 border-left" colspan="3">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-3" colspan="3">Robert Maj</td><td class="student-td student-block instructor-3 border-left" colspan="3">Robert Maj</td><td class="student-td student-block instructor-0" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-3 border-left" colspan="6">Robert Maj</td><td class="student-td student-block instructor-1 border-left" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-2" colspan="2">Krzysztof Wiśniewski</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td></tr><tr><td class="student-td cell">20:00</td></tr></tbody></table><div></div></div>
html
Martin Hope
jon
Asked: 2023-08-17 16:38:38 +0800 CST
  • 5
  1. 我在代码中遇到错误，LateInitializationError: Field 'sorting' has not been initialized.我需要确保build在 init 中的每个函数完成后执行。initsorting发生在initializeSorting()函数中，但显然build是在sorting初始化之前执行的。
  2. 我也不知道为什么，但打印的打印内容不应该打印tasks空列表，同时打印内容还可以。我正在从另一个小部件传递数据，如下所示：。已经尝试过可空值的方法，但没有成功。完全不知道为什么 和都是空的。[]usertaskTitleTaskSortWidget(onSort: sortTasks, user: user, taskTitle: taskTitle, tasks: tasks)widget.taskstasks
  3. 我将非常感谢任何帮助。

完整的小部件排序代码

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:taskease/classes/task.dart';

enum SortOrder {
  Ascending,
  Descending,
}

enum TaskSortingCriteria {
  Priority,
  DueDate,
  FromDate,
}

class TaskSortWidget extends StatefulWidget {
  final Function(List<Task>) onSort;
  final String user;
  final String taskTitle;
  final List<Task> tasks;

  TaskSortWidget(
      {required this.onSort,
      required this.user,
      required this.taskTitle,
      required this.tasks});

  @override
  _TaskSortWidgetState createState() => _TaskSortWidgetState();
}

class _TaskSortWidgetState extends State<TaskSortWidget> {
  bool loading = false;
  late List<Task> tasks;
  late CollectionReference _collectionRef;
  late final String taskTitle;
  late final String user;
  late Map<String, dynamic> sorting;

  void initState() {
    super.initState();
    setState(() {
      user = widget.user;
      taskTitle = widget.taskTitle;
    });
    tasks = widget.tasks;
    _collectionRef = FirebaseFirestore.instance
        .collection('Users')
        .doc(user)
        .collection('Tasks');
    initializeSorting();
  }

  Future<void> initializeSorting() async {
    setState(() {
      loading = true;
    });
    DocumentSnapshot querySnapshot = await _collectionRef.doc(taskTitle).get();

    if (querySnapshot.exists) {
      Map<String, dynamic> data = querySnapshot.data() as Map<String, dynamic>;
      setState(() {
        sorting = data['sorting'];

      });
    } else {
      print(
          '(sort widget, this message should never show!) Sorting does not exist. Creating one...'); //this else will never execute
      await FirebaseFirestore.instance
          .collection('Users')
          .doc(user)
          .collection('Tasks')
          .doc(taskTitle)
          .set({
        'sorting': {
          '_currentSortOrderPriority': {2, 'Ascending'},
          '_currentSortOrderDueDate': {0, 'Ascending'},
          '_currentSortOrderFromDate': {1, 'Ascending'},
        }
      }, SetOptions(merge: true));
    }
    setState(() {
      loading = false;
    });
    sortTasks();
  }

  void sortTasks() {
    for (int i = 0; i < sorting.length; i++) {
      for (var entry in sorting.entries) {
        if (entry.value[0] == i) {
          SortOrder sortOrder = entry.value[1] == 'Ascending'
              ? SortOrder.Ascending
              : SortOrder.Descending;
          switch (entry.key) {
            case '_currentSortOrderPriority':
              tasks.sort((a, b) =>
                  a.priority.index.compareTo(b.priority.index) *
                  (sortOrder == SortOrder.Ascending ? 1 : -1));
              break;
            case '_currentSortOrderDueDate':
              tasks.sort((a, b) =>
                  a.dueDate!.compareTo(b.dueDate!) *
                  (sortOrder == SortOrder.Ascending ? 1 : -1));
              break;
            case '_currentSortOrderFromDate':
              tasks.sort((a, b) =>
                  a.fromDate!.compareTo(b.fromDate!) *
                  (sortOrder == SortOrder.Ascending ? 1 : -1));
              break;
          }
        }
      }
    }
  }

  void _cycleSortOrder(TaskSortingCriteria sortingCriteria) {
    setState(() {
      switch (sortingCriteria) {
        case TaskSortingCriteria.Priority:
          sorting['_currentSortOrderPriority'][1] =
              sorting['_currentSortOrderPriority'][1] == 'Ascending'
                  ? 'Descending'
                  : 'Ascending';
          switch (sorting['_currentSortOrderPriority'][0]) {
            case 0:
              sorting['_currentSortOrderPriority'][0] = 2;
              sorting['_currentSortOrderDueDate'][0]--;
              sorting['_currentSortOrderFromDate'][0]--;
              break;
            case 1:
              sorting['_currentSortOrderPriority'][0] = 2;
              if (sorting['_currentSortOrderDueDate'][0] == 2)
                sorting['_currentSortOrderDueDate'][0] = 1;
              else
                sorting['_currentSortOrderFromDate'][0] = 1;
              break;
            case 2:
              break;
          }
          break;
        case TaskSortingCriteria.DueDate:
          sorting['_currentSortOrderDueDate'][1] =
              sorting['_currentSortOrderDueDate'][1] == 'Ascending'
                  ? 'Descending'
                  : 'Ascending';
          switch (sorting['_currentSortOrderDueDate'][0]) {
            case 0:
              sorting['_currentSortOrderDueDate'][0] = 2;
              sorting['_currentSortOrderPriority'][0]--;
              sorting['_currentSortOrderFromDate'][0]--;
              break;
            case 1:
              sorting['_currentSortOrderDueDate'][0] = 2;
              if (sorting['_currentSortOrderPriority'][0] == 2)
                sorting['_currentSortOrderPriority'][0] = 1;
              else
                sorting['_currentSortOrderFromDate'][0] = 1;
              break;
            case 2:
              break;
          }
          break;
        case TaskSortingCriteria.FromDate:
          sorting['_currentSortOrderFromDate'][1] =
              sorting['_currentSortOrderFromDate'][1] == 'Ascending'
                  ? 'Descending'
                  : 'Ascending';
          switch (sorting['_currentSortOrderFromDate'][0]) {
            case 0:
              sorting['_currentSortOrderFromDate'][0] = 2;
              sorting['_currentSortOrderPriority'][0]--;
              sorting['_currentSortOrderDueDate'][0]--;
              break;
            case 1:
              sorting['_currentSortOrderFromDate'][0] = 2;
              if (sorting['_currentSortOrderPriority'][0] == 2)
                sorting['_currentSortOrderPriority'][0] = 1;
              else
                sorting['_currentSortOrderDueDate'][0] = 1;
              break;
            case 2:
              break;
          }
          break;
      }
    });
    updateSorting();
    sortTasks();
    widget.onSort(tasks);
  }

  Future<void> updateSorting() async {
    await _collectionRef.doc(taskTitle).set({
      'sorting': toJson(),
    }, SetOptions(merge: true));
  }

  Map<String, dynamic> toJson() {
    return {
      '_currentSortOrderPriority': {
        sorting['_currentSortOrderPriority'][0],
        sorting['_currentSortOrderPriority'][1],
      },
      '_currentSortOrderDueDate': {
        sorting['_currentSortOrderDueDate'][0],
        sorting['_currentSortOrderDueDate'][1],
      },
      '_currentSortOrderFromDate': {
        sorting['_currentSortOrderFromDate'][0],
        sorting['_currentSortOrderFromDate'][1],
      },
    };
  }

  Widget _buildSortButton(String label, TaskSortingCriteria sortingCriteria) {
    print(sorting);
    IconData icon;
    switch (sortingCriteria) {
      case TaskSortingCriteria.Priority:
        icon = sorting['_currentSortOrderPriority'][1] == SortOrder.Ascending
            ? Icons.arrow_upward
            : Icons.arrow_downward;
        break;
      case TaskSortingCriteria.DueDate:
        icon = sorting['_currentSortOrderDueDate'][1] == SortOrder.Ascending
            ? Icons.arrow_upward
            : Icons.arrow_downward;
        break;
      case TaskSortingCriteria.FromDate:
        icon = sorting['_currentSortOrderFromDate'][1] == SortOrder.Ascending
            ? Icons.arrow_upward
            : Icons.arrow_downward;
        break;
      default:
        print('error');
        icon = Icons.error;
    }

    return ElevatedButton.icon(
      onPressed: () {
        print('sorting by $sortingCriteria');
        _cycleSortOrder(sortingCriteria);
      },
      icon: Icon(icon),
      label: Text(label),
    );
  }

  @override
  Widget build(BuildContext context) {
    setState(() {
      tasks = widget.tasks;
    });
    return loading
        ? Center(child: CircularProgressIndicator())
        :
      Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        _buildSortButton('Sort by Priority', TaskSortingCriteria.Priority),
        SizedBox(width: 6),
        _buildSortButton('Sort by Due Date', TaskSortingCriteria.DueDate),
        SizedBox(width: 6),
        _buildSortButton('Sort by From Date', TaskSortingCriteria.FromDate),
      ],
    );
  }
}

来自另一个小部件的 WIDGET_SORT 调用

class TasksList extends StatefulWidget {
  late final String user;
  late final String taskTitle;

  TasksList({required this.user, required this.taskTitle});

  @override
  State<TasksList> createState() => _TasksListState();
}

class _TasksListState extends State<TasksList> {
  List<Task> tasks = [];
  Set<int> usedIds = Set();
  late String taskTitle;
  late final String user;
  late CollectionReference _collectionRef;
  @override
  void initState() {
    super.initState();
    user = widget.user;
    taskTitle = widget.taskTitle;

    _collectionRef = FirebaseFirestore.instance
        .collection('Users')
        .doc(user)
        .collection('Tasks');

    initializeData();
    initializeSorting();
  }

  Future<void> initializeSorting() async {
DocumentSnapshot querySnapshot = await _collectionRef.doc(taskTitle).get();

    if (!querySnapshot.exists) {
      print('Sorting does not exist. Creating one...');
      await FirebaseFirestore.instance
          .collection('Users')
          .doc(user)
          .collection('Tasks').doc(taskTitle).set
        ({
        'sorting': {
          '_currentSortOrderPriority': {2, 'Ascending'},
          '_currentSortOrderDueDate': {0, 'Ascending'},
          '_currentSortOrderFromDate': {1, 'Ascending'},
        }
      }, SetOptions(merge: true));
    }
}

  Future<void> initializeData() async {
    List<Task> fetchedTasks = await initializeTasks();
    initializeUsedIds(fetchedTasks);
  }

  void initializeUsedIds(List<Task> tasks) {
    for (Task task in tasks) {
      usedIds.add(task.id);
    }
  }

  Future<List<Task>> initializeTasks() async {...}

  Future<List<Task>> getDailyTasks() async {...}

  void sortTasks(List<Task> sortedTasks){
    setState(() {
      this.tasks = sortedTasks;
    });
  }

 @override
  Widget build(BuildContext context) {
    // print(tasks);
    return Scaffold(
      appBar: AppBar(
        title: Text(taskTitle),
      ),
      body: Column(
        children: [
          TaskSortWidget(onSort: sortTasks, user: user, taskTitle: taskTitle, tasks: tasks), //calling task sort
          Expanded(
            child: ListView.builder(
              itemCount: tasks.length,
              itemBuilder: (BuildContext context, int index) {
                if (index == tasks.length) {
                  return Container();
                }
    //rest of code here
    }

``
flutter