Как сделать приложение флаттера отзывчивым в зависимости от размера экрана?

Не добавляйте свой собственный MouseListener.

Передайте свой popupMeunu (который должен быть java.awt.PopupMenu, а не javax.swing.JPopupMenu) в конструкторе TrayIcon следующим образом:

TrayIcon trayIcon = new TrayIcon(image, "The Tip Text", popup);

Я скопировал это из этого учебника , и он отлично работал.

16
задан double-beep 19 June 2019 в 10:18
поделиться

4 ответа

Используя класс MediaQuery:

MediaQueryData queryData;
queryData = MediaQuery.of(context);

MediaQuery : Устанавливает поддерево, в котором медиа-запросы разрешаются на данные.

MediaQueryData : информация о фрагменте мультимедиа (например, окне).

Чтобы получить Пиксельное соотношение устройств:

queryData.devicePixelRatio

Чтобы получить ширину и высоту экрана устройства:

queryData.size.width
queryData.size.height

Чтобы получить масштабный коэффициент текста:

queryData.textScaleFactor

Использование класса AspectRatio :

Из документа:

Виджет, который пытается определить размер дочернего элемента. конкретное соотношение сторон.

Виджет сначала пробует наибольшую ширину, разрешенную ограничениями макета. Высота виджета определяется путем применения заданного соотношения сторон к ширине, выраженного как отношение ширины к высоте.

Например, соотношение сторон по ширине и высоте 16: 9 будет иметь значение 16,0 / 9,0. Если максимальная ширина бесконечна, начальная ширина определяется путем применения соотношения сторон к максимальной высоте.

Теперь рассмотрим второй пример, на этот раз с соотношением сторон 2,0 и ограничениями макета, для которых ширина должна быть от 0,0 до 100,0, а высота - от 0,0 до 100,0. Мы выберем ширину 100.0 (максимально допустимая) и высоту 50.0 (чтобы соответствовать соотношению сторон).

//example
new Center(
 child: new AspectRatio(
  aspectRatio: 100 / 100,
  child: new Container(
    decoration: new BoxDecoration(
      shape: BoxShape.rectangle,
      color: Colors.orange,
      )
    ),
  ),
),

Также вы можете использовать :

24
ответ дан Blasanka 19 June 2019 в 10:18
поделиться

Я пробивал других людей (@datayeah & Vithani Ravi) решения немного трудно здесь, таким образом, я думал, что совместно использую свою собственную попытку [s] при решении этой переменной экранной проблемы масштабирования плотности или замолчу. Таким образом, я приближаюсь к этой проблеме от твердой/фиксированной основы: Я основываю все свое масштабирование от фиксированного (неизменного) отношения 2:1 (height:width). У меня есть класс помощника "McGyver", который делает весь тяжелый подъем (и полезное ухищрение кода) через мое приложение. Этот класс "McGyver" содержит только статические методы и статических постоянных участников класса.

МЕТОД МАСШТАБИРОВАНИЯ ОТНОШЕНИЯ: Я масштабирую обе ширины & высота независимо на основе 2:1 Соотношение сторон. Я беру ширину & входные значения высоты и делят каждого на ширину & константы высоты и наконец вычисляют поправочный коэффициент, которым можно масштабировать соответствующую ширину & входные значения высоты. Фактический код смотрит следующим образом:

import 'dart:math';
import 'package:flutter/material.dart';

class McGyver {

  static const double _fixedWidth = 410;    // Set to an Aspect Ratio of 2:1 (height:width)
  static const double _fixedHeight = 820;   // Set to an Aspect Ratio of 2:1 (height:width) 

  // Useful rounding method (@andyw solution -> https://stackoverflow.com/questions/28419255/how-do-you-round-a-double-in-dart-to-a-given-degree-of-precision-after-the-decim/53500405#53500405)
  static double roundToDecimals(double val, int decimalPlaces){
    double mod = pow(10.0, decimalPlaces);
    return ((val * mod).round().toDouble() / mod);
  }

  // The 'Ratio-Scaled' Widget method (takes any generic widget and returns a "Ratio-Scaled Widget" - "rsWidget")
  static Widget rsWidget(BuildContext ctx, Widget inWidget, double percWidth, double percHeight) {

    // ---------------------------------------------------------------------------------------------- //
    // INFO: Ratio-Scaled "SizedBox" Widget - Scaling based on device's height & width at 2:1 ratio.  //
    // ---------------------------------------------------------------------------------------------- //

    final int _decPlaces = 5;
    final double _fixedWidth = McGyver._fixedWidth;
    final double _fixedHeight = McGyver._fixedHeight;

    Size _scrnSize = MediaQuery.of(ctx).size;                // Extracts Device Screen Parameters.
    double _scrnWidth = _scrnSize.width.floorToDouble();     // Extracts Device Screen maximum width.
    double _scrnHeight = _scrnSize.height.floorToDouble();   // Extracts Device Screen maximum height.

    double _rsWidth = 0;
    if (_scrnWidth == _fixedWidth) {   // If input width matches fixedWidth then do normal scaling.
      _rsWidth = McGyver.roundToDecimals((_scrnWidth * (percWidth / 100)), _decPlaces);
    } else {   // If input width !match fixedWidth then do adjustment factor scaling.
      double _scaleRatioWidth = McGyver.roundToDecimals((_scrnWidth / _fixedWidth), _decPlaces);
      double _scalerWidth = ((percWidth + log(percWidth + 1)) * pow(1, _scaleRatioWidth)) / 100;
      _rsWidth = McGyver.roundToDecimals((_scrnWidth * _scalerWidth), _decPlaces);
    }

    double _rsHeight = 0;
    if (_scrnHeight == _fixedHeight) {   // If input height matches fixedHeight then do normal scaling.
      _rsHeight = McGyver.roundToDecimals((_scrnHeight * (percHeight / 100)), _decPlaces);
    } else {   // If input height !match fixedHeight then do adjustment factor scaling.
      double _scaleRatioHeight = McGyver.roundToDecimals((_scrnHeight / _fixedHeight), _decPlaces);
      double _scalerHeight = ((percHeight + log(percHeight + 1)) * pow(1, _scaleRatioHeight)) / 100;
      _rsHeight = McGyver.roundToDecimals((_scrnHeight * _scalerHeight), _decPlaces);
    }

    // Finally, hand over Ratio-Scaled "SizedBox" widget to method call.
    return SizedBox(
      width: _rsWidth,
      height: _rsHeight,
      child: inWidget,
    );
  }

}

