颤动下拉时间选择器

Question

我想在我的 flutter 应用程序中添加 TimePicker。 时间选择器应在下拉菜单中打开，其中包含 3 列“小时”、“分钟”和“上午/下午”。

我该怎么做？

提前致谢。

Answer 1

import 'package:flutter/material.dart';

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

@override
TimePickerDropdownState createState() => TimePickerDropdownState();
}

class TimePickerDropdownState extends State<TimePickerDropdown> {
int selectedHour = TimeOfDay.now().hour;
int selectedMinute = TimeOfDay.now().minute;
String selectedAmPm = 'AM';

@override
Widget build(BuildContext context) {
 return Scaffold(
  body: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text(
        'Selected Time: $selectedHour:$selectedMinute $selectedAmPm',
        style: const TextStyle(fontSize: 20),
      ),
      DropdownButton<int>(
        value: selectedHour,
        onChanged: (int? newValue) {
          setState(() {
            selectedHour = newValue!;
          });
        },
        items: List<DropdownMenuItem<int>>.generate(
          24,
          (int index) {
            return DropdownMenuItem<int>(
              value: index,
              child: Text('$index'),
            );
          },
        ),
      ),
      DropdownButton<int>(
        value: selectedMinute,
        onChanged: (int? newValue) {
          setState(() {
            selectedMinute = newValue!;
          });
        },
        items: List<DropdownMenuItem<int>>.generate(
          60,
          (int index) {
            return DropdownMenuItem<int>(
              value: index,
              child: Text('$index'),
            );
          },
        ),
      ),
      DropdownButton<String>(
        value: selectedAmPm,
        onChanged: (String? newValue) {
          setState(() {
            selectedAmPm = newValue!;
          });
        },
        items: const <DropdownMenuItem<String>>[
          DropdownMenuItem<String>(
            value: 'AM',
            child: Text('AM'),
          ),
          DropdownMenuItem<String>(
            value: 'PM',
            child: Text('PM'),
          ),
        ],
      ),
    ],
  ),
);
}
}