Flutter横向月份选择器实现方案咨询

完全可以实现这类横向月份选择器，以下是具体的实现思路和代码示例：

• 布局结构：用Row组件搭建核心框架，包含左右切换按钮、中间年月显示区域
• 状态维护：通过StatefulWidget管理当前选中的年月，点击按钮时更新状态
• 日历弹窗：点击年月区域时，可调用系统自带日期选择器或第三方日历组件

基础实现代码 #

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class HorizontalMonthPicker extends StatefulWidget {
  const HorizontalMonthPicker({super.key});

  @override
  State<HorizontalMonthPicker> createState() => _HorizontalMonthPickerState();
}

class _HorizontalMonthPickerState extends State<HorizontalMonthPicker> {
  late DateTime _currentDate;

  @override
  void initState() {
    super.initState();
    _currentDate = DateTime.now();
  }

  // 切换到上月
  void _previousMonth() {
    setState(() {
      _currentDate = DateTime(_currentDate.year, _currentDate.month - 1);
    });
  }

  // 切换到下月
  void _nextMonth() {
    setState(() {
      _currentDate = DateTime(_currentDate.year, _currentDate.month + 1);
    });
  }

  // 打开日历选择器
  Future<void> _showCalendar() async {
    final pickedDate = await showDatePicker(
      context: context,
      initialDate: _currentDate,
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
    );
    if (pickedDate != null) {
      setState(() {
        _currentDate = pickedDate;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    final monthYearText = DateFormat('yyyy年MM月').format(_currentDate);
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        IconButton(
          icon: const Icon(Icons.chevron_left),
          onPressed: _previousMonth,
          iconSize: 24,
        ),
        GestureDetector(
          onTap: _showCalendar,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            child: Text(
              monthYearText,
              style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
            ),
          ),
        ),
        IconButton(
          icon: const Icon(Icons.chevron_right),
          onPressed: _nextMonth,
          iconSize: 24,
        ),
      ],
    );
  }
}

// 组件使用示例
void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('横向月份选择器')),
      body: Center(child: HorizontalMonthPicker()),
    ),
  ));
}

扩展说明 #

• 样式定制：可以根据需求修改按钮图标、文本字体、间距等，适配项目UI风格
• 日历增强：如果需要更复杂的日历界面，可集成第三方库（如table_calendar）替换系统自带的showDatePicker，实现自定义日历弹窗

内容的提问来源于stack exchange，提问作者Looth