Flutter中有无模式对话吗?

时间:2018-06-18 18:44:43

标签: flutter

Flutter中是否存在无模式对话框的模拟?如果没有,可以构建具有无模式对话框属性的小部件吗?

我会尝试更详细地解释。我的来源问题已被编辑。 通过单击画布,我必须调用_handleTapDown函数:

void _handleTapDown (TapDownDetails details)
{
      _showModeless (context);
}

在此功能中,需要可视化您的无模型小部件:

void _showModeless (BuildContext context)
{
// How do I show Modeless Widget?
}

2 个答案:

答案 0 :(得分:2)

您可以使用Overlay将小部件添加到其他所有内容之上;然后根据自己的喜好使用它们。

enter image description here

class ModeLess extends StatefulWidget {
  final Widget child;

  ModeLess({this.child});

  @override
  _ModeLessState createState() => new _ModeLessState();
}

class _ModeLessState extends State<ModeLess> {
  OverlayEntry modeless;

  @override
  void initState() {
    super.initState();
    modeless = new OverlayEntry(
        opaque: false,
        builder: (context) {
          return new Positioned(
            top: 50.0,
            left: 50.0,
            child: new SizedBox(
              height: 50.0,
              child: new Card(
                child: new Text("I'm a modeless")
              ),
            ),
          );
        });

    Future.microtask(() {
      Overlay.of(context).insert(modeless);
    });
  }

  @override
  void dispose() {
    modeless.remove();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return widget.child;
  }
}

答案 1 :(得分:0)

RémiRousselet,非常感谢。您的建议有所帮助。下面是我需要的函数原型:

  OverlayEntry
    _modeless = null;

  void _showModeless(BuildContext context)
  {
     _modeless = new OverlayEntry(
        opaque: false,
        builder: (context) {
          return new Positioned(
            top: 100.0,
            left: 100.0,
            child:
            new Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                new Icon(Icons.content_paste, color: Colors.blueGrey),
                  new Padding(
                    padding: const EdgeInsets.only(left: 16.0),
                    child: new Text('Modeless', overflow: TextOverflow.ellipsis,
                      style: new TextStyle(fontSize: 14.0, fontWeight: FontWeight.bold, color: Colors.lightBlue, decoration: TextDecoration.none
                      ),
                    ),
                  ),
              ],
            ),
          );
        });
    Overlay.of(context).insert(_modeless);
     _startWaiting();
  }

 static const TIMEOUT = const Duration(seconds: 8);
 static Timer _timer = null;

  void _startWaiting()
  {
    _timer = new Timer(TIMEOUT, _handleTimeout);
  }

  void _handleTimeout()
  {
    if (_modeless != null)
      _modeless.remove();
  }

PS。我仅添加了另一个功能,该功能允许在8秒后删除无模式。再次非常感谢。