3、Flutter Widget(IOS Style) - CupertinoAlertDialog;

迈不过友情╰ 2022-01-20 08:19 198阅读 0赞

要想创建一个带有确定按钮和取消按钮等的提示弹窗。可以使用`CupertinoAlertDialog`;

class CupertinoAlertDialogApp extends StatelessWidget{
      @override
      Widget build(BuildContext context)  => CupertinoApp(
        home: _buildCupertinoHomePage(),
      );
    
    
      Widget _buildCupertinoHomePage() => CupertinoTabScaffold(
          tabBar: CupertinoTabBar(items: [
            BottomNavigationBarItem(icon: Icon(CupertinoIcons.mail_solid),title: Text("Mail")),
            BottomNavigationBarItem(icon: Icon(CupertinoIcons.eye_solid),title: Text("Look")),
            BottomNavigationBarItem(icon: Icon(CupertinoIcons.collections_solid),title: Text("Collections")),
            BottomNavigationBarItem(icon: Icon(CupertinoIcons.person_solid),title: Text("Me")),
          ]),
          tabBuilder: (cxt,position){
            return _buildPage(cxt,position);
          },
      );
    
    
      Widget _buildPage(BuildContext cxt,int position)=>CupertinoPageScaffold(
          child:Center(child: CupertinoButton(child: Text("Show"), onPressed: (){
            _showCupertinoAlertDialog(cxt);
          }),),
        navigationBar: CupertinoNavigationBar(
          middle: Text('The page $position'),
        ),
      );
    
    
      void _showCupertinoAlertDialog(BuildContext cxt){
        showCupertinoDialog<int>(context: cxt, builder: (cxt){
          return CupertinoAlertDialog(title: Text("Alert"),content: Text('some mesage'),actions: <Widget>[
            CupertinoDialogAction(child: Text("Sure"),onPressed: (){
              Navigator.pop(cxt,1);
            },),
            CupertinoDialogAction(child: Text("Cancel"),onPressed: (){
              Navigator.pop(cxt,2);
    
            },)
          ],);
        });
      }
    
    }
    复制代码

### showCupertinoDialog方法; ###

Future<T> showCupertinoDialog<T>({
      @required BuildContext context,
      @required WidgetBuilder builder,
    })
    复制代码

在应用程序的当前内容上方显示iOS风格的对话框，具有iOS风格的出入动画，模态障碍颜色和模态屏障行为（点击屏障时不允许该对话框）。   这个函数需要一个`builder`，它通常构建一个`CupertinoDialog`或`CupertinoAlertDialog`小部件。对话框下方的内容使用`ModalBarrier`调暗。   `builder`返回的窗口小部件不与最初调用`showCupertinoDialog`的位置共享上下文。如果对话框需要动态更新，请使用\[StatefulBuilder\]或自定义\[StatefulWidget\]。

`context`参数用于查找对话框的\[Navigator\]。它仅在调用方法时使用。在关闭对话框之前，可以从树中安全地删除其相应的小部件。

返回\[Future\]，解析为关闭对话框时传递给\[Navigator.pop\]的值（如果有）。

此方法创建的对话框路由将推送到根导航器。如果应用程序有多个\[Navigator\]对象，则可能需要调用`Navigator.of（context，rootNavigator：true）.pop（result）`来关闭对话框，而不仅仅是`Navigator.pop（context，result）` 。

### CupertinoAlertDialog ###

创建IOS风格的提示弹窗。如下为其构造函数：

const CupertinoAlertDialog({
        Key key,
        this.title,
        this.content,
        this.actions = const <Widget>[],
        this.scrollController,
        this.actionScrollController,
      }) 
    复制代码

显示在对话框底部的（可选）一组按钮。通常，这是`CupertinoDialogAction`小部件的列表。

### CupertinoDialogAction ###

为iOS样式的对话框创建操作,如下为其构造函数：

const CupertinoDialogAction({
        this.onPressed,
        this.isDefaultAction = false,
        this.isDestructiveAction = false,
        this.textStyle,
        @required this.child,
      }) 
    复制代码

`onPressed`为点击回掉。`isDefaultAction`是否为默认，默认按钮加粗。`textStyle`可以设置child widget `Text`的样式。`child`一般为`Text`Widget。

### CupertinoPopupSurface ###

如果想自定义弹窗ui,可以使用`CupertinoPopupSurface`;

const CupertinoPopupSurface({
        Key key,
        this.isSurfacePainted = true,
        this.child,
      })
    复制代码

`isSurfacePainted`是否在这个表面的模糊背景上绘制半透明的白色。`child`为该弹窗的小部件树。