采用flutter開發(fā)APP已經(jīng)1年多了，平時(shí)開發(fā)的過程中踩過很多坑椭蹄，今天想分享一個(gè)flutter應(yīng)用跨平臺(tái)適配的解決方案戏锹，目的是讓你的flutter應(yīng)用可以靈活高效的自動(dòng)適配各種平臺(tái)斜棚，實(shí)現(xiàn)UI最大化復(fù)用，業(yè)務(wù)邏輯代碼在不同平臺(tái)間能夠共享啄育，支持根據(jù)屏幕方向?qū)崟r(shí)選擇不同的布局樣式酌心。
下圖描述了flutter-adapter的整體實(shí)現(xiàn)方案，我們?cè)贏PP的入口處設(shè)置當(dāng)前APP所運(yùn)行的平臺(tái)挑豌，這個(gè)平臺(tái)可以在實(shí)際使用的時(shí)候動(dòng)態(tài)設(shè)置安券，然后對(duì)于每個(gè)widget，我們只需要實(shí)現(xiàn)特定平臺(tái)的樣式適配即可氓英。個(gè)別widget在不同平臺(tái)的表現(xiàn)可能僅僅是部分屬性的數(shù)值不同而已侯勉，對(duì)于屬性值的垮平臺(tái)適配我們提供了一個(gè)通用的函數(shù)superObjectAdapter去解決這個(gè)問題。個(gè)別按鈕的點(diǎn)擊事件在不同平臺(tái)執(zhí)行的邏輯可能不一樣铝阐，我們提供了superFunctionAdapter函數(shù)來解決不同函數(shù)調(diào)用的跨平臺(tái)適配難題址貌。
不同平臺(tái)適配效果
使用方式
flutter_adapter插件內(nèi)置了4類平臺(tái)，分別是：手機(jī)（TEAdaptPlatform.phone）徘键、手機(jī)橫屏（TEAdaptPlatform.phoneLandscape）练对、pad橫屏（TEAdaptPlatform.padLandscape）、pad豎屏（TEAdaptPlatform.padPortrait）吹害。如果你只適配部分平臺(tái)螟凭，那么只需要對(duì)待適配的widget實(shí)現(xiàn)特定平臺(tái)的build函數(shù)即可，其他未適配的平臺(tái)默認(rèn)會(huì)返回Phone的樣式它呀。
使用的時(shí)候只需要在APP的入口處采用ScreenAdaptWidget螺男，然后設(shè)置當(dāng)前APP需要適配的平臺(tái)名稱即可。
如果你需要擴(kuò)展適配的平臺(tái)纵穿，對(duì)于StatelessWidget只需要實(shí)現(xiàn)一個(gè)繼承自FlexibleStatelessWidget的抽象類烟号，然后實(shí)現(xiàn)新平臺(tái)的build函數(shù)并注冊(cè)該平臺(tái)即可；對(duì)于StatefulWidget只需要實(shí)現(xiàn)一個(gè)繼承自FlexibleState的抽象類政恍，然后實(shí)現(xiàn)新平臺(tái)的build函數(shù)并注冊(cè)該平臺(tái)即可。
插件使用示例：
ScreenAdaptWidget(
platform: TEAdaptPlatform.phone.toString(),
autoOrientation: true, // 是否根據(jù)屏幕方向自適應(yīng)布局
child: 任意widget
)),
如果你的某個(gè)StatelessWidget需要適配特定平臺(tái)达传，只需要將該widget繼承自FlexibleStatelessWidget篙耗，然后實(shí)現(xiàn)特定平臺(tái)的build函數(shù)即可迫筑。
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適配示例：
如果你的某個(gè)StatefulWidget需要適配特定平臺(tái)，只需要將該StatefulWidget對(duì)應(yīng)的的State繼承自FlexibleState宗弯，然后實(shí)現(xiàn)特定平臺(tái)的build函數(shù)即可脯燃，例如：
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、如果你的某個(gè)widget需要在不同平臺(tái)中改變個(gè)別屬性的值蒙保，那么只需要對(duì)特定的屬性值進(jìn)行跨平臺(tái)適配即可辕棚，flutter_adapter提供了superObjectAdapter函數(shù)來解決屬性值的跨平臺(tái)適配難題。
2邓厕、如果你的某個(gè)函數(shù)需要在不同平臺(tái)中執(zhí)行不同的邏輯逝嚎，那么只需要對(duì)特定的函數(shù)執(zhí)行邏輯進(jìn)行跨平臺(tái)適配即可，flutter_adapter提供了superFunctionAdapter函數(shù)來解決不同函數(shù)調(diào)用的跨平臺(tái)適配難題（例如：可以讓一個(gè)按鈕的點(diǎn)擊事件在不同平臺(tái)中執(zhí)行不同的邏輯）详恼。
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),
),
),
),
),
],
),
);
}
}
擴(kuò)展需要適配的平臺(tái)：
插件內(nèi)置的3個(gè)平臺(tái)在實(shí)際使用的過程中可能不夠用补君，因此我們提供了用戶自定義平臺(tái)的適配解決方案。
StatelessWidget適配新平臺(tái)：
對(duì)于StatelessWidget只需要實(shí)現(xiàn)一個(gè)繼承自FlexibleStatelessWidget的抽象類昧互，然后實(shí)現(xiàn)新平臺(tái)的build函數(shù)挽铁，之后注冊(cè)該平臺(tái)即可。
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適配新平臺(tái)示例：
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適配新平臺(tái)：
對(duì)于StatefulWidget只需要實(shí)現(xiàn)一個(gè)繼承自FlexibleState的抽象類敞掘，然后實(shí)現(xiàn)新平臺(tái)的build函數(shù)叽掘，之后注冊(cè)該平臺(tái)即可。
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適配新平臺(tái)示例：
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),);
}
}
