flutter实现ios风格时间选择器

最新推荐文章于 2024-07-26 13:48:52 发布

HSGS_312

最新推荐文章于 2024-07-26 13:48:52 发布

阅读量512

点赞数 9

文章标签： flutter ios

本文链接：https://blog.csdn.net/HSGS_312/article/details/135845423

版权

效果展示：

选择器组件代码：

import 'package:flutter/cupertino.dart';

class TimePicker extends StatelessWidget {
  final DateTime time;

  /// tap 事件
  final Function(DateTime) onDateTimeChanged;
  const TimePicker(
      {super.key, required this.time, required this.onDateTimeChanged});

  @override
  Widget build(BuildContext context) {
    return Container(
        child: _BottomPicker(
      child: CupertinoDatePicker(
          backgroundColor:
              CupertinoColors.systemBackground.resolveFrom(context),
          mode: CupertinoDatePickerMode.time,
          initialDateTime: time,
          onDateTimeChanged: onDateTimeChanged),
    ));
  }
}

class _BottomPicker extends StatelessWidget {
  const _BottomPicker({required this.child});

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 216,
      padding: const EdgeInsets.only(top: 6),
      margin: EdgeInsets.only(
        bottom: MediaQuery.of(context).viewInsets.top,
      ),
      color: CupertinoColors.systemBackground.resolveFrom(context),
      child: DefaultTextStyle(
        style: TextStyle(
          color: CupertinoColors.label.resolveFrom(context),
          fontSize: 22,
        ),
        child: GestureDetector(
          // Blocks taps from propagating to the modal sheet and popping.
          onTap: () {},
          child: SafeArea(
            top: false,
            child: child,
          ),
        ),
      ),
    );
  }
}

页面使用：