flutter 实现一个月份切换的控件

最新推荐文章于 2024-08-24 10:08:37 发布

null_null999

最新推荐文章于 2024-08-24 10:08:37 发布

阅读量1.2k

点赞数

分类专栏： flutter

本文链接：https://blog.csdn.net/nimeghbia/article/details/102862053

版权

flutter 专栏收录该内容

91 篇文章 3 订阅

订阅专栏

本文介绍了一个基于Flutter的水平月份选择器组件的实现细节。该组件允许用户在给定的时间范围内选择日期，通过左右箭头图标进行月份切换，并提供自定义图标和回调函数。文章详细展示了如何使用状态管理和日期解析来构建此控件。

摘要由CSDN通过智能技术生成

效果如上图

完整代码

class HorizontalMonthPicker extends BaseWidget {
  DateTime startTime;
  DateTime endTime;
  DateTime selectedTime;
  String leftSelectableIcon;
  String rightSelectableIcon;
  String leftUnselectableIcon;
  String rightUnselectableIcon;
  Function onChange;
  HorizontalMonthPicker(
      this.startTime,
      this.endTime,
      this.selectedTime,
      this.leftSelectableIcon,
      this.rightSelectableIcon,
      this.leftUnselectableIcon,
      this.rightUnselectableIcon,
      this.onChange);
  @override
  State<HorizontalMonthPicker> createState() => HorizontalMonthPickerState();
}

class HorizontalMonthPickerState
    extends BaseWidgetState<HorizontalMonthPicker> {
  DateTime selectedTime;
  DateTime startTime;
  DateTime endTime;
  int selectedYear;
  int selectedMonth;
  int selectedDay = 01;
  String day = '-01';
  @override
  void initState() {
    super.initState();
    DateTime dateTime = DateTime.parse("2018-01-01");
    print("${dateTime.year}");
    print("${dateTime.month}");
    print("${dateTime.day}");
    selectedTime = rebuildTime2Month(widget.selectedTime);
    startTime = rebuildTime2Month(widget.startTime);
    endTime = rebuildTime2Month(widget.endTime);
    selectedYear = widget.selectedTime.year;
    selectedMonth = widget.selectedTime.month;
    selectedDay = widget.selectedTime.day;
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        color: Colors.red,
        height: 40,
        child: Row(
          children: <Widget>[
            InkWell(
              child: Image.asset(
                selectedTime.isAfter(startTime)
                    ? widget.leftSelectableIcon
                    : widget.leftUnselectableIcon,
                width: 9,
                height: 16,
              ),
              onTap: () {
                if (parseTime(selectedYear, selectedMonth, selectedDay)
                    .isAfter(startTime)) {
                  minusTime();
                  widget.onChange(selectedTime);
                }
              },
            ),
            SizedBox(
              width: 38,
            ),
            Text("${selectedTime.year}-${selectedTime.month}"),
            SizedBox(
              width: 38,
            ),
            InkWell(
              child: Image.asset(
                selectedTime.isBefore(endTime)
                    ? widget.rightSelectableIcon
                    : widget.rightUnselectableIcon,
                width: 9,
                height: 16,
              ),
              onTap: () {
                if (parseTime(selectedYear, selectedMonth, selectedDay)
                    .isBefore(endTime)) {
                  plusTime();
                  widget.onChange(selectedTime);
               }
              },
            ),
          ],
        ),
      ),
    );
  }

  DateTime parseTime(int year, int month, int day) {
    if (month < 10) {
      return DateTime.parse("${year}-0${month}-01");
    } else {
      return DateTime.parse("${year}-${month}-01");
    }
  }

  void minusTime() {
    selectedMonth--;
    if (selectedMonth == 0) {
      selectedYear--;
      selectedMonth = 12;
    }
    selectedTime = parseTime(selectedYear, selectedMonth, selectedDay);
    setState(() {});
  }

  void plusTime() {
    selectedMonth++;
    if (selectedMonth == 13) {
      this.selectedYear++;
      this.selectedMonth = 1;
    }
    selectedTime = parseTime(selectedYear, selectedMonth, selectedDay);
    setState(() {});
  }

   
  //抹除掉日期带来的影响，否则可能切换到范围之外
  DateTime rebuildTime2Month(DateTime dateTime) {
    int month = dateTime.month;
    String monthS = '';
    if (month < 10) {
      monthS = "-0${month}";
    } else {
      monthS = "-${month}";
    }
    return DateTime.parse("${dateTime.year}${monthS}${day}");
  }
}

basewidget是自己封装的基础组件，不过这个控件的实现没有用到其中的代码，所以没有关系

调用方法：

HorizontalMonthPicker(
          DateTime.parse("2018-01-01"),
          DateTime.parse("2019-06-06"),
          DateTime.parse("2019-06-01"),
          "assets/leftselect.png",
          "assets/rightselect.png",
          "assets/leftnotselect.png",
          "assets/rightunselect.png", (DateTime v) {
        print("${v.year}");
      })

参数较多，容易传错,b careful