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
相关产品推荐
相关产品推荐

