陕西省住房和建设厅网站,国外比较开放的社交软件,民族服装的网站建设,免费商用图片的网站Flutter 学习之旅 之 flutter 使用 flutter_screenutil 简单进行屏幕适配 目录
Flutter 学习之旅 之 flutter 使用 flutter_screenutil 简单进行屏幕适配
一、简单介绍
二、简单介绍 flutter_screenutil
三、安装 carousel_slider
四、简单案例实现
五、关键代码
六、补…Flutter 学习之旅 之 flutter 使用 flutter_screenutil 简单进行屏幕适配 目录
Flutter 学习之旅 之 flutter 使用 flutter_screenutil 简单进行屏幕适配
一、简单介绍
二、简单介绍 flutter_screenutil
三、安装 carousel_slider
四、简单案例实现
五、关键代码
六、补充说明 一、简单介绍
Flutter 是一款开源的 UI 软件开发工具包由 Google 开发和维护。它允许开发者使用一套代码同时构建跨平台的应用程序包括移动设备iOS 和 Android、Web 和桌面平台Windows、macOS 和 Linux。
Flutter 使用 Dart 编程语言它可以将代码编译为 ARM 或 Intel 机器代码以及 JavaScript从而实现快速的性能。Flutter 提供了一个丰富的预置小部件库开发者可以根据自己的需求灵活地控制每个像素从而创建自定义的、适应性强的设计这些设计在任何屏幕上都能呈现出色的外观和感觉。 二、简单介绍 flutter_screenutil
网址flutter_screenutil | Flutter package
flutter_screenutil 是一个用于 Flutter 应用的屏幕适配插件。它通过设置设计稿的尺寸自动计算屏幕缩放比例从而实现宽度、高度和字体大小的自适应调整。使用 .w、.h 和 .sp 等单位开发者可以轻松实现跨设备的布局适配确保应用在不同屏幕尺寸和分辨率的设备上保持一致的显示效果。 中文文档地址flutter_screenutil/README_CN.md at master · OpenFlutter/flutter_screenutil · GitHub
属性类型默认值描述designSizeSizeSize(360, 690)设计稿中设备的尺寸(单位随意,建议dp,但在使用过程中必须保持一致)deviceSizeSizenull物理设备的大小builderWidget Function()Container()一般返回一个MaterialApp类型的Function()orientationOrientationportrait屏幕方向splitScreenModeboolfalse支持分屏尺寸minTextAdaptboolfalse是否根据宽度/高度中的最小值适配文字contextBuildContextnull传入context会更灵敏的根据屏幕变化而改变childWidgetnullbuilder的一部分其依赖项属性不使用该库rebuildFactorFunctiondefault返回屏幕指标更改时是否重建。 注意builder和child中必须填写至少一项 三、安装 carousel_slider
1、直接运行命令
使用 Flutterflutter pub add flutter_screenutil
flutter_screenutil/README_CN.md at master · OpenFlutter/flutter_screenutil · GitHub 2、或者在 pubspec.yaml 添加
dependencies:flutter_screenutil: ^5.9.3 四、简单案例实现
1、这里使用 Android Studio 进行创建 Flutter 项目 2、创建一个 application 的 Flutter 项目 3、编写代码进行简单屏幕适配功能 4、连接设备运行项目简单效果如下 五、关键代码
// 导入 Flutter 的基础组件库
import package:flutter/material.dart;
// 导入 flutter_screenutil 插件用于屏幕适配
import package:flutter_screenutil/flutter_screenutil.dart;// 主函数程序的入口点
void main() {runApp(MyApp());
}// 定义一个 StatelessWidget作为应用的根组件
class MyApp extends StatelessWidget {overrideWidget build(BuildContext context) {// 使用 ScreenUtilInit 包裹整个应用初始化屏幕适配功能return ScreenUtilInit(// 设计稿的尺寸根据设计稿的宽度和高度设置designSize: Size(375, 812), // 设计稿尺寸例如 iPhone X 的尺寸// 是否开启最小文本适配确保文本在不同设备上保持可读性minTextAdapt: true,// builder 是一个函数用于构建应用的根组件builder: (context, child) { // 注意这里的参数和返回值return MaterialApp(// 应用的标题显示在任务栏或窗口标题中title: Flutter ScreenUtil Demo,// 定义应用的主题设置主色调为蓝色theme: ThemeData(primarySwatch: Colors.blue,),// 设置应用的默认颜色为黑色可选color: Colors.black,// 应用的首页将 MyHomePage 作为 child 传入home: child,);},// 将主页组件 MyHomePage 作为 ScreenUtilInit 的子组件传入child: MyHomePage(), // 将主页作为 child 传入);}
}// 定义主页组件
class MyHomePage extends StatelessWidget {overrideWidget build(BuildContext context) {// 使用 Scaffold 构建页面结构return Scaffold(// 设置 Scaffold 的背景颜色为黑色backgroundColor: Colors.black,// 定义页面的顶部导航栏appBar: AppBar(// 设置 AppBar 的背景颜色为黑色backgroundColor: Colors.black,// 设置导航栏的标题title: Text(Flutter ScreenUtil 示例,// 设置标题的文本颜色为白色style: TextStyle(color: Colors.white),),// 将标题居中显示centerTitle: true,),// 定义页面的主体内容body: Center(// 使用 Center 包裹子组件确保子组件居中显示child: Container(// 设置容器的宽度使用 ScreenUtil 的适配单位width: 300.w,// 设置容器的高度使用 ScreenUtil 的适配单位height: 100.h,// 设置容器的背景颜色为蓝色color: Colors.blue,// 容器的子组件是一个 Text 文本child: Text(适配后的容器,// 设置文本的字体大小使用 ScreenUtil 的适配单位style: TextStyle(fontSize: 16.sp, color: Colors.white), // 字体颜色为白色// 设置文本居中对齐textAlign: TextAlign.center,),),),);}
} 代码说明 导入库代码开头导入了必要的库包括 Flutter 的基础组件库和 flutter_screenutil 插件。 ScreenUtilInit这是 flutter_screenutil 的入口组件用于初始化屏幕适配功能。designSize 设置了设计稿的尺寸minTextAdapt 用于开启最小文本适配。 MaterialApp这是 Flutter 的一个基础组件用于构建 Material Design 风格的应用。theme 设置了应用的主题home 设置了应用的首页。 Scaffold这是 Flutter 中用于构建页面结构的组件包含导航栏AppBar和页面主体body。 AppBar 和 Container分别用于设置导航栏和页面主体的样式。TextStyle 用于设置文本的样式包括字体大小和颜色。 六、补充说明
使用 flutter_screenutil 的注意事项 正确初始化 在使用 flutter_screenutil 之前必须在应用的入口处如 main.dart初始化 ScreenUtilInit并设置设计稿的尺寸。 示例 return ScreenUtilInit(designSize: Size(375, 812), // 设计稿尺寸minTextAdapt: true, // 文本自适应优化builder: (_, child) MaterialApp(home: child),child: MyHomePage(),);
选择合适的设计稿尺寸 设计稿尺寸应与 UI 设计师提供的原始尺寸一致通常以像素为单位。例如移动端可选择 375×812iPhone 13平板可选择 768×1024。
适配单位的使用 .w 和 .h 用于宽度和高度的适配。 .sp 用于字体大小的适配会考虑系统字体缩放设置。 .ssp 和 .nsp 分别用于强制跟随系统字体缩放和禁用系统字体缩放。
适配圆形元素 对于圆形或正方形元素可以使用 .r 单位它会根据宽高中的较小值进行适配。
安全区域处理 使用 ScreenUtil().bottomBarHeight 和 ScreenUtil().statusBarHeight 来适配刘海屏和全面屏。
百分比布局 可以使用 .sw 和 .sh 来设置屏幕宽度和高度的百分比例如 0.5.sw 表示屏幕宽度的 50%。
横竖屏适配 可以通过 ScreenUtilInit 的 orientation 参数强制设置横竖屏适配。
避免过度适配 对于简单布局建议使用 Flex 或 MediaQuery而不是过度依赖 flutter_screenutil。
测试不同设备 即使使用了 flutter_screenutil仍需在不同屏幕尺寸和分辨率的设备上测试应用确保布局的正确性和美观性。
性能优化 全局只初始化一次 ScreenUtil避免重复计算。
字体缩放策略 如果需要禁用字体缩放可以设置 allowFontScaling: false。
动态适配屏幕方向 在屏幕方向变化时可能需要重新初始化 ScreenUtil。 使用建议 全局初始化推荐在 MaterialApp 外层包裹 ScreenUtilInit并设置 minTextAdapt: true 以优化文本适配。 测试与验证在编写测试时确保使用 tester.pumpAndSettle() 等待布局稳定。 灵活使用对于复杂布局或定制化设计flutter_screenutil 可以确保元素大小更精确地反映设计意图。 常见问题及解决方法 图片模糊使用 .r 单位保证宽高比。 布局溢出结合 SingleChildScrollView 或其他滚动组件。 字体过大设置 textScaleFactor: 1.0。 横竖屏切换异常使用 OrientationBuilder 动态适配。
