更改 Cupertino 日期選擇器的文本顏色

Question

下面附上我當前用於更改 CupertinoDatePicker 文本顏色的代碼：

Container(
                decoration:
                    BoxDecoration(borderRadius: BorderRadius.circular(12)),
                height: MediaQuery.of(context).size.height * 0.18,
                child: CupertinoTheme(
                  data: CupertinoThemeData(
                    textTheme: CupertinoTextThemeData(
                        pickerTextStyle: TextStyle(
                      color: Color(0xffB59CCF),
                    )),
                  ),
                  child: CupertinoDatePicker(

但是，顏色沒有改變，如下所示：

我在 main.dart 中的主題如下：

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          bodyText1: TextStyle(),
          bodyText2: TextStyle(),
        ).apply(
            bodyColor: Colors.white.withOpacity(0.87),
            displayColor: Colors.white.withOpacity(0.87)),
        primaryColor: Colors.white,
        secondaryHeaderColor: Colors.white.withOpacity(0.60),
        backgroundColor: Color(0xff111016),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
              padding: EdgeInsets.all(15),
              shape: CircleBorder(),
              elevation: 6,
              onPrimary: Color(0xff04072E),
              primary: Colors.yellow[100],
              textStyle: TextStyle(fontSize: 21)),
        ),

我不確定是什么導致 CupertinoDatePicker 的文本顏色為黑色，但我希望它改變它的顏色。 任何幫助表示贊賞！ 謝謝！

更改為 dateTimePickerTextStyle 后，出現以下情況：

Answer 1

您正在尋找的是

dateTimePickerTextStyle: TextStyle(color: Colors.white),

此屬性是CupertinoTextThemeData的一部分。

所以你的代碼應該是這樣的，

CupertinoTheme(
  data: CupertinoThemeData(
    textTheme: CupertinoTextThemeData(
      dateTimePickerTextStyle: TextStyle(color: Colors.white),
    ),
  ),
  child: CupertinoDatePicker(
    onDateTimeChanged: (_) {},
  ),
)

從官方文檔來看，

內容文本使用 CupertinoTextThemeData.dateTimePickerTextStyle 顯示。

Answer 2

使用dateTimePickerTextStyle而不是pickerTextStyle

這是工作代碼

          CupertinoTheme(
            data: CupertinoThemeData(
              textTheme: CupertinoTextThemeData(
                dateTimePickerTextStyle: TextStyle(
                  color: Colors.red,
                ),
              ),
            ),
            child: CupertinoDatePicker(
              minimumDate: DateTime.now(),
              minuteInterval: 1,
              mode: CupertinoDatePickerMode.dateAndTime,
              onDateTimeChanged: (DateTime dateTime) {
                print("dateTime: ${dateTime}");
              },
            ),
          );

請參考CupertinoTextThemeData

Answer 3

            return CupertinoTheme(
                        data: CupertinoThemeData(
                          brightness: Brightness.dark,
                        ),
                        child: Container(
                          height: 200,
                          child: CupertinoDatePicker(
                              backgroundColor: darkColor,
                              initialDateTime: DateTime.now(),
                              maximumDate: new DateTime(2050, 12, 30),
                              minimumYear: 2010,
                              maximumYear: 3000,
                              minuteInterval: 1,
                              mode: CupertinoDatePickerMode.date,
                              use24hFormat: true,
                              onDateTimeChanged: (DateTime newdate) {
                                print(newdate);
                                setState(() {
                                  tanggalController.text =
                                      newdate.formatDateView();
                                });
                              }),
                        ),
                      );