Flutter Widgets 之 SafeArea
注意:无特殊说明,Flutter版本及Dart版本如下:
- Flutter版本: 1.12.13+hotfix.5
- Dart版本: 2.7.0
现如今的手机已经不能提供给应用程序规整的矩形界面了,一些带圆角或者是刘海屏让应用程序的布局更加复杂,甚至是需要单独适配,这对开发者来来太糟糕了。
因此SafeArea控件应用而生,SafeArea通过MediaQuery
检测屏幕的尺寸使应用程序的大小与屏幕适配。
创建一个铺满全屏的ListView,并显示数据,代码如下:
ListView(children: List.generate(100, (i) => Text('老孟,一个有态度的程序员')),)
效果如图:
底部的数据明显被遮挡了,想要解决这个问题只需将ListView包裹在SafeArea中即可,代码如下:
SafeArea(child: ListView(children: List.generate(100, (i) => Text('老孟,一个有态度的程序员')),),)
效果如图:
我们甚至可以指定显示区域,默认情况下上下左右都是指定区域,如下代码去掉左侧区域:
SafeArea(left: false,child: ListView(),
)
交流
如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。
Flutter Widgets 之 SafeArea相关推荐
- Flutter widgets 快问快答 | 第一期
想打造精彩的 Flutter 应用,离不开对各种 widget 的熟练使用.Flutter widget 短视频系列已经在 B 站连载一段时间了,这里我们为大家带来近期观看最多的三个 widget 的 ...
- Flutter Widgets 之 Expanded和Flexible
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Expanded和Flexible是控制Row.Colum ...
- Flutter Widgets 之 Container
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Container将会是我们以后最常用的控件之一,Cont ...
- 6、Flutter Widgets 之 InkWell 和 Ink
InkWell 参数详解 属性 详解 child 子组件 onTap 点击监听() onDoubleTap 双击监听 onLongPress 长按监听 onTapDown ...
- Flutter Widgets 之 RichText
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 基础用法 应用程序离不开文字的展示,因此文字的排版非常重要 ...
- 18、 Flutter Widgets 之 内置各种show
flutter内置了各种类型的show弹框,可以增加开发效率.以下是每种show的基本用法. showDialog showDialog(context: context, builder: (con ...
- Flutter 中 Positioned、Align、Center 的使用详解 _ Flutter Widgets
), Positioned( <Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义> [docs.qq.com/doc/DSkNLaERkbnFoS0ZF] ...
- Flutter Widgets: Image
介绍 Image, 图片显示Widget, 和Android ImageView相似,但是从实际使用的方法上看,与常用的图片加载库,如Picasso,Glide等相似,支持本地图片,资源图片,网络图片 ...
- 15、 Flutter Widgets 之 ClipRect,ClipRRect,ClipOval,ClipPath,CustomClipper,裁剪组件
ClipRect ClipRect组件使用矩形裁剪子组件,通常情况下,ClipRect作用于CustomPaint . CustomSingleChildLayout . CustomMultiChi ...
最新文章
- 程序员,应该掌握的英语词汇
- 汇编:源文件asm, exe可执行文件
- Word 2010 制作文档结构之章节自动编号
- PoseCNN代码复现CMake编译找不到math_functions.hpp
- bzoj 3632: 外太空旅行(随机)
- shell命令:echo命令
- 关于Android Studio使用高德地图地位
- C语言测试:想成为嵌入式程序员应知道的0x10个基本问题
- java 电子时钟_Java电子时钟实现代码
- 用于 3d 渲染应用程序的常见物体 IOR(折射率)值
- 服务器搬迁方案_定稿某信息中心机房搬迁方案实施实施方案计划_项目可行性方案(样例3)...
- Object slicing(对象切片)
- Scratch软件编程等级考试四级——20200620
- 常见思维模型汇总(一)
- java培优学习笔记(一)多线程快速入门
- vs2022 error C1001:内部编译器错误
- 肺癌治疗正式开启“免疫时代”
- 如何上传自己的项目到Maven中央仓库
- 【人工智能】农夫过河问题
- 软件开发工具与环境 (课程代码:07169)