xt / Flutter-ReserveApp · Commits

Go to a project

Commit 4a1ac5f981f8d60ac4533e8e59b28b948a0b4427

Authored by wdn127929
2 parents 4ab6fa06 b564c360

多选日期插件UI变更

Inline Side-by-side
Showing 10 changed files with 165 additions and 53 deletions
@@ -258,10 +258,16 @@ class _BookTimeSettingEditPageState extends State<BookTimeSettingEditPage> { @@ -258,10 +258,16 @@ class _BookTimeSettingEditPageState extends State<BookTimeSettingEditPage> {
258 currentDate: DateTime.now(), 258 currentDate: DateTime.now(),
259 dynamicCalendarRows: true, 259 dynamicCalendarRows: true,
260 yearViewController: yearC, 260 yearViewController: yearC,
261 - centerAlignModePicker:true, 261 + centerAlignModePicker: true,
262 controlsTextStyle: TextStyle(color: MyColours.color_F8F9FD), 262 controlsTextStyle: TextStyle(color: MyColours.color_F8F9FD),
263 -  
264 - 263 + lastMonthIcon: Image.asset(
  264 + Utils.getImgPath('date_m_l'),
  265 + width: w(8),
  266 + ),
  267 + nextMonthIcon: Image.asset(
  268 + Utils.getImgPath('date_m_r'),
  269 + width: w(8),
  270 + ),
265 271
266 // firstDayOfWeek: 0, 272 // firstDayOfWeek: 0,
267 // controlsHeight: w(100), 273 // controlsHeight: w(100),
@@ -278,7 +284,8 @@ class _BookTimeSettingEditPageState extends State<BookTimeSettingEditPage> { @@ -278,7 +284,8 @@ class _BookTimeSettingEditPageState extends State<BookTimeSettingEditPage> {
278 return Container( 284 return Container(
279 color: MyColours.color_438E93, 285 color: MyColours.color_438E93,
280 alignment: Alignment.center, 286 alignment: Alignment.center,
281 - margin: EdgeInsets.only(bottom: ScreenUtil().setWidth(30)), 287 + margin: EdgeInsets.only(
  288 + bottom: ScreenUtil().setWidth(30), right: weekday == 6 ? 0 : 1),
282 // padding: EdgeInsets.symmetric(vertical: ScreenUtil().setWidth(15)), 289 // padding: EdgeInsets.symmetric(vertical: ScreenUtil().setWidth(15)),
283 child: Text( 290 child: Text(
284 intToWeek(weekday), 291 intToWeek(weekday),
1 import 'package:flutter/widgets.dart'; 1 import 'package:flutter/widgets.dart';
  2 +import 'package:one_key/res/colors.dart';
2 import 'dimens.dart'; 3 import 'dimens.dart';
3 4
4 class TextStyles { 5 class TextStyles {
@@ -15,6 +16,7 @@ class Decorations { @@ -15,6 +16,7 @@ class Decorations {
15 } 16 }
16 /// 间隔 17 /// 间隔
17 class Gaps { 18 class Gaps {
  19 +
18 /// 水平间隔 20 /// 水平间隔
19 static Widget hGap5 = new SizedBox(width: Dimens.gap_dp5); 21 static Widget hGap5 = new SizedBox(width: Dimens.gap_dp5);
20 static Widget hGap10 = new SizedBox(width: Dimens.gap_dp10); 22 static Widget hGap10 = new SizedBox(width: Dimens.gap_dp10);
@@ -2447,8 +2447,7 @@ class Utils { @@ -2447,8 +2447,7 @@ class Utils {
2447 ? 'http://nosqn.colorcun.com/reserve/images/3x/%E6%9A%82%E6%97%A0.png' 2447 ? 'http://nosqn.colorcun.com/reserve/images/3x/%E6%9A%82%E6%97%A0.png'
2448 : sellerImage; 2448 : sellerImage;
2449 Uint8List _thumbnailUint8List; 2449 Uint8List _thumbnailUint8List;
2450 -  
2451 - print(size(_thumbnail.length)); 2450 + print(size(_thumbnail.length));
2452 if (liteStyle != '0') { 2451 if (liteStyle != '0') {
2453 _thumbnailUint8List = await canvas( 2452 _thumbnailUint8List = await canvas(
2454 context, 2453 context,
@@ -2458,8 +2457,6 @@ class Utils { @@ -2458,8 +2457,6 @@ class Utils {
2458 month, 2457 month,
2459 week); 2458 week);
2460 } 2459 }
2461 -  
2462 - // print(size(_thumbnailUint8List.length));  
2463 String _title = 2460 String _title =
2464 "您预订的${Provider.of<UserModel>(context, listen: false).user.sellername}，已经安排，点击查看详情"; 2461 "您预订的${Provider.of<UserModel>(context, listen: false).user.sellername}，已经安排，点击查看详情";
2465 2462
@@ -435,21 +435,17 @@ class _CalendarScrollViewHeader extends StatelessWidget { @@ -435,21 +435,17 @@ class _CalendarScrollViewHeader extends StatelessWidget {
435 (constraints.maxWidth - _monthPickerHorizontalPadding * 2) / 435 (constraints.maxWidth - _monthPickerHorizontalPadding * 2) /
436 DateTime.daysPerWeek; 436 DateTime.daysPerWeek;
437 437
438 - return Padding(  
439 - padding: const EdgeInsets.symmetric(  
440 - horizontal: _monthPickerHorizontalPadding),  
441 - child: Row(  
442 - children: [  
443 - const Spacer(),  
444 - for (Widget header in headers)  
445 - SizedBox(  
446 - width: tileWidth,  
447 - height: _dayPickerRowHeight,  
448 - child: Center(child: header),  
449 - ),  
450 - const Spacer(),  
451 - ],  
452 - ), 438 + return Row(
  439 + children: [
  440 + // const Spacer(),
  441 + for (Widget header in headers)
  442 + SizedBox(
  443 + width: tileWidth,
  444 + height: _dayPickerRowHeight,
  445 + child: Center(child: header),
  446 + ),
  447 + // const Spacer(),
  448 + ],
453 ); 449 );
454 }), 450 }),
455 ); 451 );
@@ -10,6 +10,8 @@ class _CalendarView extends StatefulWidget { @@ -10,6 +10,8 @@ class _CalendarView extends StatefulWidget {
10 required this.selectedDates, 10 required this.selectedDates,
11 required this.onChanged, 11 required this.onChanged,
12 required this.onDisplayedMonthChanged, 12 required this.onDisplayedMonthChanged,
  13 + required this.onChangedYearAdd,
  14 + required this.onChangedYearReduce,
13 Key? key, 15 Key? key,
14 }) : super(key: key); 16 }) : super(key: key);
15 17
@@ -30,6 +32,9 @@ class _CalendarView extends StatefulWidget { @@ -30,6 +32,9 @@ class _CalendarView extends StatefulWidget {
30 /// Called when the user navigates to a new month. 32 /// Called when the user navigates to a new month.
31 final ValueChanged<DateTime> onDisplayedMonthChanged; 33 final ValueChanged<DateTime> onDisplayedMonthChanged;
32 34
  35 + final ValueChanged<DateTime?> onChangedYearAdd;
  36 + final ValueChanged<DateTime?> onChangedYearReduce;
  37 +
33 @override 38 @override
34 _CalendarViewState createState() => _CalendarViewState(); 39 _CalendarViewState createState() => _CalendarViewState();
35 } 40 }
@@ -324,7 +329,10 @@ class _CalendarViewState extends State<_CalendarView> { @@ -324,7 +329,10 @@ class _CalendarViewState extends State<_CalendarView> {
324 child: Column( 329 child: Column(
325 children: <Widget>[ 330 children: <Widget>[
326 Container( 331 Container(
327 - color: Color(0xFF438E93), 332 + decoration: BoxDecoration(
  333 + color: Color(0xFF438E93),
  334 + border:
  335 + Border(bottom: BorderSide(color: Colors.white, width: 1))),
328 padding: widget.config.centerAlignModePicker != true 336 padding: widget.config.centerAlignModePicker != true
329 ? const EdgeInsetsDirectional.only(start: 16, end: 4) 337 ? const EdgeInsetsDirectional.only(start: 16, end: 4)
330 : const EdgeInsetsDirectional.only(start: 8, end: 8), 338 : const EdgeInsetsDirectional.only(start: 8, end: 8),
@@ -332,13 +340,24 @@ class _CalendarViewState extends State<_CalendarView> { @@ -332,13 +340,24 @@ class _CalendarViewState extends State<_CalendarView> {
332 child: Row( 340 child: Row(
333 children: <Widget>[ 341 children: <Widget>[
334 if (widget.config.centerAlignModePicker != true) const Spacer(), 342 if (widget.config.centerAlignModePicker != true) const Spacer(),
  343 + InkWell(
  344 + onTap: (() {
  345 + widget.onChangedYearReduce(_currentMonth);
  346 + }),
  347 + child: Container(
  348 + padding: EdgeInsets.only(left: 20),
  349 + // color: Colors.red,
  350 + child: Image.asset(
  351 + 'assets/date_y_l.png',
  352 + width: 14,
  353 + height: 45,
  354 + ))),
335 IconButton( 355 IconButton(
336 splashRadius: widget.config.dayMaxWidth != null 356 splashRadius: widget.config.dayMaxWidth != null
337 ? widget.config.dayMaxWidth! * 2 / 3 357 ? widget.config.dayMaxWidth! * 2 / 3
338 : null, 358 : null,
339 icon: widget.config.lastMonthIcon ?? 359 icon: widget.config.lastMonthIcon ??
340 const Icon(Icons.chevron_left), 360 const Icon(Icons.chevron_left),
341 - color: controlColor,  
342 tooltip: _isDisplayingFirstMonth 361 tooltip: _isDisplayingFirstMonth
343 ? null 362 ? null
344 : _localizations.previousMonthTooltip, 363 : _localizations.previousMonthTooltip,
@@ -358,6 +377,18 @@ class _CalendarViewState extends State<_CalendarView> { @@ -358,6 +377,18 @@ class _CalendarViewState extends State<_CalendarView> {
358 : _localizations.nextMonthTooltip, 377 : _localizations.nextMonthTooltip,
359 onPressed: _isDisplayingLastMonth ? null : _handleNextMonth, 378 onPressed: _isDisplayingLastMonth ? null : _handleNextMonth,
360 ), 379 ),
  380 + InkWell(
  381 + onTap: (() {
  382 + widget.onChangedYearAdd(_currentMonth);
  383 + }),
  384 + child: Container(
  385 + padding: EdgeInsets.only(right: 20),
  386 + // color: Colors.red,
  387 + child: Image.asset(
  388 + 'assets/date_y_r.png',
  389 + width: 12,
  390 + height: 45,
  391 + ))),
361 ], 392 ],
362 ), 393 ),
363 ), 394 ),
@@ -22,7 +22,7 @@ const Duration _monthScrollDuration = Duration(milliseconds: 200); @@ -22,7 +22,7 @@ const Duration _monthScrollDuration = Duration(milliseconds: 200);
22 22
23 const double _dayPickerRowHeight = 42.0; 23 const double _dayPickerRowHeight = 42.0;
24 const int _maxDayPickerRowCount = 6; // A 31 day month that starts on Saturday. 24 const int _maxDayPickerRowCount = 6; // A 31 day month that starts on Saturday.
25 -const double _monthPickerHorizontalPadding = 8.0; 25 +const double _monthPickerHorizontalPadding = 0;
26 26
27 const int _yearPickerColumnCount = 3; 27 const int _yearPickerColumnCount = 3;
28 const double _yearPickerPadding = 16.0; 28 const double _yearPickerPadding = 16.0;
@@ -224,6 +224,45 @@ class _CalendarDatePicker2State extends State<CalendarDatePicker2> { @@ -224,6 +224,45 @@ class _CalendarDatePicker2State extends State<CalendarDatePicker2> {
224 }); 224 });
225 } 225 }
226 226
  227 + void _handleDisplayedMonthDateChangedMy(DateTime date, bool isAdd) {
  228 + _vibrate();
  229 + setState(() {
  230 + _currentDisplayedMonthDate =
  231 + DateTime(isAdd ? date.year + 1 : date.year - 1, date.month);
  232 + widget.onDisplayedMonthChanged?.call(_currentDisplayedMonthDate);
  233 + // final currentDisplayedMonthDate = DateTime(
  234 + // _currentDisplayedMonthDate.year,
  235 + // _currentDisplayedMonthDate.month,
  236 + // );
  237 + // var newDisplayedMonthDate = currentDisplayedMonthDate;
  238 +
  239 + // if (_currentDisplayedMonthDate.year != date.year ||
  240 + // _currentDisplayedMonthDate.month != date.month) {
  241 + // newDisplayedMonthDate = DateTime(date.year-1, date.month);
  242 + // }
  243 +
  244 + // if (fromYearPicker) {
  245 + // final selectedDatesInThisYear = _selectedDates
  246 + // .where((d) => d?.year == date.year)
  247 + // .toList()
  248 + // ..sort((d1, d2) => d1!.compareTo(d2!));
  249 + // if (selectedDatesInThisYear.isNotEmpty) {
  250 + // newDisplayedMonthDate =
  251 + // DateTime(date.year-1, selectedDatesInThisYear[0]!.month);
  252 + // }
  253 + // }
  254 +
  255 + // if (currentDisplayedMonthDate.year != newDisplayedMonthDate.year ||
  256 + // currentDisplayedMonthDate.month != newDisplayedMonthDate.month) {
  257 + // _currentDisplayedMonthDate = DateTime(
  258 + // newDisplayedMonthDate.year,
  259 + // newDisplayedMonthDate.month,
  260 + // );
  261 + // widget.onDisplayedMonthChanged?.call(_currentDisplayedMonthDate);
  262 + // }
  263 + });
  264 + }
  265 +
227 void _handleMonthChanged(DateTime value) { 266 void _handleMonthChanged(DateTime value) {
228 _vibrate(); 267 _vibrate();
229 setState(() { 268 setState(() {
@@ -247,6 +286,21 @@ class _CalendarDatePicker2State extends State<CalendarDatePicker2> { @@ -247,6 +286,21 @@ class _CalendarDatePicker2State extends State<CalendarDatePicker2> {
247 }); 286 });
248 } 287 }
249 288
  289 + void _handleYearChangedMy(DateTime value, bool isAdd) {
  290 + _vibrate();
  291 +
  292 + // if (value.isBefore(widget.config.firstDate)) {
  293 + // value = widget.config.firstDate;
  294 + // } else if (value.isAfter(widget.config.lastDate)) {
  295 + // value = widget.config.lastDate;
  296 + // }
  297 +
  298 + setState(() {
  299 + _mode = CalendarDatePicker2Mode.day;
  300 + _handleDisplayedMonthDateChangedMy(value, isAdd);
  301 + });
  302 + }
  303 +
250 void _handleDayChanged(DateTime value) { 304 void _handleDayChanged(DateTime value) {
251 _vibrate(); 305 _vibrate();
252 setState(() { 306 setState(() {
@@ -317,6 +371,14 @@ class _CalendarDatePicker2State extends State<CalendarDatePicker2> { @@ -317,6 +371,14 @@ class _CalendarDatePicker2State extends State<CalendarDatePicker2> {
317 initialMonth: _currentDisplayedMonthDate, 371 initialMonth: _currentDisplayedMonthDate,
318 selectedDates: _selectedDates, 372 selectedDates: _selectedDates,
319 onChanged: _handleDayChanged, 373 onChanged: _handleDayChanged,
  374 + onChangedYearAdd: (value) {
  375 + dynamic date = value;
  376 + _handleYearChangedMy(date, true);
  377 + },
  378 + onChangedYearReduce: (value) {
  379 + dynamic date = value;
  380 + _handleYearChangedMy(date, false);
  381 + },
320 onDisplayedMonthChanged: _handleDisplayedMonthDateChanged, 382 onDisplayedMonthChanged: _handleDisplayedMonthDateChanged,
321 ); 383 );
322 case CalendarDatePicker2Mode.month: 384 case CalendarDatePicker2Mode.month:
@@ -379,40 +441,57 @@ class _CalendarDatePicker2State extends State<CalendarDatePicker2> { @@ -379,40 +441,57 @@ class _CalendarDatePicker2State extends State<CalendarDatePicker2> {
379 return widget.config.calendarViewMode == CalendarDatePicker2Mode.scroll 441 return widget.config.calendarViewMode == CalendarDatePicker2Mode.scroll
380 ? _buildPicker() 442 ? _buildPicker()
381 : Stack( 443 : Stack(
  444 + alignment: Alignment.topCenter,
382 children: <Widget>[ 445 children: <Widget>[
383 SizedBox( 446 SizedBox(
384 height: (widget.config.controlsHeight ?? _subHeaderHeight) + 447 height: (widget.config.controlsHeight ?? _subHeaderHeight) +
385 maxContentHeight, 448 maxContentHeight,
386 child: _buildPicker(), 449 child: _buildPicker(),
387 ), 450 ),
  451 + Positioned(
  452 + // left: 150,
  453 + top: ((widget.config.controlsHeight ?? _subHeaderHeight) -
  454 + 20) /
  455 + 2,
  456 + child: Container(
  457 + height: 20,
  458 + child: Text(_currentDisplayedMonthDate.year.toString() +
  459 + '年' +
  460 + _currentDisplayedMonthDate.month.toString() +
  461 + '月',style:TextStyle(
  462 + color: Color(0xffF8F9FD),
  463 + fontSize: 18
  464 +
  465 +
  466 + ))))
388 // Put the mode toggle button on top so that it won't be covered up by the _CalendarView 467 // Put the mode toggle button on top so that it won't be covered up by the _CalendarView
389 - _DatePickerModeToggleButton(  
390 - config: widget.config,  
391 - mode: _mode,  
392 - monthDate: _currentDisplayedMonthDate,  
393 - onMonthPressed: () {  
394 - if (_mode == CalendarDatePicker2Mode.year) {  
395 - _handleModeChanged(CalendarDatePicker2Mode.month);  
396 - } else {  
397 - _handleModeChanged(  
398 - _mode == CalendarDatePicker2Mode.month  
399 - ? CalendarDatePicker2Mode.day  
400 - : CalendarDatePicker2Mode.month,  
401 - );  
402 - }  
403 - },  
404 - onYearPressed: () {  
405 - if (_mode == CalendarDatePicker2Mode.month) {  
406 - _handleModeChanged(CalendarDatePicker2Mode.year);  
407 - } else {  
408 - _handleModeChanged(  
409 - _mode == CalendarDatePicker2Mode.year  
410 - ? CalendarDatePicker2Mode.day  
411 - : CalendarDatePicker2Mode.year,  
412 - );  
413 - }  
414 - },  
415 - ), 468 + // _DatePickerModeToggleButton(
  469 + // config: widget.config,
  470 + // mode: _mode,
  471 + // monthDate: _currentDisplayedMonthDate,
  472 + // onMonthPressed: () {
  473 + // if (_mode == CalendarDatePicker2Mode.year) {
  474 + // _handleModeChanged(CalendarDatePicker2Mode.month);
  475 + // } else {
  476 + // _handleModeChanged(
  477 + // _mode == CalendarDatePicker2Mode.month
  478 + // ? CalendarDatePicker2Mode.day
  479 + // : CalendarDatePicker2Mode.month,
  480 + // );
  481 + // }
  482 + // },
  483 + // onYearPressed: () {
  484 + // if (_mode == CalendarDatePicker2Mode.month) {
  485 + // _handleModeChanged(CalendarDatePicker2Mode.year);
  486 + // } else {
  487 + // _handleModeChanged(
  488 + // _mode == CalendarDatePicker2Mode.year
  489 + // ? CalendarDatePicker2Mode.day
  490 + // : CalendarDatePicker2Mode.year,
  491 + // );
  492 + // }
  493 + // },
  494 + // ),
416 ], 495 ],
417 ); 496 );
418 } 497 }