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> {
currentDate: DateTime.now(),
dynamicCalendarRows: true,
yearViewController: yearC,
centerAlignModePicker:true,
centerAlignModePicker: true,
controlsTextStyle: TextStyle(color: MyColours.color_F8F9FD),
lastMonthIcon: Image.asset(
Utils.getImgPath('date_m_l'),
width: w(8),
),
nextMonthIcon: Image.asset(
Utils.getImgPath('date_m_r'),
width: w(8),
),
// firstDayOfWeek: 0,
// controlsHeight: w(100),
... ... @@ -278,7 +284,8 @@ class _BookTimeSettingEditPageState extends State<BookTimeSettingEditPage> {
return Container(
color: MyColours.color_438E93,
alignment: Alignment.center,
margin: EdgeInsets.only(bottom: ScreenUtil().setWidth(30)),
margin: EdgeInsets.only(
bottom: ScreenUtil().setWidth(30), right: weekday == 6 ? 0 : 1),
// padding: EdgeInsets.symmetric(vertical: ScreenUtil().setWidth(15)),
child: Text(
intToWeek(weekday),
... ...
import 'package:flutter/widgets.dart';
import 'package:one_key/res/colors.dart';
import 'dimens.dart';
class TextStyles {
... ... @@ -15,6 +16,7 @@ class Decorations {
}
/// 间隔
class Gaps {
/// 水平间隔
static Widget hGap5 = new SizedBox(width: Dimens.gap_dp5);
static Widget hGap10 = new SizedBox(width: Dimens.gap_dp10);
... ...
... ... @@ -2447,8 +2447,7 @@ class Utils {
? 'http://nosqn.colorcun.com/reserve/images/3x/%E6%9A%82%E6%97%A0.png'
: sellerImage;
Uint8List _thumbnailUint8List;
print(size(_thumbnail.length));
print(size(_thumbnail.length));
if (liteStyle != '0') {
_thumbnailUint8List = await canvas(
context,
... ... @@ -2458,8 +2457,6 @@ class Utils {
month,
week);
}
// print(size(_thumbnailUint8List.length));
String _title =
"您预订的${Provider.of<UserModel>(context, listen: false).user.sellername}，已经安排，点击查看详情";
... ...
... ... @@ -435,21 +435,17 @@ class _CalendarScrollViewHeader extends StatelessWidget {
(constraints.maxWidth - _monthPickerHorizontalPadding * 2) /
DateTime.daysPerWeek;
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: _monthPickerHorizontalPadding),
child: Row(
children: [
const Spacer(),
for (Widget header in headers)
SizedBox(
width: tileWidth,
height: _dayPickerRowHeight,
child: Center(child: header),
),
const Spacer(),
],
),
return Row(
children: [
// const Spacer(),
for (Widget header in headers)
SizedBox(
width: tileWidth,
height: _dayPickerRowHeight,
child: Center(child: header),
),
// const Spacer(),
],
);
}),
);
... ...
... ... @@ -10,6 +10,8 @@ class _CalendarView extends StatefulWidget {
required this.selectedDates,
required this.onChanged,
required this.onDisplayedMonthChanged,
required this.onChangedYearAdd,
required this.onChangedYearReduce,
Key? key,
}) : super(key: key);
... ... @@ -30,6 +32,9 @@ class _CalendarView extends StatefulWidget {
/// Called when the user navigates to a new month.
final ValueChanged<DateTime> onDisplayedMonthChanged;
final ValueChanged<DateTime?> onChangedYearAdd;
final ValueChanged<DateTime?> onChangedYearReduce;
@override
_CalendarViewState createState() => _CalendarViewState();
}
... ... @@ -324,7 +329,10 @@ class _CalendarViewState extends State<_CalendarView> {
child: Column(
children: <Widget>[
Container(
color: Color(0xFF438E93),
decoration: BoxDecoration(
color: Color(0xFF438E93),
border:
Border(bottom: BorderSide(color: Colors.white, width: 1))),
padding: widget.config.centerAlignModePicker != true
? const EdgeInsetsDirectional.only(start: 16, end: 4)
: const EdgeInsetsDirectional.only(start: 8, end: 8),
... ... @@ -332,13 +340,24 @@ class _CalendarViewState extends State<_CalendarView> {
child: Row(
children: <Widget>[
if (widget.config.centerAlignModePicker != true) const Spacer(),
InkWell(
onTap: (() {
widget.onChangedYearReduce(_currentMonth);
}),
child: Container(
padding: EdgeInsets.only(left: 20),
// color: Colors.red,
child: Image.asset(
'assets/date_y_l.png',
width: 14,
height: 45,
))),
IconButton(
splashRadius: widget.config.dayMaxWidth != null
? widget.config.dayMaxWidth! * 2 / 3
: null,
icon: widget.config.lastMonthIcon ??
const Icon(Icons.chevron_left),
color: controlColor,
tooltip: _isDisplayingFirstMonth
? null
: _localizations.previousMonthTooltip,
... ... @@ -358,6 +377,18 @@ class _CalendarViewState extends State<_CalendarView> {
: _localizations.nextMonthTooltip,
onPressed: _isDisplayingLastMonth ? null : _handleNextMonth,
),
InkWell(
onTap: (() {
widget.onChangedYearAdd(_currentMonth);
}),
child: Container(
padding: EdgeInsets.only(right: 20),
// color: Colors.red,
child: Image.asset(
'assets/date_y_r.png',
width: 12,
height: 45,
))),
],
),
),
... ...
... ... @@ -22,7 +22,7 @@ const Duration _monthScrollDuration = Duration(milliseconds: 200);
const double _dayPickerRowHeight = 42.0;
const int _maxDayPickerRowCount = 6; // A 31 day month that starts on Saturday.
const double _monthPickerHorizontalPadding = 8.0;
const double _monthPickerHorizontalPadding = 0;
const int _yearPickerColumnCount = 3;
const double _yearPickerPadding = 16.0;
... ... @@ -224,6 +224,45 @@ class _CalendarDatePicker2State extends State<CalendarDatePicker2> {
});
}
void _handleDisplayedMonthDateChangedMy(DateTime date, bool isAdd) {
_vibrate();
setState(() {
_currentDisplayedMonthDate =
DateTime(isAdd ? date.year + 1 : date.year - 1, date.month);
widget.onDisplayedMonthChanged?.call(_currentDisplayedMonthDate);
// final currentDisplayedMonthDate = DateTime(
// _currentDisplayedMonthDate.year,
// _currentDisplayedMonthDate.month,
// );
// var newDisplayedMonthDate = currentDisplayedMonthDate;
// if (_currentDisplayedMonthDate.year != date.year ||
// _currentDisplayedMonthDate.month != date.month) {
// newDisplayedMonthDate = DateTime(date.year-1, date.month);
// }
// if (fromYearPicker) {
// final selectedDatesInThisYear = _selectedDates
// .where((d) => d?.year == date.year)
// .toList()
// ..sort((d1, d2) => d1!.compareTo(d2!));
// if (selectedDatesInThisYear.isNotEmpty) {
// newDisplayedMonthDate =
// DateTime(date.year-1, selectedDatesInThisYear[0]!.month);
// }
// }
// if (currentDisplayedMonthDate.year != newDisplayedMonthDate.year ||
// currentDisplayedMonthDate.month != newDisplayedMonthDate.month) {
// _currentDisplayedMonthDate = DateTime(
// newDisplayedMonthDate.year,
// newDisplayedMonthDate.month,
// );
// widget.onDisplayedMonthChanged?.call(_currentDisplayedMonthDate);
// }
});
}
void _handleMonthChanged(DateTime value) {
_vibrate();
setState(() {
... ... @@ -247,6 +286,21 @@ class _CalendarDatePicker2State extends State<CalendarDatePicker2> {
});
}
void _handleYearChangedMy(DateTime value, bool isAdd) {
_vibrate();
// if (value.isBefore(widget.config.firstDate)) {
// value = widget.config.firstDate;
// } else if (value.isAfter(widget.config.lastDate)) {
// value = widget.config.lastDate;
// }
setState(() {
_mode = CalendarDatePicker2Mode.day;
_handleDisplayedMonthDateChangedMy(value, isAdd);
});
}
void _handleDayChanged(DateTime value) {
_vibrate();
setState(() {
... ... @@ -317,6 +371,14 @@ class _CalendarDatePicker2State extends State<CalendarDatePicker2> {
initialMonth: _currentDisplayedMonthDate,
selectedDates: _selectedDates,
onChanged: _handleDayChanged,
onChangedYearAdd: (value) {
dynamic date = value;
_handleYearChangedMy(date, true);
},
onChangedYearReduce: (value) {
dynamic date = value;
_handleYearChangedMy(date, false);
},
onDisplayedMonthChanged: _handleDisplayedMonthDateChanged,
);
case CalendarDatePicker2Mode.month:
... ... @@ -379,40 +441,57 @@ class _CalendarDatePicker2State extends State<CalendarDatePicker2> {
return widget.config.calendarViewMode == CalendarDatePicker2Mode.scroll
? _buildPicker()
: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
SizedBox(
height: (widget.config.controlsHeight ?? _subHeaderHeight) +
maxContentHeight,
child: _buildPicker(),
),
Positioned(
// left: 150,
top: ((widget.config.controlsHeight ?? _subHeaderHeight) -
20) /
2,
child: Container(
height: 20,
child: Text(_currentDisplayedMonthDate.year.toString() +
'年' +
_currentDisplayedMonthDate.month.toString() +
'月',style:TextStyle(
color: Color(0xffF8F9FD),
fontSize: 18
))))
// Put the mode toggle button on top so that it won't be covered up by the _CalendarView
_DatePickerModeToggleButton(
config: widget.config,
mode: _mode,
monthDate: _currentDisplayedMonthDate,
onMonthPressed: () {
if (_mode == CalendarDatePicker2Mode.year) {
_handleModeChanged(CalendarDatePicker2Mode.month);
} else {
_handleModeChanged(
_mode == CalendarDatePicker2Mode.month
? CalendarDatePicker2Mode.day
: CalendarDatePicker2Mode.month,
);
}
},
onYearPressed: () {
if (_mode == CalendarDatePicker2Mode.month) {
_handleModeChanged(CalendarDatePicker2Mode.year);
} else {
_handleModeChanged(
_mode == CalendarDatePicker2Mode.year
? CalendarDatePicker2Mode.day
: CalendarDatePicker2Mode.year,
);
}
},
),
// _DatePickerModeToggleButton(
// config: widget.config,
// mode: _mode,
// monthDate: _currentDisplayedMonthDate,
// onMonthPressed: () {
// if (_mode == CalendarDatePicker2Mode.year) {
// _handleModeChanged(CalendarDatePicker2Mode.month);
// } else {
// _handleModeChanged(
// _mode == CalendarDatePicker2Mode.month
// ? CalendarDatePicker2Mode.day
// : CalendarDatePicker2Mode.month,
// );
// }
// },
// onYearPressed: () {
// if (_mode == CalendarDatePicker2Mode.month) {
// _handleModeChanged(CalendarDatePicker2Mode.year);
// } else {
// _handleModeChanged(
// _mode == CalendarDatePicker2Mode.year
// ? CalendarDatePicker2Mode.day
// : CalendarDatePicker2Mode.year,
// );
// }
// },
// ),
],
);
}
... ...