一统天下 flutter - widget 弹出类: SimpleDialog - 弹出框(包括标题,多个选项)

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget 弹出类: SimpleDialog - 弹出框(包括标题,多个选项)

示例如下:

lib\widget\flyout\simple_dialog.dart

/*
 * SimpleDialog - 弹出框(包括标题,多个选项)
 */

import 'package:flutter/material.dart';

import '../../helper.dart';

class SimpleDialogDemo extends StatefulWidget {
  const SimpleDialogDemo({Key? key}) : super(key: key);

  @override
  _SimpleDialogDemoState createState() => _SimpleDialogDemoState();
}

class _SimpleDialogDemoState extends State<SimpleDialogDemo> {

  String _result = "";

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.orange,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () async {
              /// 显示弹出框,并获取弹出框的返回值
              var result = await _showDialog(context);
              setState(() {
                _result = 'result: $result';
              });
            },
            child: const Text('弹出 SimpleDialog'),
          ),
          MyText(_result),
        ],
      ),
    );
  }

  Future<String?> _showDialog(BuildContext context) {
    /// showDialog<T> 显示弹出框,其中的 T 是弹出框的返回结果的类型
    return showDialog<String>(
      context: context,
      barrierColor: Colors.red,                           /// 显示弹出框后,弹出框和主界面之间的遮罩层的颜色
      barrierDismissible: false,                          /// 点击空白区域后是否要自动隐藏弹出框
      builder: (BuildContext context) => SimpleDialog(    /// 弹出框的类型为 SimpleDialog(除了以下演示的外,还可以定义标题样式等,自己看文档吧)
        title: const Text('title'),                       ///   标题
        backgroundColor: Colors.white,                    ///   背景色
        insetPadding: EdgeInsets.zero,                    ///   弹出框的位置
        children: <Widget>[                               ///   选项集合
          SimpleDialogOption(
            onPressed: () { Navigator.pop(context, "option1 pressed"); },
            child: const Text('option1'),
          ),
          SimpleDialogOption(
            onPressed: () { Navigator.pop(context, "option2 pressed"); },
            child: const Text('option2'),
          ),
          SimpleDialogOption(
            onPressed: () { Navigator.pop(context, "option3 pressed"); },
            child: const Text('option3'),
          ),
        ],
      ),
    );
  }
}

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

posted @ 2023-03-22 10:44  webabcd  阅读(141)  评论(0编辑  收藏  举报