" matchMedia" Dart的支持

时间:2013-11-02 18:31:37

标签: media-queries dart

如何在Dart中使用window.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

1 个答案:

答案 0 :(得分:3)

作为pointed in a comment,它现在似乎没有在Dart中实现。

但是你可以使用 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');
  }
}