如何在 Jetpack Compose 中将图像从一个可组合 function 传递到另一个？

Question

我正在开发一个带有文本和图像的应用程序。 在一个可组合项（活动）上，图像看起来很小，就像缩略图一样，与文本并排。 这个想法是：当用户触摸（单击）图像时，导航组件会将用户带到另一个可组合项（活动）中该图像的全屏版本。 有可能吗？ 如果是，如何？ 提前致谢。

Answer 1

你应该传递一些东西来识别图像，而不是传递图像本身。 例如：

• 如果您从资源文件夹加载图像，您应该传递资源 ID（即R.drawable.your_image ）；
• 如果您使用assets文件夹或一些远程 URL，您应该传递图像Uri （即/path_in_assets/your_image或https://foo.bar/your_image ）。

然后从“ListActivity”，您可以使用Intent extras 将图像 ID 传递给下一个活动。

startActivity(
    Intent(context, DetailsActivity::class.java).apply {
        putExtra("imageId", yourImageId) // resource ID or image URL
    }
)

在“DetailsActivity”中，在onCreate方法内，您将获得图像 ID 并正确加载它...

class DetailsActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // for uri ID
        val imageId = intent.getStringExtra("imageId")
        // for resource ID
        val imageId = intent.getIntExtra("imageId", -1)

        setContent {
            YourAppTheme {
                YourScreen(imageId)
            }
        }
    }
}

最后，在您的可组合项中，您可以使用以下方法根据资源 ID 加载图像：

Image(painter = painterResource(id = imageId), contentDescription = null)

或将Coil用于 URL 资源：

Image(painter = rememberAsyncImagePainter(imageId), contentDescription = null)