calendar_left_panel.dart 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. import 'package:calendar_view/calendar_page/mini_calendar/mini_calendar.dart';
  2. import 'package:calendar_view/calendar_page/my_calendar/my_calendar.dart';
  3. import 'package:calendar_view/notification_demo/notification_controller.dart';
  4. import 'package:flutter/material.dart';
  5. import 'package:get/get.dart';
  6. /// 日历视图左侧面板
  7. class CalendarLeftPanel extends StatefulWidget {
  8. const CalendarLeftPanel({super.key});
  9. @override
  10. State<CalendarLeftPanel> createState() => _CalendarLeftPanelState();
  11. }
  12. class _CalendarLeftPanelState extends State<CalendarLeftPanel> {
  13. @override
  14. Widget build(BuildContext context) {
  15. return Container(
  16. width: 240,
  17. decoration: const BoxDecoration(
  18. border: Border(
  19. right: BorderSide(
  20. color: Colors.black12,
  21. width: 1,
  22. ),
  23. ),
  24. // color: const Color.fromARGB(90, 59, 255, 124),
  25. ),
  26. padding: const EdgeInsets.symmetric(horizontal: 10),
  27. child: Column(
  28. children: <Widget>[
  29. _buildPanelTop(),
  30. const MiniCalendar(),
  31. const Expanded(
  32. child: MyCalendar(),
  33. ), // 撑开
  34. _buildPanelBottom(),
  35. ],
  36. ),
  37. );
  38. }
  39. /// 构建顶部【搜索日程、添加日程】
  40. Widget _buildPanelTop() {
  41. return SizedBox(
  42. height: 70,
  43. child: Container(
  44. padding: const EdgeInsets.symmetric(horizontal: 10),
  45. child: Row(
  46. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  47. children: <Widget>[
  48. /// 单行输入框
  49. const Expanded(
  50. child: SizedBox(
  51. height: 32,
  52. child: TextField(
  53. textAlignVertical: TextAlignVertical.bottom,
  54. style: TextStyle(
  55. height: null, // 迷惑???
  56. color: Colors.black,
  57. fontSize: 14,
  58. ),
  59. decoration: InputDecoration(
  60. // contentPadding: EdgeInsets.all(12), // 迷惑???
  61. border: OutlineInputBorder(),
  62. enabledBorder: OutlineInputBorder(
  63. borderSide: BorderSide(color: Colors.black12, width: 1),
  64. ),
  65. focusedBorder: OutlineInputBorder(
  66. borderSide: BorderSide(color: Colors.blue, width: 1),
  67. ),
  68. prefixIcon: Icon(
  69. Icons.search,
  70. size: 20,
  71. color: Colors.black38,
  72. ),
  73. /// TODO[Gavin]: i18n
  74. hintText: '搜索日程',
  75. hintStyle: TextStyle(
  76. color: Colors.black38,
  77. fontSize: 14,
  78. ),
  79. ),
  80. ),
  81. ),
  82. ),
  83. const SizedBox(width: 10),
  84. SizedBox(
  85. width: 32,
  86. height: 32,
  87. child: ElevatedButton(
  88. style: ButtonStyle(
  89. padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
  90. const EdgeInsets.all(0)),
  91. shadowColor:
  92. MaterialStateProperty.all<Color>(Colors.transparent),
  93. ),
  94. onPressed: (() {
  95. ///FIXME: 临时测试用
  96. NotificationController notificationController =
  97. Get.find<NotificationController>();
  98. notificationController.sendMockNotification();
  99. }),
  100. child: const Icon(Icons.add),
  101. ),
  102. ),
  103. ],
  104. ),
  105. ),
  106. );
  107. }
  108. /// 构建底部【日历设置】
  109. Widget _buildPanelBottom() {
  110. return Container(
  111. padding: const EdgeInsets.symmetric(vertical: 5),
  112. height: 50,
  113. decoration: const BoxDecoration(
  114. border: Border(
  115. top: BorderSide(
  116. color: Colors.black12,
  117. width: 1,
  118. ),
  119. ),
  120. // color: const Color.fromARGB(90, 222, 59, 255),
  121. ),
  122. child: Flex(
  123. direction: Axis.horizontal,
  124. children: [
  125. Expanded(
  126. child: SizedBox(
  127. height: double.infinity,
  128. child: ElevatedButton.icon(
  129. style: ButtonStyle(
  130. // 按钮内容左对齐
  131. alignment: Alignment.centerLeft,
  132. backgroundColor:
  133. MaterialStateProperty.all<Color>(Colors.transparent),
  134. shadowColor:
  135. MaterialStateProperty.all<Color>(Colors.transparent),
  136. overlayColor: MaterialStateProperty.all<Color>(
  137. const Color.fromARGB(255, 224, 226, 228)),
  138. foregroundColor:
  139. MaterialStateProperty.all<Color>(Colors.white),
  140. surfaceTintColor:
  141. MaterialStateProperty.all<Color>(Colors.white),
  142. ),
  143. icon: const Icon(
  144. Icons.settings_outlined,
  145. size: 20,
  146. color: Colors.black54,
  147. ),
  148. /// TODO[Gavin]: i18n
  149. label: const Text(
  150. "日历设置",
  151. style: TextStyle(color: Colors.black87),
  152. ),
  153. onPressed: () {
  154. ScaffoldMessenger.of(context).showSnackBar(
  155. const SnackBar(
  156. duration: Duration(milliseconds: 500),
  157. content: Text('前方正在施工'),
  158. ),
  159. );
  160. },
  161. ),
  162. ),
  163. ),
  164. ],
  165. ),
  166. );
  167. }
  168. // Widget _build
  169. }