Flutter - CuppertinoDatePicker主题覆盖折断列宽
Flutter - CuppertinoDatePicker主题覆盖折断列宽
提问于 2021-06-16 20:14:20
我正在使用CupertinoDatePicker在表单中设置日期。为了匹配我们的应用程序设计，我需要将选取器设置为暗模式，因此我调整了backgroundColor。为了使选择器中的文本为白色，我使用CupertinoTheme将选择器包装在Container中以设置颜色。我基于这个解决方案做到了这一点：How to change font size for CupertinoDatePicker in Flutter?。由于某种原因，这破坏了CupertinoDatePicker中列的宽度，我不知道为什么会发生这种情况。如果我删除CupertinoTheme，列是好的，但文本也是暗的，因此无法阅读。
代码：
void showPlatformDatePicker() {
showCupertinoModalPopup(
context: context,
builder: (_) => Container(
color: Colors.black87,
height: 400,
child: Column(
children: [
Container(
color: Color.fromRGBO(18, 18, 18, 1),
alignment: Alignment.centerRight,
child: TextButton(
onPressed: () => Navigator.pop(context),
child: Text(
'Done',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.normal,
color: Colors.white,
),
),
),
),
Container(
height: 350,
width: double.infinity,
child: CupertinoTheme(
data: CupertinoThemeData(
textTheme: CupertinoTextThemeData(
dateTimePickerTextStyle: TextStyle(
color: Colors.white,
),
),
),
child: CupertinoDatePicker(
backgroundColor: Colors.black87,
mode: CupertinoDatePickerMode.date,
maximumDate: DateTime.now().subtract(Duration(days: 365)),
initialDateTime:
DateTime.now().subtract(Duration(days: 365 * 18)),
onDateTimeChanged: (val) {
final date = val.toIso8601String();
context
.bloc<FormBloc>()
.add(DateChanged(date));
},
),
),
),
],
),
),
);
}截图：
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-09-30 16:03:32
奇怪的是，向CupertinoTextThemeData添加fontSize可以解决这个问题：
Container(
height: 350,
width: double.infinity,
child: CupertinoTheme(
data: CupertinoThemeData(
textTheme: CupertinoTextThemeData(
dateTimePickerTextStyle: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
),
child: CupertinoDatePicker(
backgroundColor: Colors.black87,
mode: CupertinoDatePickerMode.date,
maximumDate: DateTime.now().subtract(Duration(days: 365)),
initialDateTime:
DateTime.now().subtract(Duration(days: 365 * 18)),
onDateTimeChanged: (val) {
final date = val.toIso8601String();
context
.bloc<FormBloc>()
.add(DateChanged(date));
},
),
),Stack Overflow用户
发布于 2021-06-16 20:55:43
尝试使用此代码
您可以根据需要进行编辑
Container(
height: MediaQuery.of(context).size.height * 0.25,
child: CupertinoDatePicker(
initialDateTime: DateTime.now(),
onDateTimeChanged: (DateTime nowDate) {
var currentTime = nowDate;
},
use24hFormat: true,
minimumYear: 2010,
maximumYear: 2018,
minuteInterval: 1,
mode: CupertinoDatePickerMode.dateAndTime,
),
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68002448
复制相关文章
相似问题
腾讯云开发者
