Flutter（39）：Cupertino组件之CupertinoDialog、CupertinoPopupSurface

Flutter教学目录持续更新中

Github源代码持续更新中

1.1.介绍

• CupertinoDialog：了解一下，已过时，推荐使用CupertinoPopupSurface
• CupertinoPopupSurface：比CupertinoDialog拥有更高的自定义能力

2.属性

• CupertinoDialog
  • child：
• CupertinoPopupSurface
  • child：
  • isSurfacePainted：是否使用白色模糊层

3.CupertinoDialog、CupertinoPopupSurface

CupertinoDialog.png

CupertinoPopupSurface.png

class _CupertinoDialogPageState extends State {
  _myCupertinoDialog(BuildContext context) {
    showCupertinoDialog(
      context: context,
      builder: (context) {
        return CupertinoDialog(
          child: _myDialog(),
        );
      },
    );
  }

  _myCupertinoPopupSurface(BuildContext context) {
    showCupertinoDialog(
        context: context,
        builder: (context) {
          return CupertinoPopupSurface(
            isSurfacePainted: false,
            child: Center(
              child: _myDialog(),
            ),
          );
        });
  }

  _myDialog() {
    return SingleChildScrollView(
      padding: EdgeInsets.all(10),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            'Title',
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
              color: Colors.black,
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 10, bottom: 10),
            child: Text(
              'content',
              style: TextStyle(
                fontSize: 14,
                color: Colors.black,
              ),
            ),
          ),
          Row(
            children: [
              Expanded(
                child: CupertinoButton.filled(
                  padding: EdgeInsets.all(10),
                  child: Text(
                    '取消',
                    textAlign: TextAlign.center,
                  ),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ),
              SizedBox(
                width: 10,
              ),
              Expanded(
                child: CupertinoButton.filled(
                  padding: EdgeInsets.all(10),
                  child: Text(
                    '确定',
                    textAlign: TextAlign.center,
                  ),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ),
            ],
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CupertinoDialog/CupertinoPopupSurface'),
      ),
      body: ListView(
        padding: EdgeInsets.all(10),
        children: [
          CupertinoButton.filled(
            child: Text('CupertinoDialog'),
            onPressed: () {
              _myCupertinoDialog(context);
            },
          ),
          CupertinoButton.filled(
            child: Text('CupertinoPopupSurface'),
            onPressed: () {
              _myCupertinoPopupSurface(context);
            },
          ),
        ],
      ),
    );
  }
}

下一节：Cupertino组件之CupertinoSlider

Flutter（40）：Cupertino组件之CupertinoSlider

Flutter教学目录持续更新中

Github源代码持续更新中