显示 Cupertino 表单

Cupertino 底部弹窗是一种 iOS 风格的模态底部弹窗，用于呈现内容或选项。它会从屏幕底部滑入，并可以通过向下拉动来关闭。

在 Flutter 中，这可以通过 showCupertinoSheet 来实现。本教程通过以下步骤来实现一个 Cupertino 底部弹窗：

1. 创建一个 CupertinoApp 或 MaterialApp。
2. 显示弹窗内容。

在构建遵循 iOS 设计准则的应用时，可以使用 CupertinoApp。以下示例在屏幕中央提供了一个用于触发模态弹窗的按钮。

class CupertinoSheetDemo extends StatelessWidget {
  const CupertinoSheetDemo({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      title: 'CupertinoSheet Demo',
      home: CupertinoSheetPage(),
    );
  }
}

在搭建好基础应用结构后，即可显示弹窗。调用 showCupertinoSheet 并提供一个 builder，该构建器返回弹窗的内容（例如 SingleChildScrollView）即可显示它。

showCupertinoSheet(
  context: context,
  builder: (context) {
    return SingleChildScrollView(
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const SizedBox(height: 100),
            const Text('This is a Cupertino sheet'),
            const SizedBox(height: 20),
            CupertinoButton(
              child: const Text('Close'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  },
);

import 'package:flutter/cupertino.dart';

void main() => runApp(const CupertinoSheetDemo());

class CupertinoSheetDemo extends StatelessWidget {
  const CupertinoSheetDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      title: 'CupertinoSheet Demo',
      home: CupertinoSheetPage(),
    );
  }
}

class CupertinoSheetPage extends StatelessWidget {
  const CupertinoSheetPage({super.key});

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('CupertinoSheet Demo'),
      ),
      child: Center(
        child: CupertinoButton.filled(
          onPressed: () {
            showCupertinoSheet(
              context: context,
              builder: (context) {
                return SingleChildScrollView(
                  child: Center(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        const SizedBox(height: 100),
                        const Text('This is a Cupertino sheet'),
                        const SizedBox(height: 20),
                        CupertinoButton(
                          child: const Text('Close'),
                          onPressed: () {
                            Navigator.pop(context);
                          },
                        ),
                      ],
                    ),
                  ),
                );
              },
            );
          },
          child: const Text('Show Sheet'),
        ),
      ),
    );
  }
}