Flutter 很大一個特點就是 Android 和 iOS 兩平台一套代碼,但是隨著 Flutter 越發精準實現兩平台的特色,各種控制項差異度越來越大。如: NavigationBar, Button, Scaffold。官方在 Flutter 1.7 給出了解決方案 PlatformWidget。

/// A simple widget that builds different things on different platforms.
class PlatformWidget extends StatelessWidget {
const PlatformWidget({
Key key,
@required this.androidBuilder,
@required this.iosBuilder,
}) : assert(androidBuilder != null),
assert(iosBuilder != null),
super(key: key);

final WidgetBuilder androidBuilder;
final WidgetBuilder iosBuilder;

@override
Widget build(context) {
switch (defaultTargetPlatform) {
case TargetPlatform.android:
return androidBuilder(context);
case TargetPlatform.iOS:
return iosBuilder(context);
default:
assert(false, Unexpected platform $defaultTargetPlatform);
return null;
}
}
}

然後在業務中出現分叉

@override
Widget build(context) {
return PlatformWidget(
androidBuilder: _buildAndroid,
iosBuilder: _buildIos,
);
}

Widget _buildAndroid(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(song)),
body: _buildBody(),
);
}

Widget _buildIos(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text(song),
previousPageTitle: Songs,
),
child: _buildBody(),
);
}

_buildBody 里才是兩平台相同的代碼。

平台定義為:

enum TargetPlatform {
/// Android: <https://www.android.com/>
android,

/// Fuchsia: <https://fuchsia.googlesource.com/>
fuchsia,

/// iOS: <http://www.apple.com/ios/>
iOS,
}

這種方式固然解決了問題,但是個人建議:不用管平台的設計差異,實現適合用戶操作的混合風格 App 就好。譬如安卓的右滑回退是不推薦的,個人感覺極不方便,改用統一的 iOS 風格會方便操作。其次類似 iOS 風格的按鈕等,直接用 Materialed Button 即可。這樣能省去無數麻煩,畢竟代碼簡潔、用戶操作方便。App 的風格是否完全符合平台特色不是重點。

Flutter 做動畫等特色難度大為降低,可以在這個方向下點功夫讓 App 更加精美。

推薦閱讀:

相关文章