如何在Flutter中实现SingleLine水平CalendarView

Question

我是颤振的新手。如何在 flutter 中实现SingleLine水平滚动CalendarView和日期选择。请找到下面的预期图像CalendarView。帮助将不胜感激

预期日历视图

Answer 1

您可以使用包https://pub.dev/packages/table_calendar
\n在月份模式下，仅显示一行日期

\n\n

代码片段

\n\n

return TableCalendar(\n      locale: \'pl_PL\',\n      calendarController: _calendarController,\n      events: _events,\n      holidays: _holidays,\n      initialCalendarFormat: CalendarFormat.month,\n      formatAnimation: FormatAnimation.slide,\n      startingDayOfWeek: StartingDayOfWeek.sunday,\n      availableGestures: AvailableGestures.all,\n      availableCalendarFormats: const {\n        CalendarFormat.month: \'\',\n        CalendarFormat.week: \'\',\n      },\n

\n\n

在示例代码中，如果不需要，可以注释_buildButtons()和_buildEventList()

\n\n

body: Column(\n        mainAxisSize: MainAxisSize.max,\n        children: <Widget>[\n          // Switch out 2 lines below to play with TableCalendar\'s settings\n          //-----------------------\n          _buildTableCalendar(),\n          // _buildTableCalendarWithBuilders(),\n          //const SizedBox(height: 8.0),\n          //_buildButtons(),\n          //const SizedBox(height: 8.0),\n          //Expanded(child: _buildEventList()),\n        ],\n      ),\n

\n\n

完整示例代码

\n\n

//  Copyright (c) 2019 Aleksander Wo\xc5\xbaniak\n//  Licensed under Apache License v2.0\n\nimport \'package:flutter/material.dart\';\nimport \'package:intl/date_symbol_data_local.dart\';\nimport \'package:table_calendar/table_calendar.dart\';\n\n// Example holidays\nfinal Map<DateTime, List> _holidays = {\n  DateTime(2019, 1, 1): [\'New Year\\\'s Day\'],\n  DateTime(2019, 1, 6): [\'Epiphany\'],\n  DateTime(2019, 2, 14): [\'Valentine\\\'s Day\'],\n  DateTime(2019, 4, 21): [\'Easter Sunday\'],\n  DateTime(2019, 4, 22): [\'Easter Monday\'],\n};\n\nvoid main() {\n  initializeDateFormatting().then((_) => runApp(MyApp()));\n}\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: \'Table Calendar Demo\',\n      theme: ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n      home: MyHomePage(title: \'Table Calendar Demo\'),\n    );\n  }\n}\n\nclass MyHomePage extends StatefulWidget {\n  MyHomePage({Key key, this.title}) : super(key: key);\n\n  final String title;\n\n  @override\n  _MyHomePageState createState() => _MyHomePageState();\n}\n\nclass _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {\n  Map<DateTime, List> _events;\n  List _selectedEvents;\n  AnimationController _animationController;\n  CalendarController _calendarController;\n\n  @override\n  void initState() {\n    super.initState();\n    final _selectedDay = DateTime.now();\n\n    _events = {\n      _selectedDay.subtract(Duration(days: 30)): [\'Event A0\', \'Event B0\', \'Event C0\'],\n      _selectedDay.subtract(Duration(days: 27)): [\'Event A1\'],\n      _selectedDay.subtract(Duration(days: 20)): [\'Event A2\', \'Event B2\', \'Event C2\', \'Event D2\'],\n      _selectedDay.subtract(Duration(days: 16)): [\'Event A3\', \'Event B3\'],\n      _selectedDay.subtract(Duration(days: 10)): [\'Event A4\', \'Event B4\', \'Event C4\'],\n      _selectedDay.subtract(Duration(days: 4)): [\'Event A5\', \'Event B5\', \'Event C5\'],\n      _selectedDay.subtract(Duration(days: 2)): [\'Event A6\', \'Event B6\'],\n      _selectedDay: [\'Event A7\', \'Event B7\', \'Event C7\', \'Event D7\'],\n      _selectedDay.add(Duration(days: 1)): [\'Event A8\', \'Event B8\', \'Event C8\', \'Event D8\'],\n      _selectedDay.add(Duration(days: 3)): Set.from([\'Event A9\', \'Event A9\', \'Event B9\']).toList(),\n      _selectedDay.add(Duration(days: 7)): [\'Event A10\', \'Event B10\', \'Event C10\'],\n      _selectedDay.add(Duration(days: 11)): [\'Event A11\', \'Event B11\'],\n      _selectedDay.add(Duration(days: 17)): [\'Event A12\', \'Event B12\', \'Event C12\', \'Event D12\'],\n      _selectedDay.add(Duration(days: 22)): [\'Event A13\', \'Event B13\'],\n      _selectedDay.add(Duration(days: 26)): [\'Event A14\', \'Event B14\', \'Event C14\'],\n    };\n\n    _selectedEvents = _events[_selectedDay] ?? [];\n\n    _calendarController = CalendarController();\n\n    _animationController = AnimationController(\n      vsync: this,\n      duration: const Duration(milliseconds: 400),\n    );\n\n    _animationController.forward();\n  }\n\n  @override\n  void dispose() {\n    _animationController.dispose();\n    _calendarController.dispose();\n    super.dispose();\n  }\n\n  void _onDaySelected(DateTime day, List events) {\n    print(\'CALLBACK: _onDaySelected\');\n    setState(() {\n      _selectedEvents = events;\n    });\n  }\n\n  void _onVisibleDaysChanged(DateTime first, DateTime last, CalendarFormat format) {\n    print(\'CALLBACK: _onVisibleDaysChanged\');\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text(widget.title),\n      ),\n      body: Column(\n        mainAxisSize: MainAxisSize.max,\n        children: <Widget>[\n          // Switch out 2 lines below to play with TableCalendar\'s settings\n          //-----------------------\n          _buildTableCalendar(),\n          // _buildTableCalendarWithBuilders(),\n          const SizedBox(height: 8.0),\n          _buildButtons(),\n          const SizedBox(height: 8.0),\n          Expanded(child: _buildEventList()),\n        ],\n      ),\n    );\n  }\n\n  // Simple TableCalendar configuration (using Styles)\n  Widget _buildTableCalendar() {\n    return TableCalendar(\n      calendarController: _calendarController,\n      events: _events,\n      holidays: _holidays,\n      startingDayOfWeek: StartingDayOfWeek.monday,\n      calendarStyle: CalendarStyle(\n        selectedColor: Colors.deepOrange[400],\n        todayColor: Colors.deepOrange[200],\n        markersColor: Colors.brown[700],\n        outsideDaysVisible: false,\n      ),\n      headerStyle: HeaderStyle(\n        formatButtonTextStyle: TextStyle().copyWith(color: Colors.white, fontSize: 15.0),\n        formatButtonDecoration: BoxDecoration(\n          color: Colors.deepOrange[400],\n          borderRadius: BorderRadius.circular(16.0),\n        ),\n      ),\n      onDaySelected: _onDaySelected,\n      onVisibleDaysChanged: _onVisibleDaysChanged,\n    );\n  }\n\n  // More advanced TableCalendar configuration (using Builders & Styles)\n  Widget _buildTableCalendarWithBuilders() {\n    return TableCalendar(\n      locale: \'pl_PL\',\n      calendarController: _calendarController,\n      events: _events,\n      holidays: _holidays,\n      initialCalendarFormat: CalendarFormat.month,\n      formatAnimation: FormatAnimation.slide,\n      startingDayOfWeek: StartingDayOfWeek.sunday,\n      availableGestures: AvailableGestures.all,\n      availableCalendarFormats: const {\n        CalendarFormat.month: \'\',\n        CalendarFormat.week: \'\',\n      },\n      calendarStyle: CalendarStyle(\n        outsideDaysVisible: false,\n        weekendStyle: TextStyle().copyWith(color: Colors.blue[800]),\n        holidayStyle: TextStyle().copyWith(color: Colors.blue[800]),\n      ),\n      daysOfWeekStyle: DaysOfWeekStyle(\n        weekendStyle: TextStyle().copyWith(color: Colors.blue[600]),\n      ),\n      headerStyle: HeaderStyle(\n        centerHeaderTitle: true,\n        formatButtonVisible: false,\n      ),\n      builders: CalendarBuilders(\n        selectedDayBuilder: (context, date, _) {\n          return FadeTransition(\n            opacity: Tween(begin: 0.0, end: 1.0).animate(_animationController),\n            child: Container(\n              margin: const EdgeInsets.all(4.0),\n              padding: const EdgeInsets.only(top: 5.0, left: 6.0),\n              color: Colors.deepOrange[300],\n              width: 100,\n              height: 100,\n              child: Text(\n                \'${date.day}\',\n                style: TextStyle().copyWith(fontSize: 16.0),\n              ),\n            ),\n          );\n        },\n        todayDayBuilder: (context, date, _) {\n          return Container(\n            margin: const EdgeInsets.all(4.0),\n            padding: const EdgeInsets.only(top: 5.0, left: 6.0),\n            color: Colors.amber[400],\n            width: 100,\n            height: 100,\n            child: Text(\n              \'${date.day}\',\n              style: TextStyle().copyWith(fontSize: 16.0),\n            ),\n          );\n        },\n        markersBuilder: (context, date, events, holidays) {\n          final children = <Widget>[];\n\n          if (events.isNotEmpty) {\n            children.add(\n              Positioned(\n                right: 1,\n                bottom: 1,\n                child: _buildEventsMarker(date, events),\n              ),\n            );\n          }\n\n          if (holidays.isNotEmpty) {\n            children.add(\n              Positioned(\n                right: -2,\n                top: -2,\n                child: _buildHolidaysMarker(),\n              ),\n            );\n          }\n\n          return children;\n        },\n      ),\n      onDaySelected: (date, events) {\n        _onDaySelected(date, events);\n        _animationController.forward(from: 0.0);\n      },\n      onVisibleDaysChanged: _onVisibleDaysChanged,\n    );\n  }\n\n  Widget _buildEventsMarker(DateTime date, List events) {\n    return AnimatedContainer(\n      duration: const Duration(milliseconds: 300),\n      decoration: BoxDecoration(\n        shape: BoxShape.rectangle,\n        color: _calendarController.isSelected(date)\n            ? Colors.brown[500]\n            : _calendarController.isToday(date) ? Colors.brown[300] : Colors.blue[400],\n      ),\n      width: 16.0,\n      height: 16.0,\n      child: Center(\n        child: Text(\n          \'${events.length}\',\n          style: TextStyle().copyWith(\n            color: Colors.white,\n            fontSize: 12.0,\n          ),\n        ),\n      ),\n    );\n  }\n\n  Widget _buildHolidaysMarker() {\n    return Icon(\n      Icons.add_box,\n      size: 20.0,\n      color: Colors.blueGrey[800],\n    );\n  }\n\n  Widget _buildButtons() {\n    return Column(\n      children: <Widget>[\n        Row(\n          mainAxisSize: MainAxisSize.max,\n          mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n          children: <Widget>[\n            RaisedButton(\n              child: Text(\'month\'),\n              onPressed: () {\n                setState(() {\n                  _calendarController.setCalendarFormat(CalendarFormat.month);\n                });\n              },\n            ),\n            RaisedButton(\n              child: Text(\'2 weeks\'),\n              onPressed: () {\n                setState(() {\n                  _calendarController.setCalendarFormat(CalendarFormat.twoWeeks);\n                });\n              },\n            ),\n            RaisedButton(\n              child: Text(\'week\'),\n              onPressed: () {\n                setState(() {\n                  _calendarController.setCalendarFormat(CalendarFormat.week);\n                });\n              },\n            ),\n          ],\n        ),\n        const SizedBox(height: 8.0),\n        RaisedButton(\n          child: Text(\'setDay 10-07-2019\'),\n          onPressed: () {\n            _calendarController.setSelectedDay(DateTime(2019, 7, 10), runCallback: true);\n          },\n        ),\n      ],\n    );\n  }\n\n  Widget _buildEventList() {\n    return ListView(\n      children: _selectedEvents\n          .map((event) => Container(\n                decoration: BoxDecoration(\n                  border: Border.all(width: 0.8),\n                  borderRadius: BorderRadius.circular(12.0),\n                ),\n                margin: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),\n                child: ListTile(\n                  title: Text(event.toString()),\n                  onTap: () => print(\'$event tapped!\'),\n                ),\n              ))\n          .toList(),\n    );\n  }\n}\n

\n\n

\n