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(),
              ),
            ),
          ],
        ),
      ],
    )