.........

Затем Вы индивидуально масштабировали бы свои виджеты (который для моей перфекционистской болезни является ВСЕМ моим UI) с простым статическим вызовом к "rsWidget ()" метод следующим образом:

  // Step 1: Define your widget however you like (this widget will be supplied as the "inWidget" arg to the "rsWidget" method in Step 2)...
  Widget _btnLogin = RaisedButton(color: Colors.blue, elevation: 9.0, 
                                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(McGyver.rsDouble(context, ScaleType.width, 2.5))),
                                  child: McGyver.rsText(context, "LOGIN", percFontSize: EzdFonts.button2_5, textColor: Colors.white, fWeight: FontWeight.bold),
                                  onPressed: () { _onTapBtnLogin(_tecUsrId.text, _tecUsrPass.text); }, );

  // Step 2: Scale your widget by calling the static "rsWidget" method...
  McGyver.rsWidget(context, _btnLogin, 34.5, 10.0)   // ...and Bob's your uncle!!

прохладная вещь состоит в том, что "rsWidget ()" метод возвращает виджет!! Таким образом, можно или присвоить масштабированный виджет другой переменной как _rsBtnLogin для использования повсеместно - или Вы могли просто использовать полное McGyver.rsWidget() вызов метода, оперативный в Вашем build() метод (точно, как Вам нужен он, чтобы быть расположенными в дерево виджета), и это будет работать отлично, как это должно.

Для тех более проницательных кодеров: Вы заметите, что я использовал два дополнительных масштабируемых отношением метода McGyver.rsText() и McGyver.rsDouble() (не определенный в коде выше) в моем RaisedButton() - таким образом, я в основном схожу с ума с этим материалом масштабирования..., потому что я требую свои приложения, чтобы быть абсолютно пикселем, прекрасным в любом масштабе или экранной плотности!! Я масштаб отношения мой ints, удваивается, дополнение, текст (все, что требует непротиворечивости UI через устройства). Я масштабирую свои тексты на основе ширины только, но указываю, какую ось использовать для всего другого масштабирования (как был сделан с ScaleType.width перечисление, используемое для эти McGyver.rsDouble() вызов в примере кода выше).

я знаю, что это является сумасшедшим - и является большой работой, чтобы сделать на основном потоке - но я надеюсь, что кто-то будет видеть мою попытку здесь и помогать мне найти лучшее (более легкое) решение своей экранной плотности 1:1 масштабирующиеся кошмары.

1
ответ дан 28 November 2019 в 01:40
поделиться

Эта проблема может быть решена с помощью MediaQuery.of (контекст)

Для получения Экрана width: MediaQuery.of(context).size.width

Для получения Экранной высоты: MediaQuery.of(context).size.height

Для получения дополнительной информации о часах Виджета MediaQuery, https://www.youtube.com/watch? v=A3WrA4zAaPw

0
ответ дан 28 November 2019 в 01:40
поделиться

Этот класс поможет и затем инициализирует класс с init методом.

import 'package:flutter/widgets.dart';

class SizeConfig {
  static MediaQueryData _mediaQueryData;
  static double screenWidth;
  static double screenHeight;
  static double blockSizeHorizontal;
  static double blockSizeVertical;
  static double _safeAreaHorizontal;
  static double _safeAreaVertical;
  static double safeBlockHorizontal;
  static double safeBlockVertical;

  void init(BuildContext context){
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    blockSizeHorizontal = screenWidth/100;
    blockSizeVertical = screenHeight/100;
    _safeAreaHorizontal = _mediaQueryData.padding.left +
        _mediaQueryData.padding.right;
    _safeAreaVertical = _mediaQueryData.padding.top +
        _mediaQueryData.padding.bottom;
    safeBlockHorizontal = (screenWidth - _safeAreaHorizontal)/100;
    safeBlockVertical = (screenHeight - _safeAreaVertical)/100;
  }
}

затем в Вашем размере виджетов делают это

Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Container(
    height: SizeConfig.safeBlockVertical * 10, //10 for example
    width: SizeConfig.safeBlockHorizontal * 10, //10 for example
    );}

Все кредиты этому автору сообщения: https://medium.com/flutter-community/flutter-effectively-scale-ui-according-to-different-screen-sizes-2cb7c115ea0a

4
ответ дан 28 November 2019 в 01:40
поделиться
Другие вопросы по тегам:

Похожие вопросы: