采用flutter開發APP已經1年多了,平時開發的過程中踩過很多坑,今天想分享一個flutter應用跨平臺適配的解決方案,目的是讓你的flutter應用可以靈活高效的自動適配各種平臺,實現UI最大化復用,業務邏輯代碼在不同平臺間能夠共享,支持根據屏幕方向實時選擇不同的布局樣式。
下圖描述了flutter-adapter的整體實現方案,我們在APP的入口處設置當前APP所運行的平臺,這個平臺可以在實際使用的時候動態設置,然后對于每個widget,我們只需要實現特定平臺的樣式適配即可。個別widget在不同平臺的表現可能僅僅是部分屬性的數值不同而已,對于屬性值的垮平臺適配我們提供了一個通用的函數superObjectAdapter去解決這個問題。個別按鈕的點擊事件在不同平臺執行的邏輯可能不一樣,我們提供了superFunctionAdapter函數來解決不同函數調用的跨平臺適配難題。
不同平臺適配效果
使用方式
flutter_adapter插件內置了4類平臺,分別是:手機(TEAdaptPlatform.phone)、手機橫屏(TEAdaptPlatform.phoneLandscape)、pad橫屏(TEAdaptPlatform.padLandscape)、pad豎屏(TEAdaptPlatform.padPortrait)。如果你只適配部分平臺,那么只需要對待適配的widget實現特定平臺的build函數即可,其他未適配的平臺默認會返回Phone的樣式。
使用的時候只需要在APP的入口處采用ScreenAdaptWidget,然后設置當前APP需要適配的平臺名稱即可。
如果你需要擴展適配的平臺,對于StatelessWidget只需要實現一個繼承自FlexibleStatelessWidget的抽象類,然后實現新平臺的build函數并注冊該平臺即可;對于StatefulWidget只需要實現一個繼承自FlexibleState的抽象類,然后實現新平臺的build函數并注冊該平臺即可。
插件使用示例:
ScreenAdaptWidget(
platform: TEAdaptPlatform.phone.toString(),
autoOrientation: true, // 是否根據屏幕方向自適應布局
child: 任意widget
)),
如果你的某個StatelessWidget需要適配特定平臺,只需要將該widget繼承自FlexibleStatelessWidget,然后實現特定平臺的build函數即可。
StatelessWidget適配示例:
class MyStatelessPage extends FlexibleStatelessWidget {
@override
Widget buildPhone(BuildContext context) {
return Text('Phone',style: TextStyle(fontSize: 18.0),);
}
@override
Widget buildPadPortrait(BuildContext context) {
return Text('PadPortrait',style: TextStyle(fontSize: 22.0),);
}
@override
Widget buildPadLandscape(BuildContext context) {
return Text('PadLandscape',style: TextStyle(fontSize: 30.0),);
}
}
StatefulWidget適配示例:
如果你的某個StatefulWidget需要適配特定平臺,只需要將該StatefulWidget對應的的State繼承自FlexibleState,然后實現特定平臺的build函數即可,例如:
class MyStatefulPageState extends FlexibleState<MyStatefulPage> {
@override
Widget buildPhone(BuildContext context) {
return Text('Phone',style: TextStyle(fontSize: 18.0),);
}
@override
Widget buildPadPortrait(BuildContext context) {
return Text('PadPortrait',style: TextStyle(fontSize: 22.0),);
}
@override
Widget buildPadLandscape(BuildContext context) {
return Text('PadLandscape',style: TextStyle(fontSize: 30.0),);
}
}
普通Widget適配示例:
1、如果你的某個widget需要在不同平臺中改變個別屬性的值,那么只需要對特定的屬性值進行跨平臺適配即可,flutter_adapter提供了superObjectAdapter函數來解決屬性值的跨平臺適配難題。
2、如果你的某個函數需要在不同平臺中執行不同的邏輯,那么只需要對特定的函數執行邏輯進行跨平臺適配即可,flutter_adapter提供了superFunctionAdapter函數來解決不同函數調用的跨平臺適配難題(例如:可以讓一個按鈕的點擊事件在不同平臺中執行不同的邏輯)。
class MyNormalPage extends StatelessWidget {
final String textStr;
MyNormalPage(this.textStr);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('page normal'),
),
body: Column(
children: <Widget>[
GestureDetector(
onTap: () {
superFunctionAdapter(context, {
TEAdaptPlatform.phone.toString(): () {
print('tab me on ${TEAdaptPlatform.phone.toString()}');
},
TEAdaptPlatform.padPortrait.toString(): () {
print('tab me on ${TEAdaptPlatform.padPortrait.toString()}');
},
});
},
child: Container(
padding: EdgeInsets.all(10.0),
margin: EdgeInsets.only(bottom: 30.0),
width: double.infinity,
height: 100.0,
color: superObjectAdapter(context, {TEAdaptPlatform.phone.toString(): Colors.yellow, TEAdaptPlatform.padPortrait.toString(): Colors.greenAccent}),
child: Center(
child: Text(
'$textStr ${superObjectAdapter(context, {
TEAdaptPlatform.phone.toString(): "[Phone]",
TEAdaptPlatform.padPortrait.toString(): "[PadPortrait]"
})}',
style: TextStyle(
fontSize: superObjectAdapter(context, {TEAdaptPlatform.phone.toString(): 18.0, TEAdaptPlatform.padPortrait.toString(): 38.0}),
color: Colors.black),
),
),
),
),
],
),
);
}
}
擴展需要適配的平臺:
插件內置的3個平臺在實際使用的過程中可能不夠用,因此我們提供了用戶自定義平臺的適配解決方案。
StatelessWidget適配新平臺:
對于StatelessWidget只需要實現一個繼承自FlexibleStatelessWidget的抽象類,然后實現新平臺的build函數,之后注冊該平臺即可。
abstract class CustomFlexibleStatelessWidget extends FlexibleStatelessWidget {
@protected
Widget buildNewPlatform(BuildContext context) {
return buildPhone(context); // by default, you can return the phone's style
}
@protected
void initAdapter() {
super.initAdapter();
addAdapter(Constant.newPlatform, buildNewPlatform);// register new Platform
}
}
StatelessWidget適配新平臺示例:
class MyStatelessPage extends CustomFlexibleStatelessWidget {
@override
Widget buildPhone(BuildContext context) {
return Text('Phone',style: TextStyle(fontSize: 18.0),);
}
@override
Widget buildPadPortrait(BuildContext context) {
return Text('PadPortrait',style: TextStyle(fontSize: 22.0),);
}
@override
Widget buildNewPlatform(BuildContext context) {
return Text('buildNewPlatform',style: TextStyle(fontSize: 30.0),);
}
}
StatefulWidget適配新平臺:
對于StatefulWidget只需要實現一個繼承自FlexibleState的抽象類,然后實現新平臺的build函數,之后注冊該平臺即可。
abstract class CustomFlexibleState<T extends StatefulWidget> extends FlexibleState<T> {
@protected
Widget buildNewPlatform(BuildContext context) {
return buildPhone(context); // by default, you can return the phone's style
}
@protected
void initAdapter() {
super.initAdapter();
addAdapter(Constant.newPlatform, buildNewPlatform);// register new Platform
}
}
StatefulWidget適配新平臺示例:
class MyStatefulPageState extends CustomFlexibleState<MyStatefulPage> {
@override
Widget buildPhone(BuildContext context) {
return Text('Phone',style: TextStyle(fontSize: 18.0),);
}
@override
Widget buildPadPortrait(BuildContext context) {
return Text('PadPortrait',style: TextStyle(fontSize: 22.0),);
}
@override
Widget buildNewPlatform(BuildContext context) {
return Text('NewPlatform',style: TextStyle(fontSize: 30.0),);
}
}