Flutter flutter_datetime_picker 组件的定制化

如果你想自定义你自己风格的日期时间选取器，有一个类叫做CommonPickerModel，每一种类型的日期时间选取器都是从这个类中扩展出来的，你可以参考其他的选取器模型（例如DatePickerModel），并编写你自定义的一个，然后将这个模型传递给showPicker方法，这样你自己的日期时间选取器就会出现，这很容易，而且会完美地满足你的需求

如何自定义您自己的flutter_datetime_picker：

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();
    this.setLeftIndex(this.currentTime.hour);
    this.setMiddleIndex(this.currentTime.minute);
    this.setRightIndex(this.currentTime.second);
  }

  @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 && index < 60) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

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

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

  @override
  List<int> layoutProportions() {
    return [1, 2, 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());
  }
}

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

  MonthPicker({DateTime currentTime, LocaleType locale}) : super(locale: locale) {
    this.currentTime = currentTime ?? DateTime.now();
    this.setLeftIndex(this.currentTime.year);
    this.setMiddleIndex(this.currentTime.month);
    this.setRightIndex(1);
  }

  @override
  String leftStringAtIndex(int index) {
    if (index >= 1970 && index < 3000) {
      return this.digits(index, 2) + ' 年';
    } else {
      return null;
    }
  }

  @override
  String middleStringAtIndex(int index) {
    if (index >= 1 && index <= 12) {
      return this.digits(index, 2) + ' 月';
    } else {
      return null;
    }
  }

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

  @override
  String leftDivider() => "|";

  @override
  String rightDivider() => "";

  @override
  List<int> layoutProportions() => [1, 1, 0];

  @override
  DateTime finalTime() {
    return currentTime.isUtc
        ? DateTime.utc(this.currentLeftIndex(), this.currentMiddleIndex(), 1, 0, 0, 0)
        : DateTime(this.currentLeftIndex(), this.currentMiddleIndex(), 1, 0, 0, 0);
  }
}

属性值 layoutProportions :布局比例