一種flutter應用的跨平臺適配解決方案

采用flutter開發APP已經1年多了,平時開發的過程中踩過很多坑,今天想分享一個flutter應用跨平臺適配的解決方案,目的是讓你的flutter應用可以靈活高效的自動適配各種平臺,實現UI最大化復用,業務邏輯代碼在不同平臺間能夠共享,支持根據屏幕方向實時選擇不同的布局樣式。

下圖描述了flutter-adapter的整體實現方案,我們在APP的入口處設置當前APP所運行的平臺,這個平臺可以在實際使用的時候動態設置,然后對于每個widget,我們只需要實現特定平臺的樣式適配即可。個別widget在不同平臺的表現可能僅僅是部分屬性的數值不同而已,對于屬性值的垮平臺適配我們提供了一個通用的函數superObjectAdapter去解決這個問題。個別按鈕的點擊事件在不同平臺執行的邏輯可能不一樣,我們提供了superFunctionAdapter函數來解決不同函數調用的跨平臺適配難題。

flutter-adapter跨平臺解決方案

不同平臺適配效果

手機
平板豎屏
平板橫屏
屏幕自動旋轉

使用方式

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),);
  }
}
用戶自定義平臺

本項目已經開源,開源地址:flutter-adapter

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。