我试图创建一个可合成的,可以通过zoom 其内容到适当的大小,根据使用的手机屏幕的类型,每个屏幕的工作.注意:不依赖于其他类型的设备(例如IPad、计算机屏幕等)我如何在Jetpack Composure中实现这一点?感谢你的帮助!

模拟器屏幕(Pixel 4a API 33):https://gyazo.com/5343ea42d8cbaf3d62b9ac57480157e6

手机屏幕(三星S9):https://gyazo.com/0aee7c6a9757d78ed540df0b855ce1ff

仿真器屏幕(Pixel 3 API 34):https://gyazo.com/21875fdb01e1a1b6709efbf28e4ca91d

如图所示,按钮的大小略有不同.现在,其他版本的手机可能会有更多不同之处.

有没有办法让它在其他设备上更一致地进行扩展?

推荐答案

我在您提供的UI中没有看到太多不同之处,但这里有一个很好的经验法则可以遵循:

有时,我们有一个固定大小的合成物.但非常 通常我们也不会.在这些情况下,避免使用硬编码的DP值 ,并切换到相对大小,使用 修饰符,如ill MaxSize()、Weight()或WidthIn().

因此,不是因为你的测试手机看起来很酷/正确/很棒而得到Button分,而是it may not look good or even half rendred on other phones分,因为他们有小屏幕(旧手机)或大屏幕(新手机). 而不是拥有:

@Composable
fun LoginScreen(){
   //some code e.g(email and password TextFields)
   Button(
         onClick={ //do Something },
         modifier = Modifier.width(300.dp)
   ){
      Text(....)
   }
}

你想要这个:

@Composable
fun LoginScreen(){
   //some code e.g(email and password TextFields)
   Button(
         onClick={ //do Something },
         modifier = Modifier.fillMaxWidth()
   ){
      Text(....)
   }
}

现在,您可以随心所欲地使用值fillMaxWidth,而UI将具有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 100

Android相关问答推荐

将Any强制转换为Integer将从API返回NullPointerException

显示本地房间数据库中未保存的项目的动态列表

在Kotlin Jetpack Compose中点击按钮后启动另一个Android应用程序

为什么Ionic-checkbox不总是刷新Android上的视图?

如何删除Jetpack Compose中的Textfield底线

从惰性列中删除项目时Jetpack Compose崩溃

安卓Azure通讯聊天UI库导入?

解决失败:Landroidx/compose/runtime/PrimitiveSnapshotStateKt

Clean MVVM 架构中的 API 响应处理

Android kotlin 中闪屏 API 执行完成后如何根据身份验证将用户导航到特定屏幕

浏览器未命中断点判断 USB 连接设备

Jetpack compose (Glance) 小部件在加载位图图像后不会重新组合

了解 Compose 声明性逻辑

Jetpack compose :使用 rememberSaveable 时未应用待处理的合成

如何在组件之间导航

LazyColumn 单选中的状态提升. Jetpack compose

如何在 react native 应用程序中显示复选框?当它在 android 模拟器中可见时

更改 Android SDK 版本 33 后建议在 xml 布局文件中不起作用

如何在 Jetpack compose 中将 Canvas 中的文本居中?

多个项目 react-native android 构建错误