flutter FittedBox内的文本没有正确对齐,

monwx1rj  于 4个月前  发布在  Flutter
关注(0)|答案(8)|浏览(67)

重现步骤

  1. iOS 16,系统设置——>显示——>缩放显示——>更大字体
  2. 从Flutter 3.19版本开始到最新版本Flutter3.22都存在这个问题
    使用FittedBox进行屏幕适配，期望在不同尺寸的屏幕上展示的效果一致，发现了此问题；

文本渲染的单词每一个字符都不在一条基准线上

(英文翻译)
  1. iOS 16, System Settings -> Display -> Zoom Display -> Larger Font
  2. 从Flutter 3.19到最新版本Flutter3.22都存在这个问题
    使用FittedBox进行屏幕适配，我们期望在不同尺寸的屏幕上展示的效果一致，并发现了此问题；
    每个渲染文本单词的字符都不在同一基准线上

预期结果

实际结果

代码示例

代码示例

MediaQuery(
      data: MediaQuery.of(context)
          .copyWith(textScaler: TextScaler.noScaling, boldText: false),
      child: FittedBox(
        fit: BoxFit.scaleDown,
        child: Container(
          width: 375,
          color: Colors.white,
          alignment: Alignment.center,
          child: const Text(
            "Not sure if you have an account? Enter your email and we'll check for you.",
            style: TextStyle(
              fontSize: 13,
              color: Colors.black,
              decoration: TextDecoration.none,
              fontWeight: FontWeight.w400,
              height: 1.5,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    )

截图或视频

截图/视频演示
[上传媒体在这里]

日志

  • 无响应*

Flutter Doctor输出

医生输出

[✓] Flutter (Channel stable, 3.19.4, on macOS 14.3.1 23D60 darwin-x64, locale zh-Hans-CN)
• Flutter version 3.19.4 on channel stable at /Users/gkb/fvm/versions/3.19.4
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 68bfaea224 (3 months ago), 2024-03-20 15:36:31 -0700
• Engine revision a5c24f538d
• Dart version 3.3.2
• DevTools version 2.31.1
• Pub download mirror https://pub.flutter-io.cn
• Flutter download mirror https://storage.flutter-io.cn

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
• Android SDK at /Users/gkb/Library/Android/sdk
• Platform android-34, build-tools 31.0.0
• ANDROID_HOME = /Users/gkb/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
• Xcode at /Applications/Xcode15.app/Contents/Developer
• Build 15C500b
• CocoaPods version 1.15.2

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.2)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.88.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.90.0

[✓] Connected device (4 available)            
• iPhone 8 (mobile)    • 22b25608cfe4991a38a9428c0800be9917ce91b1 • ios            • iOS 16.6.1 20G81
flutter

8条答案

按热度按时间
kknvjkwl

kknvjkwl1#

我设置了显示缩放如下：
设置 > 显示与亮度 > 显示缩放 > 缩放
然后我在Android和iOS应用的测试中看到了以下结果。

  • 使用给定的示例代码和textScaler: TextScaler.noScaling:问题出现
  • 移除具有textScaler: TextScaler.noScaling的MediaQuery:问题出现
  • 移除FittedBox:问题不出现

flutter doctor -v (稳定版和主分支)

[✓] Flutter (Channel stable, 3.22.2, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.22.2 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 761747bfc5 (31 hours ago), 2024-06-05 22:15:13 +0200
    • Engine revision edd8546116
    • Dart version 3.4.3
    • DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode15.3.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)

[✓] VS Code (version 1.89.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.90.0

[✓] Connected device (3 available)
    • iPhone (mobile) • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.8 19H370
    • macOS (desktop) • macos                                    • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)    • chrome                                   • web-javascript • Google Chrome 125.0.6422.142

[✓] Network resources
    • All expected network resources are available.

• No issues found!
[!] Flutter (Channel master, 3.23.0-13.0.pre.212, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.23.0-13.0.pre.212 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7b6d667701 (4 hours ago), 2024-06-12 19:34:52 -0400
    • Engine revision c7fcbfce60
    • Dart version 3.5.0 (build 3.5.0-250.0.dev)
    • DevTools version 2.36.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode15.3.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)

[✓] VS Code (version 1.90.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.90.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 125.0.6422.142

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
赞(0）分享  回复(0）举报  4个月前
vd8tlhqk

vd8tlhqk2#

cc @LongCatIsLooong for TextScaler

赞(0）分享  回复(0）举报  4个月前
fruv7luv

fruv7luv3#

这看起来不像是一个框架问题，因为框架无法控制单个字形的定位。
根据示例代码，我猜测这是一个渲染问题(在我的Android设备上无法重现这个问题)。
@huycozy,你介意分享一下在Android设备上发生这种情况的屏幕截图吗？我在Android测试设备上运行这段代码时，没有看到波浪形的文字。
@Doris1994,你是否使用了impeller?
啊，现在我看到了标题的变化。我认为问题是关于波浪形文字而不是缩放。

赞(0）分享  回复(0）举报  4个月前
vktxenjb

vktxenjb4#

@LongCatIsLooong 以下是在给定示例代码上的Android和iOS的演示；我将字体大小和显示大小都增加到了最大值，但文本没有缩放。

演示 Android 截图
| 设置 | Android |
| ------------ | ------------ |
|

|

|
但是再次检查后，我认为我错了。这里的实际问题是关于 text alignment(您更新的新标题)。
的确，在Android上文本对齐得很好(如我的演示截图),但在iOS上显示为锯齿状(在Flutter稳定版3.22.2上)。幸运的是，它似乎已经修复了，因为我不再看到了。

演示 iOS (3.22.2)
| 设置 | iOS |
| ------------ | ------------ |
|

|

|演示 iOS (master 3.23.0-13.0.pre.261)

赞(0）分享  回复(0）举报  4个月前
eqzww0vc

eqzww0vc5#

是的，仅在iOS设备上存在一个问题，即启用了叶轮渲染。

赞(0）分享  回复(0）举报  4个月前
kxeu7u2r

kxeu7u2r6#

@huycozy Just verified on flutter channel master, 3.23.0-13.0.pre.277, the text display is normal.

赞(0）分享  回复(0）举报  4个月前
mqxuamgl

mqxuamgl7#

是否有办法知晓是哪些提交和变更修复了此问题呢？等待3.23的稳定版还有很长一段时间，想在最小的变更下，尽快更新App解决此问题以降低对App使用者的影响，万分感谢~

(翻译结果)
是否有办法知道是哪些提交和变更修复了这个问题？距离3.23稳定版发布还有很长时间。我想在尽可能小的变更下尽快更新App来解决这个问题，以减少对App用户的影响。非常感谢！

赞(0）分享  回复(0）举报  4个月前
at0kjp5o

at0kjp5o8#

您可以尝试在Flutter 3.22.2和master 3.23.x之间执行git bisect命令，以找到修复的提交。如果需要，还可以提交一个CP request请求进行热修复。

赞(0）分享  回复(0）举报  4个月前
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com