Question

当用户单击flutter的默认calander中的某天时，我想向用户显示一个calander天数下的值（例如当天价格）。我怎样才能做到这一点。我希望将其显示在下面的图片中：

更新这是我现在尝试过的，只是单击按钮后向用户显示的日期和时间选择器：

Future<Null> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: DateTime(2015, 8),
        lastDate: DateTime(2101));
    if (picked != null && picked != selectedDate) {
      setState(() {
        selectedDate = picked;
      });

    }
    final TimeOfDay timePicked = await showTimePicker(
        context: context,
        initialTime: selectedTime,
      );
      if (picked != null && timePicked != selectedTime) {
        setState(() {
          selectedTime = timePicked;

        });
      }
  }

Answer 1

有一个文件绘制dayPicker小部件。它位于这里：

{flutter_dir} /packages/flutter/lib/src/material/date_picker.dart

您可以编辑文件（我不推荐）或派生打包文件并进行更改（或您喜欢的任何其他方式）。

在dayWidget下面使用而不是原始的：

Widget dayWidget = Container(
      decoration: decoration,
      child: Center(
        child: Semantics(
          label: '${localizations.formatDecimal(day)}, ${localizations.formatFullDate(dayToBuild)}',
          selected: isSelectedDay,
          child: ExcludeSemantics(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(localizations.formatDecimal(day), style: itemStyle)
              ] + (isSelectedDay ? <Widget>[Text('Custome text')] : <Widget>[])),
          ),
        ),
      ),
    );

您还需要将变量传递给小部件。

更新：使用以下代码传递参数：

DayPicker({
    Key key,
    @required this.selectedDate,
    @required this.currentDate,
    @required this.onChanged,
    @required this.firstDate,
    @required this.lastDate,
    @required this.displayedMonth,
    this.selectableDayPredicate,
    this.dragStartBehavior = DragStartBehavior.down,
    this.optionalText //Added
  }) : assert(selectedDate != null),
       assert(currentDate != null),
       assert(onChanged != null),
       assert(displayedMonth != null),
       assert(dragStartBehavior != null),
       assert(!firstDate.isAfter(lastDate)),
       assert(selectedDate.isAfter(firstDate) || selectedDate.isAtSameMomentAs(firstDate)),
       super(key: key);

  /// The currently selected date.
  ///
  /// This date is highlighted in the picker.
  final DateTime selectedDate;

  final String optionalText; // Added

当用户在任何一天点击时，如何显示日历的价值

1 个答案: