一、背景

現在的手機屏幕尺寸外觀多種多樣，顯示區域不再是方方正正的，一些帶圓角或者是劉海屏讓應用程序的布局更加復雜，甚至是需要單獨適配，這對開發者來來太糟糕了。

因此SafeArea控件應用而生，SafeArea通過MediaQuery檢測屏幕的尺寸使應用程序的大小與屏幕適配，自動避開遮擋區域。

它的原理是通過對被包裝元素添加Padding來避開遮擋區域。因此可以分別指定上下左右4個區域是否需要添加Padding，例如下面的代碼只在底部和左側添加Padding用于避開遮擋區域。

SafeArea(top: false,bottom: true,left: true,right: false, ),

二、例子

home: Container(color: Colors.yellow,child: Container(alignment: Alignment.topCenter,child: Text("測試SafeArea測試SafeArea", style: TextStyle(fontSize: 10),)), ),

效果如下，文字被遮擋了：

添加SafeArea包裝以后，會自動避開劉海遮擋區域，顯示正常：

?

參考文章：

https://cloud.tencent.com/developer/article/1472092

總結

以上是生活随笔為你收集整理的SafeArea的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。