Различный размер экрана и масштабирование точек на дюйм в Flutter

Question

  @override
  Widget build(BuildContext context) {

    final double shortesSide = MediaQuery.of(context).size.shortestSide;
    final bool useMobileLayout = shortesSide <= 600.0; //use this for mobile
    final Orientation orientation = MediaQuery.of(context).orientation;

    return Scaffold(
      resizeToAvoidBottomPadding: false,
      backgroundColor: Color.fromRGBO(246, 246, 246, 1.0),
      appBar: AppBar(
          backgroundColor: Color.fromRGBO(121, 85, 72, 1.0),
          centerTitle: true,
          title: Text(...),
          leading: IconButton(
            onPressed: () {
              Navigator.pushReplacementNamed(context, 'Menu');
            },
            icon: Icon(
              Icons.arrow_back,
              color: Colors.white,
            ),
          )),
      body: useMobileLayout
          ? _buildPhoneView(orientation: orientation)
          : _buildTabletView(orientation: orientation),
    );
  }



//phone
  Container _buildPhoneView({@required Orientation orientation}) {...}

//tablet
  Container _buildTabletView({@required Orientation orientation}) {...}

Есть ли переломный момент для небольших телефонов, таких как планшеты <600?Нужно ли создавать третий макет или я могу просто исправить текст и виджет в зависимости от размера экрана.Спасибо </p>

Answer 1

вы можете использовать этот плагин flutter_screenutil .Это плагин флаттера для адаптации размера экрана и шрифта. Пусть ваш пользовательский интерфейс отображает разумную компоновку на разных размерах экрана!

Инициализируйте и установите размер подгонки и размер шрифта для масштабирования в соответствии с параметром доступности «Размер шрифта» системы # Пожалуйста, перед использованием используйте ширину и высоту проектного чертежа, ширину и высоту проектного чертежа (единица px).Обязательно установите страницу в домашней папке MaterialApp (то есть в файле ввода, просто установите его один раз), чтобы убедиться, что размер подгонки устанавливается перед каждым использованием:

//fill in the screen size of the device in the design

//default value : width : 1080px , height:1920px , 
allowFontScaling:false
ScreenUtil.instance = ScreenUtil.getInstance()..init(context);

//If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 
1334)..init(context);

//If you wang to set the font size is scaled according to the system's 
"font size" assist option
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, 
allowFontScaling: true)..init(context);

Использование ： # Адаптировать размер экрана ： #Передайте размер пикселя черновика проекта в пикселях:

Адаптировано к ширине экрана: ScreenUtil.getInstance (). SetWidth (540),

Адаптировано к высоте экрана: ScreenUtil.getInstance (). SetHeight (200),

Вы также можете использовать ScreenUtil () вместо ScreenUtil.getInstance (), например: ScreenUtil (). SetHeight (200)

Примечание

Высотатакже адаптировано в соответствии с setWidth, чтобы гарантировать отсутствие деформации (если вам нужен квадрат)

Метод setHeight в основном адаптирован по высоте, вы хотите контролировать высоту и актуальность экрана в интерфейсе пользователя, когда отображается то же самое.

//for example:
//rectangle
Container(
       width: ScreenUtil.getInstance().setWidth(375),
       height: ScreenUtil.getInstance().setHeight(200),
       ...
        ),

////If you want to display a square:
Container(
       width: ScreenUtil.getInstance().setWidth(300),
       height: ScreenUtil.getInstance().setWidth(300),
        ),

Шрифт адаптера:

//Incoming font size，the unit is pixel, fonts will not scale to 
respect Text Size accessibility settings
//(AllowallowFontScaling when initializing ScreenUtil)
ScreenUtil.getInstance().setSp(28)    

//Incoming font size，the unit is pixel，fonts will scale to respect Text 
Size accessibility settings
//(If somewhere does not follow the global allowFontScaling setting)
ScreenUtil(allowFontScaling: true).setSp(28)  

//for example:

Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
                'My font size is 24px on the design draft and will not change with the system.',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: ScreenUtil.getInstance().setSp(24),
                )),
            Text(
                'My font size is 24px on the design draft and will change with the system.',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: ScreenUtil(allowFontScaling: true).setSp(24),
                )),
          ],
        )

Другие связанные интерфейсы:

ScreenUtil.pixelRatio       //Device pixel density
ScreenUtil.screenWidth      //Device width
ScreenUtil.screenHeight     //Device height
ScreenUtil.bottomBarHeight  //Bottom safe zone distance, suitable for buttons with full screen
ScreenUtil.statusBarHeight  //Status bar height , Notch will be higher Unit px
ScreenUtil.textScaleFactory //System font scaling factor

ScreenUtil.getInstance().scaleWidth //Ratio of actual width dp to design draft px
ScreenUtil.getInstance().scaleHeight //Ratio of actual height dp to design draft px

Answer 2

Это зависит от сложности компоновки, которую вы строите.Например, при сложных макетах, когда размер экрана становится меньше, виджеты могут покрывать другие виджеты или может возникнуть переполнение пикселей, когда в них нет места.Несмотря на то, что Flutter хорошо масштабируется на разных экранах, иногда этого недостаточно.

Я использую виджет LayoutBuilder и, основываясь на его ограничениях, я возвращаю макет для экрана.это соответствует его текущим ограничениям.

* Обратите внимание, что виджет LayoutBuilder берет свои ограничения от своего родителя, поэтому убедитесь, что вы поместили его в качестве верхнего виджета.

 Widget build(BuildContext context) {
  return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: LayoutBuilder(
    builder: (context, constraints) {
      if (constraints.maxWidth < 600) {
        return SmallPage();
      } else {
        return BigPage();
      }
    },
  ),
);

}