Flutter 用按钮创建特殊表

Question

我有一个小任务，但是，我一直试图在 Flutter 中重现这个 2 天，但不幸的是无法管理它。 会请你帮我一点忙。 它应该是一个带有按钮的表格，您可以在特定时间以客户身份预订，但如果有人已经预订了两者之间的东西，您只能预订该日期或之后的日期，请参阅视频。 如果这是一个不寻常的问题，我很抱歉，但是，我很绝望 提前谢谢你。

PS：重要的是要提到设计不如功能重要

视频

Answer 1

您可以在 Table 小部件中使用Table小部件和ElevatedButton ，如下所示：

    Table(
      border: TableBorder.all(),
      columnWidths: const <int, TableColumnWidth>{
        0: FixedColumnWidth(96),
        1: FixedColumnWidth(96),
        2: FixedColumnWidth(96),
        3: FixedColumnWidth(96),
        4: FixedColumnWidth(96),
      },
      defaultVerticalAlignment: TableCellVerticalAlignment.middle,
      children: <TableRow>[
        TableRow(
          children: <Widget>[
            Container(
              height: 64,
              color: Colors.grey[200],
            ),
            Container(
              height: 64,
              color: Colors.grey[200],
            ),
            Container(
              height: 64,
              color: Colors.grey[200],
            ),
            Container(
              height: 64,
              color: Colors.grey[200],
            ),
            Container(
              height: 64,
              color: Colors.grey[200],
            ),
          ],
        ),
        TableRow(
          decoration: const BoxDecoration(
            color: Colors.grey,
          ),
          children: <Widget>[
            Container(
              height: 64,
              color: Colors.grey[200],
            ),
            SizedBox(
              height: 64,
              child: ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.orange,
                ),
                child: const Icon(
                  Icons.check,
                  color: Colors.white,
                ),
              ),
            ),
            SizedBox(
              height: 64,
              child: ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.grey[400],
                ),
                child: Icon(
                  Icons.dangerous,
                  color: Colors.grey[600],
                ),
              ),
            ),
            SizedBox(
              height: 64,
              child: ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.white,
                ),
                child: Container(),
              ),
            ),
            SizedBox(
              height: 64,
              child: ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.white,
                ),
                child: Container(),
              ),
            ),
          ],
        ),
      ],
    )