使flutter表日历可调整大小以防止键盘溢出

2skhul33 于 2022-12-14 发布在 Flutter

关注(0)|答案(2)|浏览(106)

我使用的是table_calendar软件包。
我想在日历下面显示当前日期的事件。在事件下面我有一个textfield来创建一个新事件。每当我试图创建一个新事件时，textfield不会显示，因为它被日历溢出了。
我试过使用SingleChildScrollView，将我的Expanded更改为Container，并设置了resizeToAvoidBottomInset: false。
下面是我的代码和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,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
      ]),
    );
  }

第一次
先谢了

flutter

来源：https://stackoverflow.com/questions/74753770/make-flutter-table-calendar-resizeable-to-stop-keyboard-from-overflowing

2条答案

按热度按时间

0wi1tuuw1#

如果您的ListView的Item不是太长，您可以使用SingleChildScrollView并将ListView的shrinkWrap设置为true，不要忘记删除Expanded小部件，尝试以下操作：

SingleChildScrollView(//<-- add this
        child: 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;
                },
              ),
            ),
          ),
          ValueListenableBuilder<List<Event>>(//<--- change this
            valueListenable: _selectedEvents,
            builder: (context, value, _) {
              return ListView.builder(
                shrinkWrap: true, //<-- add this
                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,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ]),
      )

赞(0）回复(0）举报 2022-12-14

tktrz96b2#

您可以使用shrinkWarp = true将整个TableCalendar Package 在ListView中，然后将ListView Package 到Expanded中。这样，当键盘打开时，日历将在ListView中有足够的空间，但仍适合列。

Expanded(
      child: ListView(
        shrinkWrap: true,
        children: [
          Padding(
            padding: const EdgeInsets.fromLTRB(10, 20, 10, 10),
            child: Container(
              //  height: 400,
              color: Colors.black,
              child: TableCalendar(),
            ),
          ),
        ],
      ),
    ),

赞(0）回复(0）举报 2022-12-14

我来回答

使flutter表日历可调整大小以防止键盘溢出

2条答案

相关问题

热门标签

最新问答