Flutter如何處理dpi文字和圖像尺寸差異

Question

我們目前正在評估Flutter是否是一個構建新應用程序的良好平臺。所以我們希望確保我們的應用在具有不同DPI的設備上看起來不錯。鑑於我們同時支持iOS和Android，並且iOS和Android的文件夾結構支持不同的圖像大小，因此Flutter上有哪些解決方案可以實現這一目標？

同樣的問題適用於文本大小，我們希望根據dpi更改文本大小。

謝謝！

Answer 1

Flutter支持通過自動選擇DPI相關資源來加載資產，請參閱https://flutter.io/assets-and-images/#declaring-resolution-aware-image-assets瞭解該機制的工作原理。

顫振應根據devicePixelRatio值縮放文本。這裏是你展示它是如何工作的示例應用：

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

這是顯示像素的裝置視區大小默認撲應用的修改版本，該devicePixelRatio值，以絕對像素大小。查看以3種不同分辨率在Android上運行的應用程序的屏幕截圖，然後以iPhone 7 Plus屏幕分辨率查看iOS模擬器。屏幕分辨率是：

1. 的Android 1440 X 2560，devicePixelRatio：3.5
2. 的Android 1080×1920，devicePixelRatio：2.625
3. 的Android 720×1280，devicePixelRatio：1.75
4. iOS的仿真器1080×1920（ iPhone 7 Plus），devicePixelRatio：3.0

所有設備上的文本根據實際屏幕大小和邏輯視口進行縮放。