Flutter Dialog

Flutter 系列文章 总体目录

Flutter提供了showDialog函数显示一个对话框。
showDialog:展示Material 控件
showCupertinoDialog:ios样式对话框
showGeneralDialog:自定义弹出的窗口,默认状态下弹出的窗口点击空白处不消失

直接看例子:

import 'package:flutter/material.dart';

class DialogDemo extends StatefulWidget {
  @override
  State createState() => _DialogDemo();
}

class _DialogDemo extends State {
  _generateSimpleDialog() {
    return SimpleDialog(
      title: Text('simple dialog title'),
      children: [
        Container(
          height: 100,
          child: Text('这里填写内容'),
        ),
        FlatButton(
          child: Text('取消'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        FlatButton(
          child: Text('确认'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  }

  _generateAlertDialog() {
    return AlertDialog(
      title: Text('这是标题'),
      content: Text('这是内容'),
      actions: [
        FlatButton(
          child: Text('取消'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        FlatButton(
          child: Text('确认'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: [
        RaisedButton(
          child: Text('show simple dialog'),
          onPressed: () => showDialog(
              context: context, builder: (_) => _generateSimpleDialog()),
        ),
        RaisedButton(
          child: Text('show alert dialog'),
          onPressed: () => showDialog(
              context: context, builder: (_) => _generateAlertDialog()),
        ),

        RaisedButton(
            child: Text('show general dialog'),
            onPressed: () => showGeneralDialog(
                  context: context,
                  pageBuilder: (context, a, b) => _generateAlertDialog(),
                  barrierDismissible: false,
                  barrierLabel: 'barrierLabel',
                  transitionDuration: Duration(milliseconds: 400),
                )),
      ],
    );
  }
}

Flutter Dialog_第1张图片
Flutter Dialog_第2张图片

你可能感兴趣的:(*Flutter,Flutter)