You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter TableCalendar自适应调整避免键盘遮挡输入框问题求助

Flutter TableCalendar自适应调整避免键盘遮挡输入框问题求助

各位好,我目前在使用table_calendar开发一个带事件管理的日历功能,期望实现的效果是:日历下方展示当前选中日期的事件列表,列表下方放置一个输入框用于新增事件。

但现在遇到了一个棘手的问题:当我点击输入框准备创建新事件时,输入框会因为布局溢出而无法正常显示,被日历或者键盘挤得看不见了。

我已经尝试了以下几种方案,但都没能解决问题:

  • 使用SingleChildScrollView包裹页面内容
  • 将布局中的Expanded组件替换为Container
  • 设置Scaffold的resizeToAvoidBottomInset: false

下面是我的完整代码,以及对应的UI截图([示例UI截图]):

@override
Widget build(BuildContext context){
  return Scaffold(
    resizeToAvoidBottomInset: false,
    body: Column(
      children: [
        Padding(
          padding: const EdgeInsets.fromLTRB(10, 20, 10,10),
          child: Container(
            //height: 400,
            color: Colors.black,
            child: TableCalendar(
              rowHeight: 50,
              firstDay: FirstDay,
              lastDay: LastDay,
              focusedDay: _focusedDay,
              selectedDayPredicate: (day){
                return isSameDay(_selectedDay, day);
              },
              onDaySelected: (selectedDay, focusedDay){
                setState(() {
                  _selectedDay = selectedDay;
                  _focusedDay = focusedDay;
                });
              },
              calendarFormat: _calendarFormat,
              onFormatChanged: (format){
                setState(() {
                  _calendarFormat = format;
                });
              },
              eventLoader: _getEventsForDay,
              startingDayOfWeek: StartingDayOfWeek.monday,
              calendarStyle: CalendarStyle(
                outsideDaysVisible: false,
              ),
              onRangeSelected: _onRangeSelected,
              onPageChanged: (focusedDay) {
                _focusedDay = focusedDay;
              },
            ),
          ),
        ),
        Expanded(
          child: ValueListenableBuilder<List<Event>>(
            valueListenable: _selectedEvents,
            builder: (context, value, _) {
              return ListView.builder(
                itemCount: value.length,
                itemBuilder: (context, index) {
                  return Container(
                    margin: const EdgeInsets.symmetric(
                      horizontal: 12.0,
                      vertical: 2.0,
                    ),
                    decoration: BoxDecoration(
                      border: Border.all(),
                      borderRadius: BorderRadius.circular(12.0),
                      color: Colors.black,
                    ),
                    child: ListTile(
                      onTap: () => print('${value[index]}'),
                      title: Text('${value[index]}'),
                      trailing: Wrap(
                        children: [
                          IconButton(icon: Icon(Icons.edit), onPressed: () => onPressEdit()),
                          IconButton(icon: Icon(Icons.delete, color: Colors.red), onPressed: () => onPressDelete()),
                        ],
                      ),
                    ),
                  );
                },
              );
            },
          ),
        ),
        Container(
          height:50,
          child: Padding(
            padding: const EdgeInsets.all(5),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(
                      contentPadding: EdgeInsets.only(left:15),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(30.0),
                      ),
                      hintText: 'Add event on ${formatter.format(_focusedDay)}',
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(left:10),
                  child: FloatingActionButton(
                    onPressed: () {
                      selectedEvents[_selectedDay]?.add(Event2(title: "Test title"));
                      print("test");
                      setState((){});
                      print(selectedEvents);
                      return;
                    },
                    backgroundColor: Colors.black,
                    child:
                    const Text('+',
                      style: TextStyle(color: Colors.white,
                        fontSize: 30,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ]),
  );
}

有没有朋友能帮我分析下问题所在,或者给出可行的布局调整方案,让输入框在键盘弹出时也能正常显示,不会出现溢出的情况?非常感谢!

备注:内容来源于stack exchange,提问作者MatsL

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.23 07:08:07