19. Flutter ラーニング パスのダイアログ タイプ

class DialogPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _DialogPageState();
  }
}

class _DialogPageState extends State<DialogPage> {
  _alertDialog() async {
    var result = await showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text('这是一个Dialog标题'),
            content: Text('这是内容'),
            actions: <Widget>[
              FlatButton(
                child: Text(
                  '取消',
                  style: TextStyle(color: Colors.cyan),
                ),
                onPressed: () {
                  Navigator.pop(context, "取消"); //进行关闭，并且将数据传递给result，以下所有做法均一致。
                },
              ),
              FlatButton(
                child: Text(
                  '确定',
                  style: TextStyle(color: Colors.red),
                ),
                onPressed: () {
                  Navigator.pop(context, "确定"); //进行关闭
                },
              ),
            ],
          );
        });

    print(result);
  }

  _simpleDialog() async {
    var result = await showDialog(
        context: context,
        builder: (context) {
          return SimpleDialog(
            title: Text('选择对应内容'),
            children: <Widget>[
              SimpleDialogOption(
                child: Text('Option A'),
                onPressed: () {
                  Navigator.pop(context, 'A');
                },
              ),
              Divider(),
              SimpleDialogOption(
                child: Text('Option B'),
                onPressed: () {
                  Navigator.pop(context, 'B');
                },
              ),
              Divider(),
              SimpleDialogOption(
                child: Text('Option C'),
                onPressed: () {
                  Navigator.pop(context, 'C');
                },
              ),
            ],
          );
        });
    print(result);
  }

  _modelBottomSheet() async {
    var result = await showModalBottomSheet(
        context: context,
        builder: (context) {
          return Container(
            height: 200,//不设置默认高度为一半
            child: Column(
              children: <Widget>[
                ListTile(
                  title: Text('分享A'),
                  onTap: (){
                    Navigator.pop(context,'A');
                  },
                ),
                ListTile(
                  title: Text('分享B'),
                  onTap: (){
                    Navigator.pop(context,'B');
                  },
                ),
                ListTile(
                  title: Text('分享C'),
                  onTap: (){
                    Navigator.pop(context,'C');
                  },
                ),
              ],
            ),
          );
        },
    );
    print(result);
  }

  _toast()  {
    Fluttertoast.showToast(
        msg: "This is Center Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,	//设置显示位置
        timeInSecForIos: 1,		//只在ios上有效，
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dialog演示'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('AlertDilaog'),
              onPressed: () {
                _alertDialog();
              },
            ),
            RaisedButton(
              child: Text('SimpleDialog'),
              onPressed: () {
                _simpleDialog();
              },
            ),
            RaisedButton(
              child: Text('ActionSheet底部弹出框-showModalBottomSheet'),
              onPressed: () {
                _modelBottomSheet();
              },
            ),
            RaisedButton(
              child: Text('Toast第三方库-fluttertoast'),
              onPressed: () {
                _toast();
              },
            ),
          ],
        ),
      ),
    );
  }
}

その中で、私たちが使用しているサードパーティのToast については、ここにアクセスしてドキュメントを参照してください。ここでは詳細には触れません

カスタムダイアログ

ダイアログをカスタマイズする手順:

1. カスタムクラスの継承Dialogクラス
2. オーバーライドされたbuildメソッドと最も外側のメソッドreturn Material()
3. 他のダイアログと同様に、showDialog( context: context, builder: (context){ return 自定义Dialog(); } );

カスタムプロンプトダイアログクラス

class MyDialog extends Dialog{
 @override
 Widget build(BuildContext context) {
   // TODO: implement build
   return Material(
     type: MaterialType.transparency,  //设置透明度
     child: Center(
       child: Container(
         width: 200,
         height: 200,
         color: Colors.white,
         child: Column(
           mainAxisAlignment: MainAxisAlignment.start,
           children: <Widget>[
             Row(
               children: <Widget>[
                 Expanded(flex: 1,child: Text('1111',textAlign: TextAlign.center,),),
                 InkWell(
                   child:Icon(Icons.close),
                   onTap: (){
                     Navigator.pop(context);
                   }
                 ),
               ],
             ),
             Divider(),
             Container(
               width: double.infinity,
               child: Text('22312',textAlign: TextAlign.left),
             ),
           ],
         ),
       ),
     ),
   );
 }
}

使用する場合:

 RaisedButton(
              child: Text('自定义Dialog),
              onPressed: () {
//                _toast();
                showDialog(
                  context: context,
                  builder: (context){
                    return MyDialog();
                  }
                );
              },
            ),