飛鏢中的「matchMedia」支持

如何在Dart中使用window.matchMedia？飛鏢中的「matchMedia」支持

我找到相應的方法：

MediaQueryList matchMedia(String query)

和「MediaQueryList」的方法：

void addListener(MediaQueryListListener listener)

但是：MediaQueryListListener沒有構造，看起來像某種生成的存根。

我有JS example：

var mq = window.matchMedia("(min-width: 500px)"); 

// media query event handler 
if (matchMedia) { 
    var mq = window.matchMedia("(min-width: 500px)"); 
    mq.addListener(WidthChange); 
    WidthChange(mq); 
} 

// media query change 
function WidthChange(mq) { 

    if (mq.matches) { 
     // window width is at least 500px 
    } 
    else { 
     // window width is less than 500px 
    } 

}

而且它有良好的支撐http://caniuse.com/#feat=matchmedia

來源

2013-11-02 JAre

'addListener'和'似乎removeListener'沒有得以實施。做'反映（mq）'只顯示'匹配'和'媒體'作爲可用的方法。此外還有這個問題：https://code.google.com/p/dart/issues/detail?id=3338 –

@ KayZ問題從2012年5月31日O_O好像看起來我別無選擇，只能用onresize和流。或者直接與本地電話聯繫frankenstein。 – JAre

它可能沒有實現，因爲dart2js聲稱支持IE9，'matchMedia'只能用於IE10 +。因此，即使在Dart版本中，本工作草案也有可能不會實施。並將需要一些低性能墊片。 – JAre

由於pointed in a comment它似乎並沒有在DART實施現在。

但是你可以使用鏢：JS來是這樣做的：

import 'dart:js'; 

main() { 
    if (context['matchMedia'] != null) { 
    final mq = context.callMethod('matchMedia', ['(min-width: 500px)']); 
    mq.callMethod('addListener', [widthChange]); 
    widthChange(mq); 
    } 
} 
widthChange(mq) { 
    if (mq['matches']) { 
    print('window width is at least 500px'); 
    } else { 
    print('window width is less than 500px'); 
    } 
}

來源

2013-11-03 20:14:21

很好的回答！ '''mq.callMethod（'removeListener'，[widthChange]）;'''似乎不起作用。我怎樣才能註銷聽衆？ –

@ zoechi這是一個dartium的bug。 dart2js不存在這個問題。 –

問題提交http://dartbug.com/14796 –

飛鏢中的「matchMedia」支持

回答

相關問題