syncfusion_flutter_datepicker 日历显示混乱

Question

我使用日期范围选择器已经有一段时间了，但从 2-3 天开始，无论我更改什么版本，我都面临着一个非常奇怪的问题。 即使我从您的网站添加非常基本的代码 -

定位（ 左：20， 顶部：50， 右：20， 底部：50， 孩子： 容器（ 颜色: 颜色.白色, 高度：屏幕宽度/2， 宽度：屏幕宽度/2， 孩子：中心（ 子：SfDateRangePicker（ onSelectionChanged: _onSelectionChanged, 选择模式：DateRangePickerSelectionMode.range， 初始选择范围：PickerDateRange（ DateTime.now().subtract(const Duration(天数: 4)), DateTime.now().add(const Duration(天数: 3))), ), ), ), ),

我正在直接使用或在容器中使用这样的日历。

请让我知道任何可能的原因和解决方案。

尝试在 flutter 应用程序中显示正确的日历。

Answer 1

我也有同样的问题。我可以通过在

cellBuilder

中实现我自己的

SfDateRangePicker

参数来修复它，如下所示

cellBuilder: (BuildContext context,
    DateRangePickerCellDetails details) {
  
  // box decoration if selected
  BoxDecoration? boxDecoration;
  // set the style of the text accordingly
  var style = _normalTextStyle;

  // All dates before initDate, convert them to grey (not allowed to choose)
  if (isLowerDate(
      details.date, DateTime.now())) {
    style = _greyTextStyle;
  } else if (isSameDate(
      details.date, DateTime.now())) {
    boxDecoration = BoxDecoration(
        border:
            Border.all(color: Colors.blue),
        shape: BoxShape.rectangle);
  }
  return Container(
    margin: const EdgeInsets.all(2),
    padding: const EdgeInsets.only(top: 10),
    decoration: boxDecoration,
    child: Column(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment:
          MainAxisAlignment.spaceAround,
      children: <Widget>[
        Text(details.date.day.toString(),
            style: style),
        Container()
      ],
    ),
  );
},

哪里

const _normalTextStyle = TextStyle(color: Color.fromARGB(255, 85, 85, 85));

const _greyTextStyle = TextStyle(color: Colors.grey);

bool isLowerDate(DateTime dt1, DateTime dt2) {
  return ((getDateWithoutTime(dt1).difference(getDateWithoutTime(dt2))).inDays < 0);
}

DateTime getDateWithoutTime(DateTime d) {
  return DateTime(
      d.year, d.month, d.day);
}

你最终会构建出像这样不那么漂亮的东西：

如果您想修改所选日期的形状、边框圆角、颜色等以获得更好的视图，您必须进一步创建一个

DateRangePickerController

，将其分配在

controller

参数中，然后使用此控制器通过检查

cellBuilder

是否等于

details.date

来访问

_controller.selectedDate

内选定的日期单元格，并相应地修改容器的 BoxDecoration 属性。不要忘记将

SfDateRangePicker

参数更改为

selectionColor: Colors.transparent,

，否则，当更改

boxDecoration

中所选日期的

cellBuilder

单元格时，那里仍然会出现蓝色方框。

我希望这可以帮助你。以下是一些有关它的资源：

https://help.syncfusion.com/flutter/daterangepicker/builders