Flutter 中懸浮窗口Widget之Overlay

在開發(fā)中常常需要一個(gè)懸浮窗口來做各種篩選,實(shí)現(xiàn)懸浮控件需要知道懸浮控件應(yīng)該出現(xiàn)在什么位置以及窗口的大小,而獲取懸浮控件的所需的位置需要知道父控件的position。在flutter 中通過BuildContext findRenderObject獲取widget的position和size。

bool _isShow = false;
OverlayEntry _overlay;
//觸發(fā)事件控件的全局key ,通過key可以獲取到key對應(yīng)的控件
GlobalKey _tapWidget = Globalkey();

OverlayEntry _createSelectViewWithContext(BuildContext context){
    //屏幕寬高
    RenderBox  renderBox = context.findRenderObject();
    var screenSize = renderBox.size;
    //觸發(fā)事件的控件的位置和大小
    renderBox = _tapWidget.findRenderObject();
    var parentSize = renderBox.size;
    var parentPosition = renderBox.localToGlobal(Offset.zero);
    //正式創(chuàng)建Overlay
    return OverlayEntry(
        builder: (context) => Positioned (
            top: parentPosition.dy + parentSize.height,
            width: screenSize.width,
            height:screenSize.height-parentPosition.dy-parentPosition.height,
            child:Stack(
                children:<Widget>[
                    GestureDetctor(//黑色 26透明度背景
                        onTap:(){
                            setState( () {
                             _isShow = false;
                            });
                            //點(diǎn)擊背景 隱藏窗口
                            _showOverlay(_isShow);
                        },
                        child: Container(
                            height: screenSize.height-parentPosition.dy-parentPosition.height,
                            width:screenSize.width,
                            color:Colors.black26,
                        ),
                    ),
                    Container( height:100),//懸浮窗口自定義
                ]
            ),      
        )
    );
    
}
//現(xiàn)實(shí)顯示具體方法 在需要的地方掉用即可
_showOverlay(bool isShow) {
    if (isShow) {
        _overlay = _createSelectViewWithContext(context);
        Overlay.of(context).inset(_overlay);
    } else {
        _overlay.remove();
    }
}

看到有人問,當(dāng)頁面返回時(shí),overlay沒有消失。這里說明一下overlay是Stack,是在整個(gè)app頁面最上層,所以返回不會隨頁面消失??梢栽陧撁娴膁ispose()方法中掉用_overlay.remove()

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 本文介紹了Flutter應(yīng)用程序中Widget,State,BuildContext和InheritedWidge...
    __white閱讀 2,988評論 1 6
  • 首先,在Flutter中幾乎所有的對象都是一個(gè)Widget。跟原生開發(fā)中的“控件”不同,F(xiàn)lutter中的Widg...
    沉江小魚閱讀 2,236評論 0 2
  • 原文在此,此處只為學(xué)習(xí) Widget與ElementWidget主要接口Stateless WidgetState...
    lltree閱讀 4,628評論 0 1
  • Flutter中Widget,State和BuildContext的概念是每個(gè)Flutter開發(fā)人員需要完全理解的...
    DramaScript閱讀 5,931評論 0 1
  • 文/平平 從四月二號我開始在簡書上寫感受起,我暗自激勵(lì)自己,每天發(fā)一篇自己的體會或者學(xué)生的文章,一定要在畢業(yè)前積累...
    春日暢想閱讀 196評論 0 2

友情鏈接更多精彩內(nèi)容