Flutter中scroll_date_picker仅显示滚动年份的实现方法

我在使用scroll_date_picker包时遇到了问题，已经实现了如图所示的滚动效果，但希望仅显示并滚动年份，而非同时显示年、月、日。请问这种情况下应如何修改_selectedDate？

以下是我的代码：

import 'package:flutter/material.dart';
import 'package:scroll_date_picker/scroll_date_picker.dart';
import 'package:shipda/constants.dart';

class BuiltYearChoice extends StatefulWidget {
  const BuiltYearChoice({Key? key}) : super(key: key);

  @override
  State<BuiltYearChoice> createState() => _BuiltYearChoiceState();
}

class _BuiltYearChoiceState extends State<BuiltYearChoice> {
  DateTime _selectedDate = DateTime.now();


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: baseColor10,
        elevation: 0,
        leading: TextButton(
          onPressed: () {},
          child: Text('Reset'),
        ),
        title: Text(
          'Example',
          style: titleMediumBase50(),
        ),
        centerTitle: true,
        actions: [
          IconButton(
            onPressed: () {
              Navigator.pop(context);
            },
            icon: Icon(
              Icons.close,
              color: baseColor50,
            ),
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.fromLTRB(48, 16, 48, 16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Column(
                  children: [
                    Text(
                      'min',
                      // '최소진수년도',
                      style: TextStyle(
                        fontSize: bodyMedium,
                        fontFamily: 'regular',
                        color: Colors.grey.shade500,
                      ),
                    ),
                    marginHeight4,
                    Text(
                      '0000',
                      style: TextStyle(
                        fontSize: 32,
                        fontFamily: 'bold',
                      ),
                    ),
                  ],
                ),
                Column(
                  children: [
                    Text(''),
                    Text(
                      '~',
                      style: TextStyle(
                        fontSize: 32,
                        fontFamily: 'bold',
                        color: Colors.grey.shade400,
                      ),
                    ),
                  ],
                ),
                Column(
                  children: [
                    Text(
                      'max',
                      // '최대진수년도',
                      style: TextStyle(
                        fontSize: bodyMedium,
                        fontFamily: 'regular',
                        color: Colors.grey.shade500,
                      ),
                    ),
                    marginHeight4,
                    Text(
                      '0000',
                      style: TextStyle(
                        fontSize: 32,
                        fontFamily: 'bold',
                      ),
                    ),
                  ],
                ),
              ],
            ),
            SizedBox(
              height: 300,
              child: ScrollDatePicker(
                  locale: Locale('ko'),
                  selectedDate: _selectedDate,
                  onDateTimeChanged: (DateTime value) {
                    setState(() {
                      _selectedDate = value;
                    });
                  }),
            )
          ],
        ),
      ),
    );
  }
}

解决方案 #

要实现仅显示年份的滚动选择，核心是配置ScrollDatePicker的显示参数，而非修改_selectedDate的初始定义，具体操作如下：

1. 添加intl依赖（用于日期格式化）
   在项目的pubspec.yaml中添加：

dependencies:
  intl: ^0.18.1 # 版本号可根据最新情况调整

执行flutter pub get安装依赖。

2. 修改ScrollDatePicker配置
   在代码中导入intl包，并调整Picker的参数：

import 'package:intl/intl.dart'; // 添加这行导入

然后修改ScrollDatePicker部分的代码：

SizedBox(
  height: 150, // 仅显示年份可适当降低高度
  child: ScrollDatePicker(
    locale: Locale('ko'),
    selectedDate: _selectedDate,
    onDateTimeChanged: (DateTime value) {
      setState(() {
        // 若仅需年份信息，可固定月日为1月1日，避免无关数据干扰
        _selectedDate = DateTime(value.year, 1, 1);
        // 也可以直接保存年份为int类型：比如定义int _selectedYear; 然后_selectedYear = value.year;
      });
    },
    showMonthPicker: false, // 隐藏月份选择器
    showDayPicker: false, // 隐藏日期选择器
    dateFormat: DateFormat('yyyy'), // 仅显示年份格式
  ),
)

3. 说明

• showMonthPicker和showDayPicker设为false后，Picker会只保留年份滚动列
• dateFormat指定为yyyy，确保显示的是纯年份格式
• 如果你不需要完整的DateTime对象，也可以把_selectedDate换成int _selectedYear，在回调中直接赋值_selectedYear = value.year，这样更贴合需求

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