Flutter

Question

我正在使用 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));
                },
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

截图：

Answer 1

尝试使用此代码

您可以根据自己的需要进行编辑

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

Answer 2

奇怪的是，将 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));
                },
              ),
            ),

Flutter - CuppertinoDatePicker 主题覆盖打破了列宽

Flutter - CuppertinoDatePicker theme overwrite breaks column width

dart

flutter-cupertino

尝试使用此代码