时间戳

首页 > 解决方案 > 用两个动态小部件适应整个屏幕

flutter - 用两个动态小部件适应整个屏幕

问题描述

在一个Column我有两个小部件：TableCalendar和一个包含ListView.builder的容器。两者都有动态大小。

我希望我的 Container 填充日历中剩余的屏幕大小。

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

在 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],
//                  ),
                ),
              ),
            )
          ],
        ),

标签： flutterflutter-layout

解决方案

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

如果是这种情况，请尝试在开头使用 Expanded 包装 Column，这将强制对其子项进行高度约束，然后您可以在 Container 上使用 Expanded。

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

      TableCalendar();

      Expanded(
        child: Container()
      )
  ])

如果您想了解更多信息，我已经在 Medium 上写了一篇关于为什么会发生这种情况的文章。

推荐阅读