Question

有人用Flutter Datetime Picker（enter link description here）成功制作了带有Hours：Minutes AM / PM的TimePicker，格式为12小时吗？为了我的一生，我无法使用CustomPickerModel使它正常工作。我只是在秒视图中得到了一堆PM，而当您移动它们时，打印结果就是几秒钟。

依赖性：flutter_datetime_picker：^ 1.2.5

class CustomPicker extends CommonPickerModel {
  String digits(int value, int length) {
    return '$value'.padLeft(length, "0");
  }

  CustomPicker({DateTime currentTime, LocaleType locale})
      : super(locale: locale) {
    _fillRightLists();
    this.currentTime = currentTime ?? DateTime.now();
    this.setLeftIndex(this.currentTime.hour);
    this.setMiddleIndex(this.currentTime.minute);
    this.setRightIndex(0);
  }

  void _fillRightLists() {
    this.rightList = List.generate(2, (int index) {
      if (index == 0) {
        return 'AM';
      } else {
        return 'PM';
      }
    });
  }

  @override
  String leftStringAtIndex(int index) {
    if (index >= 0 && index < 24) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

  @override
  String middleStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

  @override
  String rightStringAtIndex(int index) {
    if (index == 0) {
      return "AM";
    } else {
      return "PM";
    }

    // Orignal code
    // if (index >= 0 && index < 60) {
    //   return this.digits(index, 2);
    // } else {
    //   return null;
    // }
  }

  @override
  String leftDivider() {
    return ":";
  }

  @override
  String rightDivider() {
    return " ";
  }

  @override
  List<int> layoutProportions() {
    return [1, 1, 1];
  }

  @override
  DateTime finalTime() {
    return currentTime.isUtc
        ? DateTime.utc(
            currentTime.year,
            currentTime.month,
            currentTime.day,
            this.currentLeftIndex(),
            this.currentMiddleIndex(),
            this.currentRightIndex())
        : DateTime(
            currentTime.year,
            currentTime.month,
            currentTime.day,
            this.currentLeftIndex(),
            this.currentMiddleIndex(),
            this.currentRightIndex());
  }
}

要显示它，请致电：

FlatButton(
                                onPressed: () {
                                  DatePicker.showPicker(context,
                                      showTitleActions: true,
                                      onChanged: (date) {
                                    print('change $date');
                                  }, onConfirm: (date) {
                                    print('confirm $date');
                                  },
                                      pickerModel: CustomPicker(
                                          currentTime: DateTime.now(),
                                          locale: LocaleType.en));
                                },
                                child: Text(
                                  'show date time picker',
                                  style: TextStyle(color: Colors.blue),
                                ))

Answer 1

只需对代码进行一些更改，就需要覆盖'setRightIndex'：

@override
  void setRightIndex(int index) {
    super.setRightIndex(index);
    _fillRightList();
  }

并更新'rightStringAtIndex'，添加返回null

@override
  String rightStringAtIndex(int index) {
    if (index == 0) {
      return 'AM';
    } else if (index == 1) {
      return 'PM';
    }
    return null;
  }

以及完整的代码

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';

class CustomPicker extends CommonPickerModel {
  String digits(int value, int length) {
    return '$value'.padLeft(length, "0");
  }

  CustomPicker({DateTime currentTime, LocaleType locale}) : super(locale: locale) {
    this.currentTime = currentTime ?? DateTime.now();
    var _dayPeriod = 0;
    this.setLeftIndex(this.currentTime.hour);
    this.setMiddleIndex(this.currentTime.minute);
    this.setRightIndex(_dayPeriod);
    _fillRightList();
  }

  @override
  String leftStringAtIndex(int index) {
    if (index >= 1 && index < 13) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

  @override
  String middleStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

  @override
  String rightStringAtIndex(int index) {
    if (index == 0) {
      return 'AM';
    } else if (index == 1) {
      return 'PM';
    }
    return null;
  }

  void _fillRightList() {
    this.rightList = List.generate(2, (int index) {
      return '$index';
    });
  }

  @override
  void setRightIndex(int index) {
    super.setRightIndex(index);
    _fillRightList();
  }

  @override
  String leftDivider() {
    return ":";
  }

  @override
  String rightDivider() {
    return " ";
  }

  @override
  List<int> layoutProportions() {
    return [1, 1, 1];
  }

  @override
  DateTime finalTime() {
    return currentTime.isUtc
        ? DateTime.utc(currentTime.year, currentTime.month, currentTime.day,
        this.currentLeftIndex(), this.currentMiddleIndex(), this.currentRightIndex())
        : DateTime(currentTime.year, currentTime.month, currentTime.day, this.currentLeftIndex(),
        this.currentMiddleIndex(), this.currentRightIndex());
  }
}

Answer 2

从版本1.3.5开始，该软件包具有内置的方法。该方法称为showTime12hPicker。在可用的here源代码中，它向您显示了方法和参数。

static Future<DateTime> showTime12hPicker(
    BuildContext context, {
    bool showTitleActions: true,
    DateChangedCallback onChanged,
    DateChangedCallback onConfirm,
    DateCancelledCallback onCancel,
    locale: LocaleType.en,
    DateTime currentTime,
    DatePickerTheme theme,
  })

Flutter Flutter Datetime Picker程序包可以生成AM / PM？

2 个答案: