如何调整 Flutter 表日历的大小答案

【问题标题】：How to resize a Flutter Table Calendar如何调整 Flutter 表日历的大小
【发布时间】：2021-05-30 15:49:53
【问题描述】：

Flutter 新手。我需要在下面显示一个日历和一些内容，所以我需要使日历更小。我试过使用这样的 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 不起作用，如果您输入宽度，它会正确调整大小，但高度仍然只是剪辑

【问题讨论】：

标签： flutter dart

【解决方案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")
    ],
  ),

【讨论】：

这给出了一个错误 RenderFlex children have non-zero flex but incoming width constraints are unbounded ，这似乎源于 table_calendar API
你能给你的SizedBox一个宽度吗？
你用的是哪个包？
table_calendar，应该是自动调整大小
还添加了一张图片。这是你想要的吗？

【解决方案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")
    ],
  ),

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

更新：

用于修复底部溢出包装带扩展的 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")
    ],
  ),

【讨论】：

这正确地调整了宽度，但高度仍然只是剪辑和抛出A RenderFlex overflowed by x pixels on the bottom
用 Expanded 小部件包装 SizedBox，查看更新