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

时间:2019-09-02 09:46:46

标签: flutter flutter-layout

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

这是代码:

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

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

1 个答案:

答案 0 :(得分:0)

尝试一下:

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

    }

enter image description here