简体   繁体   English

Flutter 是否会忽略给定的尺寸以使用它想要的任何尺寸?

[英]Does Flutter ignore given sizes to use whatever size it wants?

I have built my app onto an iPhone 8.我已经在 iPhone 8 上构建了我的应用程序。

I have a column of widgets and some of these widgets are instances of SizedBox of a given height.我有一列小部件,其中一些小部件是给定高度的SizedBox实例。 I will tell one SizedBox to have a height of 24 .我会告诉一个SizedBox的高度为24 However when it runs the actual height is 48 .但是,当它运行时,实际高度为48

Is it a thing that Flutter multiplies every measurement by 2, which in this case is coincidentally the same as the scale factor of the phone? Flutter 是否将每个测量值乘以 2,在这种情况下巧合地与手机的比例因子相同? Or does it just multiply all SizedBoxes by 2 regardless of the scale factor and being twice the desired height coincidentally corresponds to the scale factor?或者它只是将所有 SizedBoxes 乘以 2 而不管比例因子如何,并且两倍于所需高度恰好对应于比例因子?

This is the code used to make the SizedBox:这是用于制作 SizedBox 的代码:

SizedBox(height: 24),

On an iPhone with 2x scale (iPhone 8) then the 24 becomes 48. On a phone with 3x scale (iPhone 13 Pro Max) then the 24 becomes 72.在具有 2 倍比例的 iPhone (iPhone 8) 上,24 变为 48。在具有 3 倍比例的手机 (iPhone 13 Pro Max) 上,24 变为 72。

How it's used is like this:它的使用方法是这样的:

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,
                ),
              ),
            ],
          ),
        ),
      ),
    );

Can you give us some code example?你能给我们一些代码示例吗? And what are the results on both Android phones and smaller/larger iPhone phones? Android 手机和更小/更大的 iPhone 手机的结果如何?

Although according to official apple documentation https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/ scale factor exists and does multiply by x2 or x3 even with high pixel density phones, that should not affect your overall UI layout.虽然根据苹果官方文档https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/比例因子存在并且确实乘以 x2 或 x3即使使用高像素密度手机,这也不应该影响您的整体 UI 布局。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM