如何将 CupertinoDatePicker 保持在屏幕底部而不是整个屏幕?

flu*_*g98 2 flutter flutter-layout

所以,我在我的应用程序中实现了一个 CupertinoDatePicker,但是当我尝试访问它时,它显示在整个屏幕上,而不仅仅是底部。

这是代码:

onPressed: () {
 showCupertinoModalPopup(
 context: context,
 builder: (BuildContext context) => CupertinoDatePicker(
  mode: CupertinoDatePickerMode.dateAndTime,
  onDateTimeChanged: (DateTime date) {
   _dateTime = date;
   }),
  );
},
Run Code Online (Sandbox Code Playgroud)

我想知道为什么会这样。参考文档也没有真正的帮助。

Ami*_*ati 7

尝试这个 :

    class HomePage extends StatefulWidget {
    @override
    _HomePageState createState() => _HomePageState();
    }

    class _HomePageState extends State<HomePage> {

    // Value that is shown in the date picker in dateAndTime mode.
    DateTime dateTime = DateTime.now();
    @override
    Widget build(BuildContext context) {
        return Scaffold(
        appBar: AppBar(),
        body: Center(
            child: RaisedButton(
            onPressed: () {
                showCupertinoModalPopup<void>(
                context: context,
                builder: (BuildContext context) {
                    return _buildBottomPicker(
                    CupertinoDatePicker(
                        mode: CupertinoDatePickerMode.dateAndTime,
                        initialDateTime: dateTime,
                        onDateTimeChanged: (DateTime newDateTime) {
                        if (mounted) {
                            print("Your Selected Date: ${newDateTime.day}");
                            setState(() => dateTime = newDateTime);
                        }
                        },
                    ),
                    );
                },
                );
            },
            child: Text('show date picker'),
            ),
        ),
        );
    }
        double _kPickerSheetHeight = 216.0;
        Widget _buildBottomPicker(Widget picker) {
            return Container(
            height: _kPickerSheetHeight,
            padding: const EdgeInsets.only(top: 6.0),
            color: CupertinoColors.white,
            child: DefaultTextStyle(
                style: const TextStyle(
                color: CupertinoColors.black,
                fontSize: 22.0,
                ),
                child: GestureDetector(
                // Blocks taps from propagating to the modal sheet and popping.
                onTap: () {},
                child: SafeArea(
                    top: false,
                    child: picker,
                ),
                ),
            ),
            );
        }

    }
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

  • 那太棒了!您是如何录制该视频片段的? (2认同)