Flutter：如何在 bottomsheet 中创建一个日期 Select 器，如下图所示

发布于04月16日

我需要设计一个日期选取器作为一个列内的小部件包含另一个小部件，而不是弹出日期选取器

有没有人能告诉我怎么把它作为PIC来实现

推荐答案

您可以使用table_calendar或您需要的任何其他自定义小部件:

class CalendarBottomSheet extends StatefulWidget {
  const CalendarBottomSheet({Key key}) : super(key: key);

  @override
  State<CalendarBottomSheet> createState() => _CalendarBottomSheetState();
}

class _CalendarBottomSheetState extends State<CalendarBottomSheet> {
  DateTime _selectedDate;

  @override
  void initState() {
    super.initState();
    _selectedDate = DateTime.now();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var height = MediaQuery.of(context).size.height;
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: const Text('Show Calendar'),
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (BuildContext context) {
                return SizedBox(
                  height: height * 0.6,
                  child: Column(
                    children: <Widget>[
                      TableCalendar(
                        firstDay: DateTime(2000),
                        lastDay: DateTime(2050),
                        focusedDay: DateTime.now(),
                        calendarFormat: CalendarFormat.month,
                        calendarStyle: CalendarStyle(
                          selectedDecoration: BoxDecoration(
                            color: Theme.of(context).primaryColor,
                            shape: BoxShape.circle,
                          ),
                          todayDecoration: BoxDecoration(
                            color: Colors.grey[300],
                            shape: BoxShape.circle,
                          ),
                        ),
                        selectedDayPredicate: (date) {
                          return isSameDay(_selectedDate, date);
                        },
                        onDaySelected: (date, focusedDay) {
                          setState(() {
                            _selectedDate = date;
                          });
                          Navigator.pop(context);
                        },
                        calendarBuilders: CalendarBuilders(
                          selectedBuilder: (context, date, _) => Container(
                            decoration: BoxDecoration(
                              color: Theme.of(context).primaryColor,
                              shape: BoxShape.circle,
                            ),
                            child: Center(
                              child: Text(
                                date.day.toString(),
                                style: const TextStyle(color: Colors.white),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}