flutter如何解决image_cropper变成沉浸式的问题

我在使用Flutter的image_cropper插件时遇到了一个问题：当图片裁剪界面打开后，系统状态栏和导航栏变成了沉浸式（半透明覆盖在界面上），导致裁剪区域被遮挡。我尝试过设置SystemChrome.setSystemUIOverlayStyle来调整UI样式，但效果不理想。请问有没有办法能彻底解决这个问题，让裁剪界面正常显示而不被系统栏遮挡？或者有没有其他推荐的图片裁剪插件可以避免这种情况？

2 回复

在pubspec.yaml中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  image_cropper: ^3.0.2

使用ImageCropper.cropImage()时，设置uiSettings参数：

uiSettings: [
  AndroidUiSettings(
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.light,
  ),
  IOSUiSettings(
    statusBarHidden: true,
  ),
]

即可解决沉浸式问题。

更多关于flutter如何解决image_cropper变成沉浸式的问题的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用image_cropper插件时，如果遇到裁剪界面变成沉浸式（状态栏和导航栏透明）的问题，可以通过以下方法解决：

解决方案：

  1. 在Android中设置非沉浸式主题：

    • 修改 android/app/src/main/res/values/styles.xml 文件，确保主题不是全屏或沉浸式。
    • 示例代码：
      <style name="NormalTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:windowFullscreen">false</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
    • 在 AndroidManifest.xml 中应用此主题到裁剪Activity：
      <activity
    android:name="com.yalantis.ucrop.UCropActivity"
    android:theme="@style/NormalTheme" />

  2. 在iOS中调整状态栏样式：

    • 在 ios/Runner/Info.plist 中添加以下键值对，禁用全屏：
      <key>UIViewControllerBasedStatusBarAppearance</key>
<true/>
    • 在Flutter代码中设置状态栏样式（可选）：
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

  3. 使用image_cropper时传递参数：

    • 在调用 ImageCropper.cropImage() 时，通过 androidUiSettings 和 iosUiSettings 明确设置界面样式：
      final croppedFile = await ImageCropper().cropImage(
  sourcePath: imagePath,
  androidUiSettings: const AndroidUiSettings(
    toolbarTitle: '裁剪图片',
    statusBarColor: Colors.white, // 设置状态栏颜色
    toolbarColor: Colors.white,
    toolbarWidgetColor: Colors.black,
    initAspectRatio: CropAspectRatioPreset.original,
    lockAspectRatio: false,
  ),
  iosUiSettings: const IOSUiSettings(
    title: '裁剪图片',
    doneButtonTitle: '完成',
    cancelButtonTitle: '取消',
  ),
);

说明：

  • 以上方法通过修改原生配置和插件参数，确保裁剪界面以非沉浸式显示。
  • 如果问题持续，检查Flutter和image_cropper版本兼容性，或尝试更新插件。

通过这些调整，可以解决image_cropper界面沉浸式的问题。

回到顶部