Flutter - CuppertinoDatePicker 主题覆盖打破列宽答案

【问题标题】：Flutter - CuppertinoDatePicker theme overwrite breaks column widthFlutter - CuppertinoDatePicker 主题覆盖打破列宽
【发布时间】：2021-09-01 06:14:53
【问题描述】：

我正在使用 CupertinoDatePicker 在表单中设置日期。为了匹配我们的应用程序设计，我需要选择器处于暗模式，所以我调整了backgroundColor。为了使选择器中的文本为白色，我将选择器包裹在 Container 中，并带有 CupertinoTheme 以设置颜色。我是根据这个解决方案做的：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));
                },
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

截图：

【问题讨论】：

标签： flutter dart flutter-cupertino

【解决方案1】：

奇怪的是，将 fontSize 添加到 CupertinoTextThemeData 可以解决此问题：

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));
                },
              ),
            ),

【讨论】：

【解决方案2】：

尝试使用此代码

你可以根据自己的需要编辑

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,
                    ),
                  );

【讨论】：

除了您选择dateAndTime 模式之外，与我的初始代码相比，您的代码示例中的内容应该有所不同。我真的不需要那种模式，因此我选择了date。