给不知道如何配置power_image 尤其是现在很多flutter项目默认使用swift和kotlin的同学的说明书

ManInTheWind commented 2 years ago

很多对原生比较陌生的同学在使用power_image前不知道如何配置，尤其是现在很多flutter项目默认使用swift和kotlin新建，加上power_image的demo在ios和android只作了oc和java的配置说明。

下面是对官方demo的补充，降低此插件的使用难度：

1.ios-swift

1.1 如果不打算自己定制自定义对应的加载器，请把example/ios/Runner/Biz整个文件夹直接复制到自己的ios项目Runner 1.2 在example/ios/Runner/Runner-Bridging-Header.h添加以下桥接头文件

#import "PowerImageNetworkImageLoader.h"
#import "PowerImageAssetsImageLoader.h"
#import "PowerImageFlutterAssertImageLoader.h"
#import "PowerImageFileImageLoader.h"

1.3 在example/ios/Runner/Podfile中添加依赖，然后在自己的项目ios路径下使用终端pod install

pod  'SDWebImage', '~> 5.0'

1.4 在example/ios/Runner/AppDelegate.swift的application方法中添加以下注册

...
import power_image ///请导入
import SDWebImage  ///请导入

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)

    ///添加注册
    PowerImageLoader.sharedInstance().register(PowerImageNetworkImageLoader.init(), forType: kPowerImageImageTypeNetwork)

    PowerImageLoader.sharedInstance().register(PowerImageAssetsImageLoader.init(), forType: kPowerImageImageTypeNativeAsset)

    PowerImageLoader.sharedInstance().register(PowerImageFlutterAssertImageLoader.init(), forType: kPowerImageImageTypeAsset)

    PowerImageLoader.sharedInstance().register(PowerImageFileImageLoader.init(), forType: kPowerImageImageTypeFile)

    SDImageCacheConfig.default.maxMemoryCount = 20

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

2.android-kotlin

2.1 在app/build.gradle的android.buildType下添加以下依赖,然后点击sync now(需要以android module打开项目)

    dependencies {
        implementation 'com.github.bumptech.glide:glide:4.12.0'
        annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
    }

2.2 同样的不打算自定义的加载器，请把example/android/app/src/main/java/com/taobao/power_image_example/power_image_loader/整个文件夹和example/android/app/src/main/java/com/taobao/power_image_example/GlideMultiFrameImage.java直接复制到自己的app/src/main/kotlin/com/xxx/xxx/下(复制之后注意修改导入路径)

2.3 在android项目的app/src/main/kotlin/com/xxx/xxx/MainActivity.kt中添加注册加载器

...
import com.xxx.xxxx.power_image_loader.PowerImageFileLoader  ///注意路径
import com.xxx.xxxx.power_image_loader.PowerImageFlutterAssetLoader
import com.xxx.xxxx.power_image_loader.PowerImageNativeAssetLoader
import com.xxx.xxxx.power_image_loader.PowerImageNetworkLoader
import io.flutter.embedding.android.FlutterActivity

import com.taobao.power_image.loader.PowerImageLoader

class MainActivity: FlutterActivity() {
    @Override
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        ///添加注册
        PowerImageLoader.getInstance().registerImageLoader(
             PowerImageNetworkLoader(this.applicationContext), "network");
        PowerImageLoader.getInstance().registerImageLoader(
             PowerImageNativeAssetLoader(this.applicationContext), "nativeAsset");
        PowerImageLoader.getInstance().registerImageLoader(
             PowerImageFlutterAssetLoader(this.applicationContext), "asset");
        PowerImageLoader.getInstance().registerImageLoader(
             PowerImageFileLoader(this.applicationContext), "file");
    }
}

3.开始在flutter中添加注册,

void main(){
    ...
    ///添加初始化
    PowerImageBinding();
    ///添加全局power_image的加载方式
    PowerImageLoader.instance.setup(PowerImageSetupOptions(renderingTypeTexture,
        errorCallbackSamplingRate: null,
        errorCallback: (PowerImageLoadException exception) {}));

    runApp(const MyApp());
    ...
}

最后可以愉快使用这个超棒的插件了🥳

lidaren commented 2 years ago

感谢分享

wongkoo commented 2 years ago

🆒❕

ksballetba commented 2 years ago

非常感谢分享，官方后续会出一个kotlin和swift的example，以及会在文档里进行相关的配置说明。

Sunyuwumengsheng commented 2 years ago

请教下是否可以在混合工程中使用能

dunizb commented 2 years ago

iOS启动报错：

