英文:
How to make a composable screen scale to different phones (screen) sizes in jetpack compose?
问题
我正在尝试创建一个可组合项，可以根据使用的手机屏幕类型将其内容按比例缩放到合适的大小，注意：不依赖于其他类型的设备（例如iPad、计算机屏幕等）。我如何在Jetpack Compose中实现这一点？感谢帮助！
模拟器屏幕（Pixel 4a API 33）：https://gyazo.com/5343ea42d8cbaf3d62b9ac57480157e6
手机屏幕（三星S9）：https://gyazo.com/0aee7c6a9757d78ed540df0b855ce1ff
模拟器屏幕（Pixel 3 API 34）：https://gyazo.com/21875fdb01e1a1b6709efbf28e4ca91d
如您所见，按钮的大小有轻微差异。现在可能在其他手机变体上也会有更多差异。
有没有办法使其在其他设备上更一致地缩放？
英文:
I am trying to create a composable that can work for each screen by scaling its content to the appropriate size depending on the type of phone screen used. Note: Not dependent on other types of devices (ex. ipads, computer screens etc.) How can I achieve this in jetpack compose? Appreciate the help!
Emulator screen (Pixel 4a API 33): https://gyazo.com/5343ea42d8cbaf3d62b9ac57480157e6
Phone Screen (Samsung S9): https://gyazo.com/0aee7c6a9757d78ed540df0b855ce1ff
Emulator Screen (Pixel 3 API 34): https://gyazo.com/21875fdb01e1a1b6709efbf28e4ca91d
As seen there is a slight difference in the button's size. Now there might be more differences across other variants of phones.
Is there a way to make it scale more consistently across other devices?
答案1
得分: 2
我在您提供的文本中找不到需要翻译的代码部分，只有以下翻译好的内容：
"我在您提供的界面上没有看到太大的区别，但以下是一个很好的遵循原则：
> 有时，我们有一些只具有固定大小的可组合件。但很多时候我们也不会这样。在这些情况下，避免使用硬编码的DP值来定义可组合件的尺寸，而是使用填充最大大小（fillMaxSize()）、权重（weight()）或宽度设置（widthIn()）等修饰符来使用相对大小。
所以，与其使用 Button 的 300.dp，因为它在您的测试手机上看起来很酷/正确/漂亮，它可能在其他手机上看起来不好，甚至只有一半被呈现，因为它们具有较小的屏幕（旧手机）或较大的屏幕（新手机）。
而不是：
@Composable
fun LoginScreen(){
//一些代码，例如（电子邮件和密码文本字段）
Button(
onClick={ //做某事 },
modifier = Modifier.width(300.dp)
){
Text(....)
}
}
您可以使用以下方式：
@Composable
fun LoginScreen(){
//一些代码，例如（电子邮件和密码文本字段）
Button(
onClick={ //做某事 },
modifier = Modifier.fillMaxWidth()
){
Text(....)
}
}
现在，您可以根据需要调整 fillMaxWidth 的值，UI 在所有屏幕上都将具有相同的比例。
注意：当讨论不同尺寸的手机时，如果要考虑您的UI支持不同的设备（平板电脑、可折叠设备、桌面等），我强烈建议查看自适应布局的文档。"
英文:
I don't see that much of diffirence in your provided UIs but here is a good rule of thumb to follow:
> Sometimes, we have composable that just have a fixed size. But very
> often we also don’t. In these cases, avoid using hardcoded DP values
> for a composable’s dimensions and switch to relative sizes using
> modifiers such as fillMaxSize(), weight() or widthIn().
so like instead of having a Button of 300.dp because it looks cool/right/great on your test phone, it may not look good or even half rendred on other phones because they have small screens(old phones) or big screens(newer phones).
instead of having :
@Composable
fun LoginScreen(){
//some code e.g(email and password TextFields)
Button(
onClick={ //do Something },
modifier = Modifier.width(300.dp)
){
Text(....)
}
}
you want to have this:
@Composable
fun LoginScreen(){
//some code e.g(email and password TextFields)
Button(
onClick={ //do Something },
modifier = Modifier.fillMaxWidth()
){
Text(....)
}
}
and now you could play with the value of fillMaxWidth as you want and the UI will have the same scale on all screen.
Note: this is aplicable when talking about diffirent sizes of phones if you want to consider your UI to support diffirent devices(Tablets, Foldables, Desktop...) I highly recommende cheking the documentation for Adaptive Layouts
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论