Jetpack Compose Text и Image перекрываются внутри проблемы с макетом столбца

Question

Я использую Jetpack Composeдля разработки динамического макета внутри приложения для Android. layout используется для размещения таких элементов, как layout. Такое поведение достигается с помощью LinearLayoutориентация Verticalиспользование без сочинения. Внутри столбца я добавил один сверху и один текст, который я хочу отобразить под ним. Но после размещения текста внутри макета Compose он перекрывается. Как это решить. Код для добавления Imageа также Textсоставляет

      @Composable
fun GreetingSectionExperimental(
    name: String = "Philipp"
) {
    //var text by remember { mutableStateOf(TextFieldValue("")) }
    Column(
        verticalArrangement = Arrangement.Top,
        modifier = Modifier.fillMaxSize()
    ) {
        Image(
            painterResource(id = R.drawable.ic_launcher_background),
            modifier = Modifier
                .fillMaxWidth()
                .height(80.dp).offset(0.dp,35.dp),
            alignment = Alignment.Center,
            contentDescription = ""
        )
        Text(
            text = "Login / Sign Up",
            Modifier.padding(10.dp).align(CenterHorizontally),
            color = textColor, fontSize = 18.sp,
            fontWeight = FontWeight.SemiBold
        )
    }
}

Я получаю вывод как

Как это решить? Внутри тока чего не хватает или Columnне поддерживает различные виды элементов.

Answer 1

Вам нужно удалить свойство «Смещение» из вашего изображения, код должен выглядеть так

      @Composable
fun GreetingSectionExperimental(
    name: String = "Philipp"
) {
    //var text by remember { mutableStateOf(TextFieldValue("")) }
    Column(
        verticalArrangement = Arrangement.Top,
        modifier = Modifier.fillMaxSize()
    ) {
        Image(
            painterResource(id = R.drawable.ic_launcher_background),
            modifier = Modifier
                .fillMaxWidth()
                .height(80.dp), //Remove the offset here
            alignment = Alignment.Center,
            contentDescription = ""
        )
        Text(
            text = "Login / Sign Up",
            Modifier.padding(10.dp).align(CenterHorizontally),
            color = textColor, fontSize = 18.sp,
            fontWeight = FontWeight.SemiBold
        )
    }
}

Answer 2

Лучшее решение - использовать Spacer(modifier = Modifier.height(20.dp)). Это создаст пространство между теми элементами, которые между этим добавлены.