首页 > 解决方案 > Flutter 是否会忽略给定的尺寸以使用它想要的任何尺寸?

问题描述

我已经在 iPhone 8 上构建了我的应用程序。

我有一列小部件,其中一些小部件是SizedBox给定高度的实例。我会告诉一个SizedBox人有一个高度24。但是,当它运行时,实际高度为48.

Flutter 是否将每个测量值乘以 2,在这种情况下恰好与手机的比例因子相同?或者它只是将所有 SizedBoxes 乘以 2 而不管比例因子如何,并且是所需高度的两倍恰好对应于比例因子?

这是用于制作 SizedBox 的代码:

SizedBox(height: 24),

在 2 倍比例的 iPhone(iPhone 8)上,24 变为 48。在 3 倍比例的手机(iPhone 13 Pro Max)上,24 变为 72。

它的使用方法是这样的:

return Flexible(
      child: Center(
        child: LayoutBuilder(
          builder: (context, constraints) => Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset(StringAsset.logo),
              SizedBox(height: 40),
              Text(
                AppLocalizations.of(context)!.welcomeTitle,
                style: textTheme.h3.copyWith(
                  color: colorScheme.darkBluePrimary,
                ),
                textAlign: TextAlign.center,
              ),
              SizedBox(height: 24),
              SizedBox(
                width: (constraints.maxWidth - 96),
                child:
                Text(
                  AppLocalizations.of(context)!.welcomeDetails,
                  style: textTheme.bodyRegular.copyWith(
                    color: colorScheme.darkBluePrimary,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            ],
          ),
        ),
      ),
    );

标签: iosflutterscreen-density

解决方案


你能给我们一些代码示例吗?Android 手机和更小/更大的 iPhone 手机的结果是什么?

尽管根据苹果官方文档https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/存在比例因子并且确实乘以 x2 或 x3即使使用高像素密度的手机,这也不应该影响您的整体 UI 布局。


推荐阅读