Flutter尺寸测量插件sizing的使用
Flutter尺寸测量插件sizing的使用
简介
sizing 是一个简单的Flutter包，用于处理不同屏幕尺寸上的缩放/响应式用户界面（UI）。该插件的部分设计理念借鉴了RN Size Matters、flutter_screenutil等其他类似的库。
开始使用
添加依赖
在 pubspec.yaml 文件中添加 sizing 依赖：
dependencies:
sizing: ^1.1.1
导入包
在 Dart 文件中导入 sizing 包：
import 'package:sizing/sizing.dart';
使用 SizingBuilder 包裹主构建器
为了使 sizing 生效，需要将应用的主构建器包裹在 SizingBuilder 中。这样可以确保所有的尺寸和字体缩放都能正确应用。
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return SizingBuilder(
builder: () => MaterialApp(
// 其他配置...
),
);
}
}
传递值
在 sizing 中，可以通过设置基础宽度和高度来处理界面缩放。默认的基础尺寸是宽度 360 和高度 640。你可以通过 SizingBuilder 来修改这些值。
SizingBuilder(
baseSize: Size(360, 640), // 可选：修改基础尺寸
systemFontScale: true, // 可选：启用系统字体缩放
builder: () => MaterialApp(
// 其他配置...
),
);
尺寸和缩放
- 全屏宽度：
1.sw表示 100% 的屏幕宽度。 - 半屏高度：
0.5.sh表示 50% 的屏幕高度。 - 基于基础宽度的缩放：
360.s表示 100% 的基础宽度，值会从这一点进行缩放。 - 基于基础高度的垂直缩放：
320.vs表示 50% 的基础高度，值会从这一点进行缩放。 - 智能缩放：
100.ss会根据屏幕尺寸智能调整。 - 字体缩放：
16.fs会根据屏幕尺寸缩放字体大小。 - 智能字体缩放：
16.fss会根据屏幕尺寸智能调整字体大小。
系统字体缩放
如果你想让字体根据系统的无障碍选项（如 Android 或 iOS 的字体缩放）进行调整，可以在 SizingBuilder 中设置 systemFontScale 为 true。默认情况下，systemFontScale 是 false。
fontSize: 16.fs.self(true), // 仅对特定文本应用系统字体缩放
缩放因子
对于智能缩放（ss 和 fss），可以使用缩放因子来进一步调整缩放效果。默认的缩放因子是 0.5。
height: 100.ss.f(0.8), // 应用缩放因子 0.8
fontSize: 16.fss.f(0.1), // 应用缩放因子 0.1
示例 Demo
以下是一个完整的示例代码，展示了如何使用 sizing 插件来创建一个响应式的 Flutter 应用。
import 'package:flutter/material.dart';
import 'package:sizing/sizing.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return SizingBuilder(
systemFontScale: true, // 启用系统字体缩放
builder: () => MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Sizing Demo',
theme: ThemeData(
primaryColor: Colors.cyan,
primaryTextTheme: TextTheme(
titleLarge: TextStyle(
color: Colors.white,
fontSize: 16.fss, // 智能字体缩放
),
),
appBarTheme: AppBarTheme(
centerTitle: true,
),
textTheme: TextTheme(
displayLarge: TextStyle(
fontSize: 16.fss, // 智能字体缩放
fontWeight: FontWeight.normal,
color: Colors.cyan,
),
displayMedium: TextStyle(
fontSize: 14.fss, // 智能字体缩放
height: 1.5,
),
bodyMedium: TextStyle(
fontSize: 14.fss, // 智能字体缩放
height: 1.5,
),
),
),
home: MyHomePage(title: 'Sizing Demo'),
),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
toolbarHeight: 40.fss, // 智能字体缩放
),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10.ss), // 智能缩放
child: Column(
children: [
Padding(
padding: EdgeInsets.only(bottom: 10.ss), // 智能缩放
child: Text(
'Base Size 360x640',
style: Theme.of(context).textTheme.displayMedium!.copyWith(
fontSize: 12.fss, // 智能字体缩放
),
textAlign: TextAlign.center,
),
),
Text(
'On this device'.toUpperCase(),
style: Theme.of(context).textTheme.displayLarge,
textAlign: TextAlign.center,
),
Text(
'Width: ${MediaQuery.of(context).size.width.toStringAsFixed(2)}dp | Height: ${MediaQuery.of(context).size.height.toStringAsFixed(2)}dp',
textAlign: TextAlign.center,
),
Text(
'Font Scaling Factor: ${MediaQuery.of(context).textScaleFactor}',
textAlign: TextAlign.center,
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: EdgeInsets.all(10.s), // 基础宽度缩放
width: 0.5.sw, // 50% 屏幕宽度
height: 0.25.sh, // 25% 屏幕高度
color: Colors.indigoAccent,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'THIS CONTAINER',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 12.fss, // 智能字体缩放
),
),
Text(
'width: 0.5.sw (${0.5.sw.toStringAsFixed(2)}dp)\n'
'height: 0.25.sh (${0.25.sh.toStringAsFixed(2)}dp)',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 12.fss, // 智能字体缩放
),
),
],
),
),
Container(
padding: EdgeInsets.all(10.s), // 基础宽度缩放
width: 180.s, // 180 像素的基础宽度缩放
height: 160.vs, // 160 像素的基础高度缩放
color: Colors.deepPurpleAccent,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'THIS CONTAINER',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 12.fss, // 智能字体缩放
),
),
Text(
'width: 180.s (360/2)\n'
'height: 160.vs (640/4)',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 12.fss, // 智能字体缩放
),
),
],
),
),
],
),
SizedBox(
height: 10.fss, // 智能字体缩放
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(10),
width: 100,
height: 100,
color: Colors.cyan[600],
child: FittedBox(
fit: BoxFit.fitWidth,
child: Text(
'width: 100\nheight: 100',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
),
),
),
),
Container(
padding: EdgeInsets.all(10),
width: 100.s, // 基础宽度缩放
height: 100.s, // 基础高度缩放
color: Colors.cyan[600],
child: FittedBox(
fit: BoxFit.fitWidth,
child: Text(
'Scale\nwidth: 100.s\nheight: 100.s',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 9,
),
),
),
),
Container(
padding: EdgeInsets.all(10),
width: 100.ss, // 智能缩放
height: 100.ss, // 智能缩放
color: Colors.cyan[600],
child: FittedBox(
fit: BoxFit.fitWidth,
child: Text(
'Smart Scale\nwidth: 100.ss\nheight: 100.ss',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
),
),
),
),
],
),
SizedBox(
height: 10.ss, // 智能缩放
),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
'fontSize: 16 | Without Sizing',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16,
height: 1.5,
),
),
Text(
'fontSize: 16.fs | Font Scale ${16.fs.toStringAsFixed(2)}',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.fs, // 字体缩放
height: 1.5,
),
),
Text(
'fontSize: 16.fss | Font Smart Scale ${16.fss.toStringAsFixed(2)}',
style: TextStyle(
fontSize: 16.fss, // 智能字体缩放
height: 1.5,
),
),
SizedBox(
height: 10.ss, // 智能缩放
),
Divider(),
SizedBox(
height: 10.ss, // 智能缩放
),
],
)
],
),
),
);
}
}
更多关于Flutter尺寸测量插件sizing的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter尺寸测量插件sizing的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，关于Flutter中的sizing插件的使用，这里是一个简单的示例，展示了如何使用该插件进行尺寸测量。sizing插件通常用于在Flutter应用中动态测量和适应UI元素的尺寸。尽管Flutter本身提供了许多布局和测量工具，但sizing插件可以为你提供一些额外的便捷功能。
首先，确保你已经在pubspec.yaml文件中添加了sizing依赖：
dependencies:
flutter:
sdk: flutter
sizing: ^x.y.z # 请替换为最新版本号
然后运行flutter pub get来安装依赖。
接下来是一个使用sizing插件的示例代码：
import 'package:flutter/material.dart';
import 'package:sizing/sizing.dart'; // 导入sizing插件
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sizing Plugin Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Sizing Plugin Example'),
),
body: Center(
child: SizedBox(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 使用SizedWidget包裹一个Container来测量其尺寸
SizedWidget(
child: Container(
color: Colors.amber,
child: Text('This is a sized widget'),
),
onSizeChanged: (Size size) {
print('Container size: ${size.width}x${size.height}');
},
),
SizedBox(height: 20),
// 使用MeasuredBox直接获取尺寸
MeasuredBox(
child: Container(
color: Colors.lightBlueAccent,
child: Text('This is a measured box'),
),
onSizeChanged: (Size size) {
print('MeasuredBox size: ${size.width}x${size.height}');
},
),
],
),
),
),
),
);
}
}
在这个示例中，我们使用了sizing插件提供的SizedWidget和MeasuredBox来测量容器（Container）的尺寸。
SizedWidget：它接受一个child和一个onSizeChanged回调函数。当child的尺寸发生变化时，onSizeChanged回调会被触发，并传递新的尺寸。MeasuredBox：与SizedWidget类似，它也提供了onSizeChanged回调，用于在尺寸变化时获取新的尺寸。
这两个组件都允许你在UI元素尺寸变化时执行特定的逻辑，比如调整布局、触发动画等。
请注意，sizing插件的具体API和用法可能会随着版本更新而变化，因此建议查阅最新的官方文档或插件仓库以获取最新信息。
