“matchMedia”支持在Dart [英] "matchMedia" support in Dart

问题描述

如何在Dart中使用window.matchMedia？

How to use window.matchMedia in Dart?

我找到了对应的方法：

MediaQueryList matchMedia(String query)

和MediaQueryList方法：

And "MediaQueryList" method:

void addListener(MediaQueryListListener listener)

但是： MediaQueryListListener 没有构造函数和外观

But: MediaQueryListListener has no constructor and looks like some sort of a generated stub.

我有 JS示例：

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

推荐答案

由于在评论中指出，现在似乎无法在Dart中实施。

As pointed in a comment it doesn't seem to be implemented in Dart for now.

但是，你可以使用dart：js 来做这样的操作：

However you can use dart:js to do that like this :

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');
  }
}

这篇关于“matchMedia”支持在Dart的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！