Flutter全面屏适配
笔者在这篇文章ReactNative全面屏(Android)适配问题提及了现在的全面屏问题,不仅是Android平台,IOS平台也是,给我的感觉就是手机越来越长了。
现在的手机长宽比早就不是之前的16:9了,比如iphoneX 的长宽比为13:6,而现在多数的Android手机都到了19.5:9,有的甚至达到了21:9。
基于科技的发展(适配的血泪史),Flutter开发自然也需要注意这个问题。
在Flutter开发中,通常使用Scaffold的appBar和bottomNavigationBar组件的页面是没有适配问题,它内部对全面屏进行了适配。
适配问题主要是出现在没有使用Scaffold的情况下。
看一下这段代码,没有使用Scaffold:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Container(
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
color: Colors.lightBlue,
child: Text('头部'),
),
Container(
color: Colors.redAccent,
child: Text('底部'),
)
],
),
)
);
}
}
运行效果如下:
可以看到上面和下面的组件已经被遮挡了,这就出现了适配问题,适配的主要问题就是集中在如下两点:
- 顶部的NavigationBar预留安全区域
- 底部的NavigationBar预留安全区域
对于以上两种问题,Flutter给出了除上面使用Scaffold,还有如下两种方案:
- 使用Flutter框架提供的SafeArea,Widget进行包裹组件来适配全面屏,这个组件和ReactNative框架中的SafeAreaView这个组件差不多效果,从两个名字就可以看出来,
Flutter全面屏适配的更多相关文章
- RN Android全面屏适配
像现在市面上新出的手机,例如华为P30 pro,小米9,iPhone XS MAX,屏占比都惊人的达到90%以上,这些手机具备了以下几个特点 大,屏占比高,长宽比都不再是16:9,都达到了19.5:9 ...
- Android全面屏适配
什么是全面屏 概念 很多人可能把全面屏跟曲面屏混淆,其实这是两个不同的概念. 一般手机的屏幕纵横比为16:9,如1080x1920.1440x2560等,其比值为1.777777……,全面屏手机出现之 ...
- [COCOS2DX-LUA]0-005.cocos2dx中关于全面屏和折叠屏的适配的一些见解
1.随着科技的发展,我们可以看到从iphoneX的刘海屏开始,引发了各种全面屏和异形屏的出现.这是科技的进步,但是对于各大的应用厂商来说,苦不堪言. 2.当然 ,吐槽归吐槽,我们还是要理智的去对待这个 ...
- cordova 5.4版本 适配全面屏 底部黑边问题
在全面屏发布之后,Android官方提供了适配方案,即提高App所支持的最大屏幕纵横比,实现很简单,在AndroidManifest.xml中可做如下配置: 更改android.max_aspect值 ...
- react native Expo适配全面屏/Expo识别全面屏和正常屏
一.最新版本的expo已经默认支持了全面屏,即不会像react native cli一样出现底部黑边 二.但是全面屏通过Dimensions.get('window')获取的高度还是不准确,因为全面屏 ...
- 微信小程序 自定义导航组件 nav头部 全面屏设计
nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...
- Android最佳实践之SystemBar状态栏全版本适配方案
前言 自从MD设计规范出来后,关于系统状态栏的适配越受到关注,因为MD在5.0以后把系统状态栏的颜色改为可由开发者配置的,而在5.0之前则无法指定状态栏的颜色,所以这篇就说说使用Toolbar对系统状 ...
- Ionic5沉浸式状态栏 适配全面屏
1. 在platforms/android/app/src/main目录中找到AndroidManifest.xml文件,修改文件中manifest → application → activity标 ...
- flutter全栈开发学习资料大全 免费flutter学习视频 文字教程!
flutter今年特别火,google推出flutter就是为了一次开发全平台应用,包括PC端,手机wap端,android,ios直接生成APP应用,如果真的能像谷歌说的,那我们开发人员就真的好好学 ...
随机推荐
- webmagic笔记
在class Spider中有run函数,调用了 processRequest(requestFinal)完成对页面的下载和处理.在这个函数里面先调用downloader.download(reque ...
- 在spring security3中使用自定义的MD5和salt进行加密
首先看代码: <authentication-manager alias="authenticationManager"> <authentication-pro ...
- win10 uwp release 因为 Entry Point Not Found 无法启动
本文告诉大家如果在使用 release 编译时,无法启动应用,出现 Entry Point Not Found 如何让应用运行. 程序"[30760] xx.exe"已退出,返回值 ...
- linux进程睡眠的介绍
对于一个进程"睡眠"意味着什么? 当一个进程被置为睡眠, 它被标识为处于一个特殊的状 态并且从调度器的运行队列中去除. 直到发生某些事情改变了那个状态, 这个进程将不被 在任何 C ...
- vue-cli 初始化 -4058 error
如上图 原因:安装初始化时没有管理员权限 解决:进入目录删除node_modules,进入命令提示符以管理员身份重新运行: npm install
- 2018-8-10-win10-uwp-萤火虫效果
title author date CreateTime categories win10 uwp 萤火虫效果 lindexi 2018-08-10 19:16:51 +0800 2018-2-13 ...
- Linux 内核驱动结构嵌入
如同大部分驱动核心结构的情形, device_driver 结构常常被发现嵌到一个更高级的, 总 线特定的结构. lddbus 子系统不会和这样的趋势相反, 因此它已定义了它自己的 ldd_drive ...
- dotnet core 黑科技·String
本文来告诉大家 dotnet core 里面使用的黑科技,如何提高String.IndexOf(char)的性能 在Performance Improvements in .NET Core有说道哪些 ...
- 在Android上为所欲为的一些技术
https://www.jianshu.com/p/87ce6f565d37Android JNI(一)——NDK与JNI基础 https://www.android-doc.com/guide/co ...
- PHP四大主流框架的优缺点总结
本篇文章我们来讲讲PHP四大框架的优缺点都有哪些,让你们在开发中更好的去选择使用哪款PHP框架去完成项目,废话不多说,我们一起来看看吧!! ThinkPHP ThinkPHP(FCS)是一个轻量级的中 ...
- RN Android全面屏适配