フラッターウィジェットダイアログ-Dialog

注：特に指定のない限り、フラッタバージョンとダートのバージョンは次の通りです：

フラッターバージョン：1.12.13 + hotfix.5

ダートバージョン：2.7.0

アプリケーションは、重要な操作を実行するために、ユーザが必要とする場合が多い通常「あなたは現在のファイルを削除しますか」プロンプトが表示され、そのようなファイルを削除する場合など、ユーザーの回避を悪用するためには、確認のため2回実行され、ユーザーはこの中で、[OK]をクリックした後、操作を削除します我々は、プロンプトボックス（AlertDialogまたはCupertinoAlertDialog）を使用することができます。

設計に応じて、我々は、マテリアルスタイルAlertDialogまたはクパチーノ（IOS）スタイルCupertinoAlertDialogを選択することができます

次のように材料スタイルのベースが使用されます。

RaisedButton(
  child: Text('切换'),
  onPressed: () {
    showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text('提示'),
            content: Text('确认删除吗？'),
            actions: <Widget>[
              FlatButton(child: Text('取消'),onPressed: (){},),
              FlatButton(child: Text('确认'),onPressed: (){},),
            ],
          );
        });
  },
)

材料スタイルへの影響：

次のようにクパチーノ（IOS）スタイルのベースが使用されます。

RaisedButton(
  child: Text('切换'),
  onPressed: () {
    showCupertinoDialog(
        context: context,
        builder: (context) {
          return CupertinoAlertDialog(
            title: Text('提示'),
            content: Text('确认删除吗？'),
            actions: <Widget>[
              CupertinoDialogAction(child: Text('取消'),onPressed: (){},),
              CupertinoDialogAction(child: Text('确认'),onPressed: (){},),
            ],
          );
        });
  },
)

次のようにクパチーノ（IOS）スタイルの結果は以下のとおりです。

showDialogそして、AlertDialogディスプレイマテリアルスタイルダイアログボックスと組み合わせて使用、showCupertinoDialogおよびCupertinoAlertDialogディスプレイのiOSスタイルのダイアログボックスと連動して、showCupertinoDialogダイアログボックスを終了し、することができないスペースをクリックしてshowDialog空白のデフォルトの終了時にダイアログボックスをクリックし、barrierDismissibleプロパティを次のように使用されているスペースをクリックの動作を制御します。

showDialog(
    barrierDismissible: false,
    )

AlertDialog比較的豊富特性は、形状設定、値をシェーディング、スタイルのタイトル、コンテンツ、スタイル、背景色を提供してもよいです。

AlertDialog(
  title: Text('提示'),
  content: Text('确认删除吗？'),
  backgroundColor: Colors.lightBlueAccent,
  elevation: 24,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)),
  actions: <Widget>[
    FlatButton(child: Text('取消'),onPressed: (){},),
    FlatButton(child: Text('确认'),onPressed: (){},),
  ],
)

次のようにダイアログボックスを終了するためにユーザーがクリックし、「キャンセル」または「OK」ボタン、ユーザーによって選択されたオプションを知っている知っているアプリケーションの必要性は、使用されます。

RaisedButton(
  child: Text('切换'),
  onPressed: () async {
    var result = await showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text('提示'),
            content: Text('确认删除吗？'),
            actions: <Widget>[
              FlatButton(
                child: Text('取消'),
                onPressed: () {
                  Navigator.of(context).pop('cancel');
                },
              ),
              FlatButton(
                child: Text('确认'),
                onPressed: () {
                  Navigator.of(context).pop('ok');
                },
              ),
            ],
          );
        });
    print('$result');
  },
)

あなたはこれらの2つのシステムは、ダイアログボックスの十分な個性のスタイルを提供考える場合は、次のように、基本的には同じSimpleDialog、使用状況やAlertDialogを試すことができます。

SimpleDialog(
  title: Text('提示'),
  children: <Widget>[
    Container(
      height: 80,
      alignment: Alignment.center,

      child: Text('确认删除吗？'),
    ),
    Divider(height: 1,),
    FlatButton(
      child: Text('取消'),
      onPressed: () {
        Navigator.of(context).pop('cancel');
      },
    ),
    Divider(height: 1,),
    FlatButton(
      child: Text('确认'),
      onPressed: () {
        Navigator.of(context).pop('ok');
      },
    ),
  ],
)

結果は以下の通りであります：

あなたは、これが究極の大法に頼っすることができ、十分な人格、および直接使用するダイアログであると考えられる場合は、ダイアログは、子属性にダイアログボックスの内容のみを任意のダイアログボックスをカスタマイズすることができます。

Dialog(
  child: MyDialog(),
);

当然一般情况下，系统提供的对话框就够用了，这几个对话框组件用法基本一样，不同的地方仅仅是灵活性和使用简易程度的不要，Dialog最灵活，但使用起来比AlertDialog复杂一些，AlertDialog使用起来非常简单，但布局和基本样式都已经固定好，不如Dialog灵活。

フラッターウィジェットダイアログ-Dialog

今天的文章对大家是否有帮助？如果有，请在文章底部留言和点赞，以表示对我的支持，你们的留言、点赞和转发关注是我持续更新的动力！

更多相关阅读：

おすすめ