/Users/zhangbing/github/bizhi_client/ios/Runner/AppDelegate.swift:18:48: Cannot find 'PowerImageNetworkImageLoader' in scope

/Users/zhangbing/github/bizhi_client/ios/Runner/AppDelegate.swift:19:48: Cannot find 'PowerImageAssetsImageLoader' in scope

/Users/zhangbing/github/bizhi_client/ios/Runner/AppDelegate.swift:20:48: Cannot find 'PowerImageFlutterAssertImageLoader' in scope

/Users/zhangbing/github/bizhi_client/ios/Runner/AppDelegate.swift:21:48: Cannot find 'PowerImageFileImageLoader' in scope

AppDelegate.swift如下：

import UIKit
import Flutter
import power_image
import SDWebImage

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)

    ///添加注册
    PowerImageLoader.sharedInstance().register(PowerImageNetworkImageLoader.init(), forType: kPowerImageImageTypeNetwork)
    PowerImageLoader.sharedInstance().register(PowerImageAssetsImageLoader.init(), forType: kPowerImageImageTypeNativeAsset)
    PowerImageLoader.sharedInstance().register(PowerImageFlutterAssertImageLoader.init(), forType: kPowerImageImageTypeAsset)
    PowerImageLoader.sharedInstance().register(PowerImageFileImageLoader.init(), forType: kPowerImageImageTypeFile)
    SDImageCacheConfig.default.maxMemoryCount = 20

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

wongkoo commented 2 years ago

iOS启动报错：

/Users/zhangbing/github/bizhi_client/ios/Runner/AppDelegate.swift:18:48: Cannot find 'PowerImageNetworkImageLoader' in scope

/Users/zhangbing/github/bizhi_client/ios/Runner/AppDelegate.swift:19:48: Cannot find 'PowerImageAssetsImageLoader' in scope

/Users/zhangbing/github/bizhi_client/ios/Runner/AppDelegate.swift:20:48: Cannot find 'PowerImageFlutterAssertImageLoader' in scope

/Users/zhangbing/github/bizhi_client/ios/Runner/AppDelegate.swift:21:48: Cannot find 'PowerImageFileImageLoader' in scope

AppDelegate.swift如下：

import UIKit
import Flutter
import power_image
import SDWebImage

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)

    ///添加注册
    PowerImageLoader.sharedInstance().register(PowerImageNetworkImageLoader.init(), forType: kPowerImageImageTypeNetwork)
    PowerImageLoader.sharedInstance().register(PowerImageAssetsImageLoader.init(), forType: kPowerImageImageTypeNativeAsset)
    PowerImageLoader.sharedInstance().register(PowerImageFlutterAssertImageLoader.init(), forType: kPowerImageImageTypeAsset)
    PowerImageLoader.sharedInstance().register(PowerImageFileImageLoader.init(), forType: kPowerImageImageTypeFile)
    SDImageCacheConfig.default.maxMemoryCount = 20

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

四个对应的loader需要接入方实现，详情可参考 example_kotlin_swift

dunizb commented 2 years ago

iOS启动报错：

/Users/zhangbing/github/bizhi_client/ios/Runner/AppDelegate.swift:18:48: Cannot find 'PowerImageNetworkImageLoader' in scope

/Users/zhangbing/github/bizhi_client/ios/Runner/AppDelegate.swift:19:48: Cannot find 'PowerImageAssetsImageLoader' in scope

/Users/zhangbing/github/bizhi_client/ios/Runner/AppDelegate.swift:20:48: Cannot find 'PowerImageFlutterAssertImageLoader' in scope

/Users/zhangbing/github/bizhi_client/ios/Runner/AppDelegate.swift:21:48: Cannot find 'PowerImageFileImageLoader' in scope

AppDelegate.swift如下：

import UIKit
import Flutter
import power_image
import SDWebImage

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)

    ///添加注册
    PowerImageLoader.sharedInstance().register(PowerImageNetworkImageLoader.init(), forType: kPowerImageImageTypeNetwork)
    PowerImageLoader.sharedInstance().register(PowerImageAssetsImageLoader.init(), forType: kPowerImageImageTypeNativeAsset)
    PowerImageLoader.sharedInstance().register(PowerImageFlutterAssertImageLoader.init(), forType: kPowerImageImageTypeAsset)
    PowerImageLoader.sharedInstance().register(PowerImageFileImageLoader.init(), forType: kPowerImageImageTypeFile)
    SDImageCacheConfig.default.maxMemoryCount = 20

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

四个对应的loader需要接入方实现，详情可参考 example_kotlin_swift

