Flutter如何处理dpi文本和图像大小的差异 [英] How can Flutter handle dpi text and image size differences

问题描述

我们目前正在评估Flutter是否是构建新应用程序的良好平台.因此，我们想确保我们的应用程序在具有不同DPI的设备上看起来不错.鉴于我们同时支持iOS和Android，并且iOS和Android支持不同图像大小的文件夹结构各不相同，Flutter上是否提供解决方案来实现这一目标?

We are currently in the process of evaluating whether Flutter is a good platform to build a new app on. So we wanted to make sure that our app looks good on devices with different DPIs. Given that we are supporting both iOS and Android, and the folder structure of iOS and Android to support the different image sizes vary, is there a solution available on Flutter to achieve this?

同样的问题也适用于文本大小，我们希望根据dpi更改文本大小.

The same question applies to text sizes where we hope to change our text sizes depending on dpi.

推荐答案

Flutter通过自动选择DPI相关资源来支持资产加载，请参见 https://flutter.io/assets-and-images/#declaring-resolution-aware-image-assets .

Flutter supports loading of assets by automatically choosing DPI dependent resources, see https://flutter.io/assets-and-images/#declaring-resolution-aware-image-assets for how the mechanism works.

Flutter应该根据devicePixelRatio值缩放文本.这是一个示例应用程序，向您显示其工作原理:

Flutter should scale text according to devicePixelRatio value. Here is an example app showing you how that works:

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  MediaQueryData queryData;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    queryData = MediaQuery.of(context);
    double devicePixelRatio = queryData.devicePixelRatio;
    TextStyle style38 = new TextStyle(
      inherit: true,
      fontSize: 38.0,
    );
    TextStyle style20 = new TextStyle(
      inherit: true,
      fontSize: 20.0,
    );
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          new Text(
            'Button tapped $_counter time${ _counter == 1 ? '' : 's' }.',
            style: style38,
          ),
          new Text(
            'size (pixels): w=${queryData.size.width * devicePixelRatio}, h=${queryData.size.height * devicePixelRatio}',
            style: style20,
          ),
          new Text(
            'devicePixelRatio: $devicePixelRatio',
            style: style20,
          ),
          new Text(
            'size: w=${queryData.size.width}, h=${queryData.size.height}',
            style: style20,
          ),
          new Text(
            'textScaleFactor: w=${queryData.textScaleFactor}',
            style: style20,
          ),
        ],
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ),
    );
  }
}

这是默认Flutter应用程序的修改版本，显示了设备视口的大小(以像素为单位)，devicePixelRatio值以及以绝对像素为单位的大小.查看以3种不同分辨率在Android上运行的应用的屏幕截图，然后查看具有iPhone 7 Plus屏幕分辨率的iOS模拟器.屏幕分辨率为:

It's a modified version of the default Flutter app showing the device viewport size in pixels, the devicePixelRatio value, the size in absolute pixels. See the screenshot of the app running on Android in 3 different resolutions, and then iOS emulator with iPhone 7 Plus screen resolution. The screen resolutions are:

1. Android 1440 x 2560，devicePixelRatio:3.5
2. Android 1080 x 1920，devicePixelRatio:2.625
3. Android 720 x 1280，devicePixelRatio:1.75
4. iOS模拟器1080 x 1920(iPhone 7 Plus)，devicePixelRatio:3.0

所有设备上的文本均根据实际的屏幕尺寸和逻辑视口缩放.

The text on all devices is scaled according to the actual screen size and logical viewport.

这篇关于Flutter如何处理dpi文本和图像大小的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！