2

Dartでwindow.matchMediaを使用するには?

対応する方法を見つけました：

MediaQueryList matchMedia(String query)

そして「MediaQueryList」メソッド：

void addListener(MediaQueryListListener listener)

ただしMediaQueryListListener、コンストラクターがなく、生成されたスタブのようなものです。

私は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を持っています

4

1 に答える 1

3

コメントで指摘されているように、今のところ 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');
  }
}
于 2013-11-03T20:14:21.327 に答える