如何调整Flutter表格日历的大小

Question

我是一名中文翻译，需要翻译的内容与IT技术相关。您需要将日历缩小并在其下方显示一些内容，因此我需要进行翻译。我尝试使用如下所示的SizedBox：

Column(
  children: [
    SizedBox(
      height: 500,
      child: TableCalendar(
        firstDay: firstDay,
        lastDay: lastDay,
        focusedDay: focusedDay)),
    Text("Content goes \n\n\n\n\n\n\n\n\n\n\n\n\n\n\nhere")
  ],
),

但这只是裁剪了它。我该如何正确地调整日历的大小？

更新：使用FittedBox无效，如果您设置宽度，则可以正确地调整大小，但高度仍然被裁剪。

- Michael Eliosov

Answer 1

我查看了他们的源代码，找到了shouldFillViewport，可以解决你的使用情况。

你还需要将TableCalendar包裹在一个Expanded小部件中。

 Column(
    children: [
      Expanded(
        child: SizedBox(
          height: 500,
          width: 300,
          child: TableCalendar(
              shouldFillViewport: true,
              firstDay: DateTime(2020),
              lastDay: DateTime(2021),
              focusedDay: DateTime(2020),
        ),
      ),
      Text("Content goes \n\n\n\n\n\n\n\n\n\n\n\n\n\n\nhere")
    ],
  ),

- Nisanth Reddy

---

这个错误是由于RenderFlex的子组件具有非零的弹性，但传入的宽度约束是无界限的。看起来这个问题源自于table_calendar API。 - Michael Eliosov

你可以给你的 SizedBox 也设置一个宽度吗？ - Nisanth Reddy

添加了一张图片。这是你想要的吗？ - Nisanth Reddy

我正在使用 table_calendar，这样可以避免溢出问题，但是我无法控制高度。所有的内容都铺满整个屏幕，看起来非常糟糕。月份似乎无法适应宽度，并且垂直对齐不准确。 - West

将您的TableCalendar放置在一个高度约束为您预期高度的容器内。这可能会解决您的问题。 - Nisanth Reddy

Answer 2

还需要指定宽度。

代码应该是

  Column(
    children: [
      SizedBox(
        height: 500,
        width: 300,
        child: TableCalendar(
          firstDay: DateTime(2021, 1, 1),
          lastDay: DateTime(2021, 9, 1),
          focusedDay: DateTime.now()
        )
      ),
      Text("Content goes here")
    ],
  ),

根据需要修改高度和宽度。

更新：

为了解决底部溢出问题，可使用Expanded对SizedBox进行包裹。

示例：

  Column(
    children: [
      Expanded(
        child: SizedBox(
          height: 500,
          width: 300,
          child: TableCalendar(
            firstDay: DateTime(2021, 1, 1),
            lastDay: DateTime(2021, 9, 1),
            focusedDay: DateTime.now()
          )
        ),
      ),
      Text("Content goes here")
    ],
  ),

- Saied Islam Shuvo

---

这样可以正确调整宽度，但高度仍然会被裁剪并抛出A RenderFlex overflowed by x pixels on the bottom的错误提示。 - Michael Eliosov

用Expanded小部件包裹SizedBox，参见更新。 - Saied Islam Shuvo