flutter SafeArea和SliverSafeArea，適應特殊屏幕

現如今的手機已經不能提供給應用程序規整的矩形界面了，一些帶圓角或者是劉海屏讓應用程序的布局更加復雜，甚至是需要單獨適配，這對開發者來來太糟糕了。

因此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(),
)

SliverSafeArea

SliverSafeArea的功能和SafeArea是一樣的，區別就是SliverSafeArea用于Sliver控件，比如下面的用法：

CustomScrollView(
  slivers: <Widget>[
    SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, crossAxisSpacing: 5, mainAxisSpacing: 3),
      delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
        return Container(
          color: Colors.primaries[index % Colors.primaries.length],
        );
      }, childCount: 20),
    )
  ],
)

在劉海屏上的效果：

頂部有一部分被劉海屏遮擋住了，解決此問題的方法是將SliverGrid包裹在SliverSafeArea中：

CustomScrollView(
  slivers: <Widget>[
    SliverSafeArea(
      sliver: SliverGrid(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, crossAxisSpacing: 5, mainAxisSpacing: 3),
        delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
          return Container(
            color: Colors.primaries[index % Colors.primaries.length],
          );
        }, childCount: 20),
      ),
    )
  ],
)

posted @ 2021-01-28 16:31 淡然吖閱讀(1376) 評論(0) 收藏舉報

刷新頁面返回頂部

淡然吖

flutter SafeArea和SliverSafeArea，適應特殊屏幕

SliverSafeArea

公告