Flutter 移動端屏幕適配方案和製做

時間 2019-11-18

標籤 flutter 移動屏幕適配方案製做欄目無線简体版

原文原文鏈接

flutter_screenutil插件

flutter 屏幕適配方案，讓你的UI在不一樣尺寸的屏幕上都能顯示合理的佈局!git

注意：此插件仍處於開發階段，某些API可能還沒有推出。github

安裝依賴：

安裝以前請查看最新版本api

# 添加依賴
  flutter_screenutil: ^0.5.3

在每一個使用的地方導入包：

import 'package:flutter_screenutil/flutter_screenutil.dart';

屬性

屬性	類型	默認值	描述
width	double	1080px	設計稿中設備的寬度,單位px
height	double	1920px	設計稿中設備的高度,單位px
allowFontScaling	bool	false	設置字體大小是否根據系統的「字體大小」輔助選項來進行縮放

初始化並設置適配尺寸及字體大小是否根據系統的「字體大小」輔助選項來進行縮放

在使用以前請設置好設計稿的寬度和高度，傳入設計稿的寬度和高度(單位px) 必定在MaterialApp的home中的頁面設置(即入口文件，只需設置一次),以保證在每次使用以前設置好了適配尺寸:安全

//填入設計稿中設備的屏幕尺寸

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

//假如設計稿是按iPhone6的尺寸設計的(iPhone6 750*1334) 
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

//設置字體大小根據系統的「字體大小」輔助選項來進行縮放,默認爲false
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);

使用：

適配尺寸：

傳入設計稿的px尺寸：app

根據屏幕寬度適配 width: ScreenUtil.getInstance().setWidth(540),less

根據屏幕高度適配 height: ScreenUtil.getInstance().setHeight(200),ide

也能夠使用 ScreenUtil() 替代 ScreenUtil.getInstance(), 例如：ScreenUtil().setHeight(200)佈局

注意學習

高度也根據setWidth來作適配能夠保證不變形(當你想要一個正方形的時候)字體

setHeight方法主要是在高度上進行適配, 在你想控制UI上一屏的高度與實際中顯示同樣時使用.

 //初始化設計尺寸
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

print('設備的像素密度：${ScreenUtil.pixelRatio}');
print('設備的高：${ScreenUtil.screenHeight}');
print('設備的寬：${ScreenUtil.screenWidth}');

適配字體:

傳入設計稿的px尺寸：

//傳入字體大小，默認不根據系統的「字體大小」輔助選項來進行縮放(可在初始化ScreenUtil時設置allowFontScaling)
ScreenUtil.getInstance().setSp(28)         
 
//傳入字體大小，根據系統的「字體大小」輔助選項來進行縮放(若是某個地方不遵循全局的allowFontScaling設置)     
ScreenUtil(allowFontScaling: true).setSp(28)        
     
//for example:

Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text('個人文字大小在設計稿上是25px，不會隨着系統的文字縮放比例變化',
                    style: TextStyle(
                        color: Colors.black, fontSize: ScreenUtil.getInstance().setSp(24))),
                Text('個人文字大小在設計稿上是25px，會隨着系統的文字縮放比例變化',
                    style: TextStyle(
                        color: Colors.black, fontSize: ScreenUtil(allowFontScaling: true).setSp(24))),
              ],
  )

其餘相關api：

ScreenUtil.pixelRatio       //設備的像素密度
ScreenUtil.screenWidth      //設備寬度
ScreenUtil.screenHeight     //設備高度
ScreenUtil.bottomBarHeight  //底部安全區距離，適用於全面屏下面有按鍵的
ScreenUtil.statusBarHeight  //狀態欄高度 劉海屏會更高  單位px
ScreenUtil.textScaleFactory //系統字體縮放比例
   
ScreenUtil.getInstance().scaleWidth  // 實際寬度的dp與設計稿px的比例
ScreenUtil.getInstance().scaleHeight // 實際高度的dp與設計稿px的比例