就是参考的example_kotlin_swift，Android的也启动不来。。。仔细对比了文档步骤，折腾一天了还是不行🙃😟，就想问问有人成功过吗，有没有什么文档没说到的地方？

lexoops commented 1 year ago

很多对原生比较陌生的同学在使用power_image前不知道如何配置，尤其是现在很多flutter项目默认使用swift和kotlin新建，加上power_image的demo在ios和android只作了oc和java的配置说明。

下面是对官方demo的补充，降低此插件的使用难度：

1.ios-swift

1.1 如果不打算自己定制自定义对应的加载器，请把example/ios/Runner/Biz整个文件夹直接复制到自己的ios项目Runner 1.2 在example/ios/Runner/Runner-Bridging-Header.h添加以下桥接头文件
#import "PowerImageNetworkImageLoader.h"
#import "PowerImageAssetsImageLoader.h"
#import "PowerImageFlutterAssertImageLoader.h"
#import "PowerImageFileImageLoader.h"
1.3 在example/ios/Runner/Podfile中添加依赖，然后在自己的项目ios路径下使用终端pod install
pod  'SDWebImage', '~> 5.0'
1.4 在example/ios/Runner/AppDelegate.swift的application方法中添加以下注册
...
import power_image ///请导入
import SDWebImage  ///请导入

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)

    ///添加注册
    PowerImageLoader.sharedInstance().register(PowerImageNetworkImageLoader.init(), forType: kPowerImageImageTypeNetwork)

    PowerImageLoader.sharedInstance().register(PowerImageAssetsImageLoader.init(), forType: kPowerImageImageTypeNativeAsset)

    PowerImageLoader.sharedInstance().register(PowerImageFlutterAssertImageLoader.init(), forType: kPowerImageImageTypeAsset)

    PowerImageLoader.sharedInstance().register(PowerImageFileImageLoader.init(), forType: kPowerImageImageTypeFile)

    SDImageCacheConfig.default.maxMemoryCount = 20

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}
2.android-kotlin

2.1 在app/build.gradle的android.buildType下添加以下依赖,然后点击sync now(需要以android module打开项目)
    dependencies {
        implementation 'com.github.bumptech.glide:glide:4.12.0'
        annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
    }
2.2 同样的不打算自定义的加载器，请把example/android/app/src/main/java/com/taobao/power_image_example/power_image_loader/整个文件夹和example/android/app/src/main/java/com/taobao/power_image_example/GlideMultiFrameImage.java直接复制到自己的app/src/main/kotlin/com/xxx/xxx/下(复制之后注意修改导入路径)

2.3 在android项目的app/src/main/kotlin/com/xxx/xxx/MainActivity.kt中添加注册加载器
...
import com.xxx.xxxx.power_image_loader.PowerImageFileLoader  ///注意路径
import com.xxx.xxxx.power_image_loader.PowerImageFlutterAssetLoader
import com.xxx.xxxx.power_image_loader.PowerImageNativeAssetLoader
import com.xxx.xxxx.power_image_loader.PowerImageNetworkLoader
import io.flutter.embedding.android.FlutterActivity

import com.taobao.power_image.loader.PowerImageLoader

class MainActivity: FlutterActivity() {
    @Override
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        ///添加注册
        PowerImageLoader.getInstance().registerImageLoader(
             PowerImageNetworkLoader(this.applicationContext), "network");
        PowerImageLoader.getInstance().registerImageLoader(
             PowerImageNativeAssetLoader(this.applicationContext), "nativeAsset");
        PowerImageLoader.getInstance().registerImageLoader(
             PowerImageFlutterAssetLoader(this.applicationContext), "asset");
        PowerImageLoader.getInstance().registerImageLoader(
             PowerImageFileLoader(this.applicationContext), "file");
    }
}
3.开始在flutter中添加注册,
void main(){
    ...
    ///添加初始化
    PowerImageBinding();
    ///添加全局power_image的加载方式
    PowerImageLoader.instance.setup(PowerImageSetupOptions(renderingTypeTexture,
        errorCallbackSamplingRate: null,
        errorCallback: (PowerImageLoadException exception) {}));

    runApp(const MyApp());
    ...
}
最后可以愉快使用这个超棒的插件了🥳

对于swift来说这样行不通，使用example_kotlin_swift中Runner/Loaders的几个文件才能正常； 1，用XCODE打开自己项目的xcodeproj，在Runner中新建group（文件夹），起名为Loaders，将示例工程中的Loaders里的所有文件移动到这里，然后就ok了

alibaba / power_image