Android Jetpack Compose：所有行项目都不会在较小的屏幕上呈现

Question

我仍然掌握着 Android 的 Jetpack Compose 声明式 UI 库的窍门，希望能得到一些帮助。该列（包含图像“图标”和文本）根本不会在较小的屏幕上呈现。这是相关代码-->

@Composable
fun ComposableExample() {
...
ScrollableColumn(modifier = Modifier.fillMaxWidth()) {
    // Scrollable column should have one child.
    Column {
        
        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            
            Text(text = "This is the Title of the Video")
            
            //--------- This column is rendering on wider (tablet+) screens but not phone sized screens.
            Column(horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier.fillMaxWidth()) {
                Image(imageResource(id = R.drawable.icon_download_arrow),
                    modifier = Modifier.preferredSize(20.dp)
                        .clickable(onClick = { }))
                Text(text = "Download")
            }
            // ---------
            
        }
            ...
    }
}
}

我尝试了很多不同的 modifiers/permutations，但无法让该列在较小的屏幕上呈现。非常感谢您的帮助，谢谢！

Answer 1

只需交换列和文本即可，即在视频标题之前呈现图标图像和文本的可点击列。不完全确定为什么会这样，但确实如此！

Android Jetpack Compose：所有行项目都不会在较小的屏幕上呈现

Android Jetpack Compose: All row items not rendering on smaller screens

android

android-layout

kotlin

android-jetpack

android-jetpack-compose