Question

在列中，我有两个小部件： TableCalendar 和一个包含 ListView.builder 的容器。两者都有动态尺寸。

我希望我的容器填充日历中剩余的屏幕尺寸。

我认为我可以用 Expanded 小部件来包装这两个小部件，但这只会导致错误。

在performLayout（）期间引发了以下断言：RenderFlex 子项的flex值非零，但传入的高度限制无界的。

这是我的代码：

child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TableCalendar(
              events: _events, //fixme: here is the problem
              initialCalendarFormat: CalendarFormat.twoWeeks,
              calendarController: _controller,
              calendarStyle: CalendarStyle(),
              headerStyle: HeaderStyle(
                centerHeaderTitle: true,
                formatButtonDecoration: BoxDecoration(
                  color: Colors.pinkAccent.shade100,
                  borderRadius: BorderRadius.circular(20.0),
                ),
                formatButtonShowsNext: false,
              ),
              startingDayOfWeek: StartingDayOfWeek.monday,
              onDaySelected: (date, events) {
                setState(() {
                  _listOfShiftsPerGivenDay = events;
                });
              },
              builders: CalendarBuilders(
                  selectedDayBuilder: (context, date, events) => Container(
                        alignment: Alignment.center,
                        margin: EdgeInsets.all(4.0),
                        color: Colors.pink,
//                        decoration: BoxDecoration(),
                        child: Text(
                          date.day.toString(),
                        ),
                      ),
                  todayDayBuilder: (context, date, events) => Container(
                        alignment: Alignment.center,
                        margin: EdgeInsets.all(4.0),
                        color: Colors.teal.shade100,
                        child: Text(
                          date.day.toString(),
                          style: TextStyle(
                              fontWeight: FontWeight.bold, fontSize: 18.0),
                        ),
                      ),
                  markersBuilder: (context, date, events, holidays) {
                    final children = <Widget>[];

                    if (events.isNotEmpty) {
                      children.add(
                        Positioned(
                          right: 1,
                          bottom: 1,
                          child: _buildEventsMarker(date, events),
                        ),
                      );
                    }
                    return children;
                  }),
            ),
            Container(
              //fixme: the hight needs to be variable
              height: 200.0,
              child: ListView.builder(
                itemCount: _listOfShiftsPerGivenDay.length,
                itemBuilder: (context, index) => Container(
                  width: MediaQuery.of(context).size.width,
                  padding:
                      EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
                  child: _events[_controller.selectedDay][index],
//                  ),
                ),
              ),
            )
          ],
        ),

Answer 1

开始时主列的父级是什么？是另一栏吗？

在这种情况下，请尝试在列开头以Expanded包裹，这将对其子对象施加高度限制，然后可以使用Expanded on Container。

child: Expanded(
  child: Column(
    children: <Widget>[

      TableCalendar();

      Expanded(
        child: Container()
      )
  ])

如果您想了解更多信息，我已经在《 Medium》上写了article，说明了为什么会发生这种情况。

Answer 2

如果将ListView()包装在扩展中怎么办？

child: Column(
  children: <Widget>[

    TableCalendar();

    Expanded(
      child: ListView.builder()
    )
])

使整个屏幕具有两个动态小部件

2 个答案: