【问题标题】: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,查看更新
    猜你喜欢
    • 2018-08-03
    • 2019-10-09
    • 1970-01-01
    • 1970-01-01
    • 2021-04-05
    • 2012-01-01
    • 2022-11-23
    • 2022-11-22
    • 2012-12-16
    相关资源
    最近更新 更多