更改库比蒂诺日期选择器的文本颜色
Changing The Text Color Of Cupertino Date Picker
下面附上我当前更改 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 后,出现以下情况:
您要找的是
dateTimePickerTextStyle: TextStyle(color: Colors.white),
此 属性 是 CupertinoTextThemeData
的一部分。
所以你的代码应该是这样的,
CupertinoTheme(
data: CupertinoThemeData(
textTheme: CupertinoTextThemeData(
dateTimePickerTextStyle: TextStyle(color: Colors.white),
),
),
child: CupertinoDatePicker(
onDateTimeChanged: (_) {},
),
)
来自官方文档,
Content texts are shown with CupertinoTextThemeData.dateTimePickerTextStyle.
使用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}");
},
),
);
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();
});
}),
),
);
下面附上我当前更改 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 后,出现以下情况:
您要找的是
dateTimePickerTextStyle: TextStyle(color: Colors.white),
此 属性 是 CupertinoTextThemeData
的一部分。
所以你的代码应该是这样的,
CupertinoTheme(
data: CupertinoThemeData(
textTheme: CupertinoTextThemeData(
dateTimePickerTextStyle: TextStyle(color: Colors.white),
),
),
child: CupertinoDatePicker(
onDateTimeChanged: (_) {},
),
)
来自官方文档,
Content texts are shown with CupertinoTextThemeData.dateTimePickerTextStyle.
使用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}");
},
),
);
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();
});
}),
),
);