Flutter Boost

場景: iOS 使用 v1.12.13+hotfix.9 版本根據(jù)官方 Option B 集成方式集成，可以運(yùn)行但在 iOS 主工程 archive 的時候發(fā)生如下錯誤： ld: bitcode bundle could not be generated because

ld: bitcode bundle could not be generated because '/Users/n/Library/Developer/Xcode/DerivedData/host_ios-bnbwehcmdjzqgydxspnsnfifvdyh/Build/Intermediates.noindex/ArchiveIntermediates/host_ios/BuildProductsPath/Release-iphoneos/shared_preferences.framework/shared_preferences' was built without full bitcode. All frameworks and dylibs for bitcode must be generated from Xcode Archive or Install build file '/Users/n/Library/Developer/Xcode/DerivedData/host_ios-bnbwehcmdjzqgydxspnsnfifvdyh/Build/Intermediates.noindex/ArchiveIntermediates/host_ios/BuildProductsPath/Release-iphoneos/shared_preferences.framework/shared_preferences' for architecture arm64

分析問題:

• 參考 issue

• 分析 v1.12.13+hotfix.9 生成的 framework ,發(fā)現(xiàn)是不支持 bitcode 的，而將 Flutter 升級到 1.7.0 stable channel 是支持 bitcode 的。

不支持bitcode.png

支持bitcode.png

解決方案：

1. 將 Flutter 嘗試升級到 1.7.0 stable channel 或是最新的 master channel 可以成功 archive 。

2. 如果 Flutter 項(xiàng)目中有插件需要依賴于 v1.12.13 版本，可以先嘗試先關(guān)閉工程的 Enable Bitcode。

   如果是私有組件來集成 flutter 可以把組件和主工程的 Enable Bitcode 都設(shè)置為 NO.

ListView 維護(hù)狀態(tài)的問題

問題:ListView在滾動的時候會將滾出 viewport 的相關(guān)的 element 樹, status 和 render objects 會銷毀。

解決方案：

1. 使用CustomScrollView

2. 混合 AutomaticKeepAliveClientMixin 重寫 wantKeepAlive。該套方案可以封裝成一個 widget

class AliveKeeper extends StatefulWidget {
  final Widget child;

  const AliveKeeper({Key key, @required this.child}) : super(key: key);

  @override
  _AliveKeeperState createState() => _AliveKeeperState();
}

class _AliveKeeperState extends State<AliveKeeper>
    with AutomaticKeepAliveClientMixin<AliveKeeper> {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return widget.child;
  }
}

3. 用provider維護(hù)狀態(tài)
   文檔
   文檔

ListView 默認(rèn)頂部內(nèi)邊距問題

問題: 如果導(dǎo)航欄不存在，創(chuàng)建的 ListView 系統(tǒng)會默認(rèn)增加 20 內(nèi)邊距。文檔上已有說明

解決方案：

1. 設(shè)置 ListView padding zero
2. MediaQuery.removePadding

參考文章

image.png

ListView 在水平方向滑動,高度如何做到自適應(yīng)

分析:由于 ListView 的 children 都是懶加載的，即無法知道 children 的高度，如果確實(shí)需要實(shí)現(xiàn)這一點(diǎn)首先要確認(rèn)元素并不是非常多，可以使用 SingleChildScrollView + Row 即沒有懶加載的方式來實(shí)現(xiàn)。

參考文章1
參考文章2

ListView 在垂直方向滑動，高度如何做到自適應(yīng)

將 ListView 的 shrinkWrap 為 true，然后將滾動效果關(guān)閉。但是需要注意一旦設(shè)置了 shrinkWrap 性能開銷會較大。

vsync 重復(fù)創(chuàng)建問題

在使用動畫時候, 如果使用 SingleTickerProviderStateMixin 進(jìn)行混合則下次重新創(chuàng)建就會報錯，可以使用TickerProviderStateMixin 來替代。

如何實(shí)現(xiàn)負(fù)的內(nèi)邊距?

Flutter 是不支持負(fù)的內(nèi)邊距的，但是有兩種方式可以模擬實(shí)現(xiàn)

1. transform: Matrix4.translationValues(0.0, -50.0, 0.0)

2. Stack(overflow: Overflow.visible) + Positioned

Positioned Widget 既想水平居中，又想使用 top 或 bootom 等屬性來調(diào)整垂直方向的位置如果實(shí)現(xiàn)?

調(diào)整 Stack 的 alignment 參數(shù)來保持水平方向?qū)R，Positioned 的 child 通過 top 或 bootom 等屬性來調(diào)整垂直方向位置。

Stack(
        alignment: Alignment.bottomCenter,
        children: [
          _buildImagesBody(),
          _buildImageIndex(),
          _buildTextInfo(),
        ],
      ),

狀態(tài)欄風(fēng)格管理

1. AppBar 自身是可以通過 brightness 屬性來管理的。

2. 如果頁面中沒有使用 AppBar 我封裝了一個 Widget 可供使用。每個頁面都可以獨(dú)立進(jìn)行管理相應(yīng)的狀態(tài)風(fēng)格。

enum StatusBarStyleType {
  dark,
  light,
}

class StatusBarStyle extends StatelessWidget {
  final StatusBarStyleType type;

  final Widget child;

  const StatusBarStyle({
    Key key,
    @required this.child,
    this.type = StatusBarStyleType.dark,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final SystemUiOverlayStyle overlayStyle = type == StatusBarStyleType.dark
        ? SystemUiOverlayStyle.dark
        : SystemUiOverlayStyle.light;

    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: overlayStyle,
      child: child,
    );
  }
}