李卓原

0.4.0优化字体适配方法

... ... @@ -100,10 +100,13 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
print(
'Status bar height:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px
print(
'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); //The width is enlarged relative to the design draft
'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}');
print(
'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}'); //The height is enlarged relative to the design draft
'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}');
print(
'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}');
print(
'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}');
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
... ... @@ -142,6 +145,14 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px'),
Text('Status bar height:${ScreenUtil.statusBarHeight}px'),
Text(
'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center,
),
Text(
'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
Text(
'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
... ... @@ -150,7 +161,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
textAlign: TextAlign.center,
),
SizedBox(
height: ScreenUtil().setHeight(200),
height: ScreenUtil().setHeight(100),
),
Text('System font scaling factor:${ScreenUtil.textScaleFactory}'),
Column(
... ...
... ... @@ -99,10 +99,14 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
'底部安全区距离:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance,suitable for buttons with full screen
print(
'状态栏高度:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px
print('实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}');
print('实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}');
print(
'实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); //The width is enlarged relative to the design draft
'宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}');
print(
'实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}'); //The height is enlarged relative to the design draft
'高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}');
print('系统的字体缩放比例:${ScreenUtil.textScaleFactory}');
return new Scaffold(
... ... @@ -122,8 +126,9 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
child: Text(
'我的宽度:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(28, false)),
color: Colors.white,
fontSize: ScreenUtil().setSp(12, false),
),
),
),
Container(
... ... @@ -132,8 +137,9 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
color: Colors.blue,
child: Text('我的宽度:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(28, false))),
color: Colors.white,
fontSize: ScreenUtil().setSp(12, false),
)),
),
],
),
... ... @@ -143,25 +149,33 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
Text('底部安全区距离:${ScreenUtil.bottomBarHeight}px'),
Text('状态栏高度:${ScreenUtil.statusBarHeight}px'),
Text(
'实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}',
'实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
Text(
'实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
Text(
'宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
Text(
'实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}',
'高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
SizedBox(
height: ScreenUtil().setHeight(200),
height: ScreenUtil().setHeight(100),
),
Text('系统的字体缩放比例:${ScreenUtil.textScaleFactory}'),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('我的文字大小是14px,不会随着系统的文字大小变化',
Text('我的文字大小在设计稿上是14px,不会随着系统的文字大小变化',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(14, false))),
Text('我的文字大小是14px,会随着系统的文字大小变化',
Text('我的文字大小在设计稿上是14px,会随着系统的文字大小变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil().setSp(14))),
],
... ...

117 KB | W: | H:

163 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

145 KB | W: | H:

157 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -41,9 +41,13 @@ class _MyHomePageState extends State<MyHomePage> {
print(
'Status bar height:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px
print(
'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); //The width is enlarged relative to the design draft
'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}');
print(
'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}'); //The height is enlarged relative to the design draft
'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}');
print(
'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}');
print(
'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}');
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
... ... @@ -82,6 +86,14 @@ class _MyHomePageState extends State<MyHomePage> {
Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px'),
Text('Status bar height:${ScreenUtil.statusBarHeight}px'),
Text(
'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center,
),
Text(
'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
Text(
'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
... ... @@ -90,7 +102,7 @@ class _MyHomePageState extends State<MyHomePage> {
textAlign: TextAlign.center,
),
SizedBox(
height: ScreenUtil().setHeight(200),
height: ScreenUtil().setHeight(100),
),
Text('System font scaling factor:${ScreenUtil.textScaleFactory}'),
Column(
... ...
... ... @@ -39,10 +39,14 @@ class _MyHomePageState extends State<MyHomePage> {
'底部安全区距离:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance,suitable for buttons with full screen
print(
'状态栏高度:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px
print('实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}');
print('实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}');
print(
'实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); //The width is enlarged relative to the design draft
'宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}');
print(
'实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}'); //The height is enlarged relative to the design draft
'高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}');
print('系统的字体缩放比例:${ScreenUtil.textScaleFactory}');
return new Scaffold(
... ... @@ -62,8 +66,9 @@ class _MyHomePageState extends State<MyHomePage> {
child: Text(
'我的宽度:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(28, false)),
color: Colors.white,
fontSize: ScreenUtil().setSp(12, false),
),
),
),
Container(
... ... @@ -72,8 +77,9 @@ class _MyHomePageState extends State<MyHomePage> {
color: Colors.blue,
child: Text('我的宽度:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(28, false))),
color: Colors.white,
fontSize: ScreenUtil().setSp(12, false),
)),
),
],
),
... ... @@ -83,25 +89,33 @@ class _MyHomePageState extends State<MyHomePage> {
Text('底部安全区距离:${ScreenUtil.bottomBarHeight}px'),
Text('状态栏高度:${ScreenUtil.statusBarHeight}px'),
Text(
'实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}',
'实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
Text(
'实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}',
textAlign: TextAlign.center,
),
Text(
'宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
Text(
'实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}',
'高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
SizedBox(
height: ScreenUtil().setHeight(200),
height: ScreenUtil().setHeight(100),
),
Text('系统的字体缩放比例:${ScreenUtil.textScaleFactory}'),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('我的文字大小是14px,不会随着系统的文字大小变化',
Text('我的文字大小在设计稿上是14px,不会随着系统的文字大小变化',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(14, false))),
Text('我的文字大小是14px,会随着系统的文字大小变化',
Text('我的文字大小在设计稿上是14px,会随着系统的文字大小变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil().setSp(14))),
],
... ...
... ... @@ -5,70 +5,70 @@ packages:
dependency: transitive
description:
name: analyzer
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.32.4"
args:
dependency: transitive
description:
name: args
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.5.0"
async:
dependency: transitive
description:
name: async
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.8"
boolean_selector:
dependency: transitive
description:
name: boolean_selector
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.4"
charcode:
dependency: transitive
description:
name: charcode
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.2"
collection:
dependency: transitive
description:
name: collection
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.14.11"
convert:
dependency: transitive
description:
name: convert
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.2"
crypto:
dependency: transitive
description:
name: crypto
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.6"
csslib:
dependency: transitive
description:
name: csslib
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.14.5"
cupertino_icons:
dependency: "direct main"
description:
name: cupertino_icons
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.1.2"
flutter:
... ... @@ -82,7 +82,7 @@ packages:
path: ".."
relative: true
source: path
version: "0.3.0"
version: "0.4.0"
flutter_test:
dependency: "direct dev"
description: flutter
... ... @@ -92,189 +92,189 @@ packages:
dependency: transitive
description:
name: front_end
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.1.4"
glob:
dependency: transitive
description:
name: glob
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.7"
html:
dependency: transitive
description:
name: html
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.13.3+3"
http:
dependency: transitive
description:
name: http
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.11.3+17"
http_multi_server:
dependency: transitive
description:
name: http_multi_server
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.5"
http_parser:
dependency: transitive
description:
name: http_parser
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "3.1.3"
io:
dependency: transitive
description:
name: io
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.3.3"
js:
dependency: transitive
description:
name: js
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.6.1+1"
json_rpc_2:
dependency: transitive
description:
name: json_rpc_2
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.9"
kernel:
dependency: transitive
description:
name: kernel
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.3.4"
logging:
dependency: transitive
description:
name: logging
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.11.3+2"
matcher:
dependency: transitive
description:
name: matcher
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.12.3+1"
meta:
dependency: transitive
description:
name: meta
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.6"
mime:
dependency: transitive
description:
name: mime
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.9.6+2"
multi_server_socket:
dependency: transitive
description:
name: multi_server_socket
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.2"
node_preamble:
dependency: transitive
description:
name: node_preamble
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.4.4"
package_config:
dependency: transitive
description:
name: package_config
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.5"
package_resolver:
dependency: transitive
description:
name: package_resolver
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.4"
path:
dependency: transitive
description:
name: path
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.6.2"
plugin:
dependency: transitive
description:
name: plugin
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.2.0+3"
pool:
dependency: transitive
description:
name: pool
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.3.6"
pub_semver:
dependency: transitive
description:
name: pub_semver
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.4.2"
quiver:
dependency: transitive
description:
name: quiver
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.0+1"
shelf:
dependency: transitive
description:
name: shelf
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.7.3+3"
shelf_packages_handler:
dependency: transitive
description:
name: shelf_packages_handler
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.4"
shelf_static:
dependency: transitive
description:
name: shelf_static
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.2.8"
shelf_web_socket:
dependency: transitive
description:
name: shelf_web_socket
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.2.2+4"
sky_engine:
... ... @@ -286,105 +286,105 @@ packages:
dependency: transitive
description:
name: source_map_stack_trace
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.5"
source_maps:
dependency: transitive
description:
name: source_maps
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.10.7"
source_span:
dependency: transitive
description:
name: source_span
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.4.1"
stack_trace:
dependency: transitive
description:
name: stack_trace
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.9.3"
stream_channel:
dependency: transitive
description:
name: stream_channel
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.6.8"
string_scanner:
dependency: transitive
description:
name: string_scanner
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.4"
term_glyph:
dependency: transitive
description:
name: term_glyph
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.1"
test:
dependency: transitive
description:
name: test
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.3.0"
typed_data:
dependency: transitive
description:
name: typed_data
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.6"
utf:
dependency: transitive
description:
name: utf
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.9.0+5"
vector_math:
dependency: transitive
description:
name: vector_math
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.8"
vm_service_client:
dependency: transitive
description:
name: vm_service_client
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.2.6"
watcher:
dependency: transitive
description:
name: watcher
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.9.7+10"
web_socket_channel:
dependency: transitive
description:
name: web_socket_channel
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.9"
yaml:
dependency: transitive
description:
name: yaml
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.15"
sdks:
... ...