一、背景

現(xiàn)在的手機(jī)屏幕尺寸外觀多種多樣，顯示區(qū)域不再是方方正正的，一些帶圓角或者是劉海屏讓應(yīng)用程序的布局更加復(fù)雜，甚至是需要單獨(dú)適配，這對開發(fā)者來來太糟糕了。

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

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

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包裝以后，會自動避開劉海遮擋區(qū)域，顯示正常：

?

參考文章：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。