完整demo示例代碼：

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter_ScreenUtil',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'FlutterScreenUtil Demo'),
    );
  }
}

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> {
  @override
  Widget build(BuildContext context) {
    //設置適配尺寸 (填入設計稿中設備的屏幕尺寸) 假如設計稿是按iPhone6的尺寸設計的(iPhone6 750*1334)
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
    print('設備寬度:${ScreenUtil.screenWidth}'); //Device width
    print('設備高度:${ScreenUtil.screenHeight}'); //Device height
    print('設備的像素密度:${ScreenUtil.pixelRatio}'); //Device pixel density
    print(
        '底部安全區距離:${ScreenUtil.bottomBarHeight}dp'); //Bottom safe zone distance，suitable for buttons with full screen
    print(
        '狀態欄高度:${ScreenUtil.statusBarHeight}dp'); //Status bar height , Notch will be higher Unit px

    print('實際寬度的dp與設計稿px的比例:${ScreenUtil.getInstance().scaleWidth}');
    print('實際高度的dp與設計稿px的比例:${ScreenUtil.getInstance().scaleHeight}');

    print(
        '寬度和字體相對於設計稿放大的比例:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}');
    print(
        '高度相對於設計稿放大的比例:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}');
    print('系統的字體縮放比例:${ScreenUtil.textScaleFactory}');

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print(
              'ScreenUtil.getInstance().width：${ScreenUtil.getInstance().width}');
          print('ScreenUtil().width：${ScreenUtil().width}');
        },
        child: Icon(Icons.accessible_forward),
      ),
      body: new Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  width: ScreenUtil.getInstance().setWidth(375),
                  height: ScreenUtil.getInstance().setHeight(200),
                  color: Colors.red,
                  child: Text(
                    '個人寬度:${ScreenUtil.getInstance().setWidth(375)}dp',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: ScreenUtil.getInstance().setSp(24),
                    ),
                  ),
                ),
                Container(
                  width: ScreenUtil.getInstance().setWidth(375),
                  height: ScreenUtil.getInstance().setHeight(200),
                  color: Colors.blue,
                  child:
                      Text('個人寬度:${ScreenUtil.getInstance().setWidth(375)}dp',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: ScreenUtil.getInstance().setSp(24),
                          )),
                ),
              ],
            ),
            Text('設備寬度:${ScreenUtil.screenWidth}px'),
            Text('設備高度:${ScreenUtil.screenHeight}px'),
            Text('設備寬度:${ScreenUtil.screenWidthDp}dp'),
            Text('設備高度:${ScreenUtil.screenHeightDp}dp'),
            Text('設計稿寬度:${ScreenUtil.getInstance().width}'),
            Text('設備的像素密度:${ScreenUtil.pixelRatio}'),
            Text('底部安全區距離:${ScreenUtil.bottomBarHeight}dp'),
            Text('狀態欄高度:${ScreenUtil.statusBarHeight}dp'),
            Text(
              '實際寬度的dp與設計稿px的比例:${ScreenUtil.getInstance().scaleWidth}',
              textAlign: TextAlign.center,
            ),
            Text(
              '實際高度的dp與設計稿px的比例:${ScreenUtil.getInstance().scaleHeight}',
              textAlign: TextAlign.center,
            ),
            SizedBox(
              height: ScreenUtil.getInstance().setHeight(100),
            ),
            Text('系統的字體縮放比例:${ScreenUtil.textScaleFactory}'),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text('個人文字大小在設計稿上是24px，不會隨着系統的文字縮放比例變化',
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: ScreenUtil.getInstance().setSp(24))),
                Text('個人文字大小在設計稿上是24px，會隨着系統的文字縮放比例變化',
                    style: TextStyle(
                        color: Colors.black,
                        fontSize:
                            ScreenUtil(allowFontScaling: true).setSp(24))),
              ],
            )
          ],
        ),
      ),
    );
  }
}