Выравнивание текста в правом столбце ⇐ Android

[Anonymous]

Я пытаюсь создать приложение для аренды квартир для проекта, в котором для каждой квартиры показаны изображения, название, местоположение, цена и описание.
Вот код файла Kotlin ApartmentListItem.kt, который содержит макет списка квартир и то, как он будет представлен в классе MainApartmentActivity Kotlin:

Код: Выделить всё

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.modifier.modifierLocalMapOf
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.project.R
import com.example.project.data.Apartment

@Composable
fun ApartmentListItem(apartment:  Apartment) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
.background(Color.LightGray, shape = RoundedCornerShape(18.dp))
.padding(16.dp)
) {
Image(
painter = painterResource(id = apartment.apartmentImageId),
contentDescription = "Apartment Image",
modifier = Modifier
.size(200.dp)
.padding(end = 16.dp)
.align(Alignment.Top)
)
Column(
) {
Text(text = apartment.apartmentName, style = MaterialTheme.typography.h5)
Text(text = apartment.apartmentLocation, style = MaterialTheme.typography.subtitle1)
Text(text = apartment.apartmentPrice, style = MaterialTheme.typography.subtitle2)
Text(text = apartment.apartmentDescription, style = MaterialTheme.typography.subtitle2)
}
}
}

@Composable
@Preview
fun PreviewApartmentListItem() {
val apartment = Apartment(
apartmentImageId = R.drawable.apartment_one,
apartmentName = "name",
apartmentLocation = "location",
apartmentID = "1",
apartmentPrice = "100",
apartmentDescription = "Apartment description appears here"
)
Surface(modifier = Modifier.fillMaxSize()) {
ApartmentListItem(apartment = apartment)
}
}

А вот Kotlin-класс ApartmentMainActivity, который вызывает код из ApartmentListItem для вставки необходимой информации о каждой квартире:

Код: Выделить всё

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.example.project.R
import com.example.project.data.Apartment

@Composable
fun MainApartmentViewScreen() {
val apartmentsDetails = remember {
listOf(
Apartment(
"1",
"Apartment, 80 sq.m.",
"Nea Kypseli, Kypseli (Athens - Center)",
"€110.000",
"Apartment For Sale, floor: 2nd, in the area: Kypseli - Fokionos Negri. The area of \u200B\u200Bthe property is 80 sq.m. It consists of: 2 Bedrooms (1 Master), 1 bathroom/s, 1 kitchen/s, 1 living room/s. It was built in 1955. The heating of the property is autonomous with oil.",
R.drawable.apartment_one
),
Apartment(
"2",
"Apartment, 55 sq.m.",
"A Cemetery, Mets - Kallimarmaro (Athens - Center)",
"€€84.000",
"Neos Kosmos Kynosargos FOR SALE apartment on the ground floor interior surface area 55 sq.m. . It consists of 1 bedroom, living room, kitchen, bathroom . It was built in 1970 and has a city view landscape, wooden frames, mosaic and wood floors, built-in wardrobes. Leased until 12/2024.",
R.drawable.apartment_two
),
Apartment(
"3",
"Apartment, 47 sq.m.",
"Ano Kypseli - Evelpidon, Kypseli (Athens - Center)",
"€150.000",
"Kypseli Nea Kypseli FOR SALE renovated apartment on the 2nd floor with a total area of \u200B\u200B47 sq.m. . It consists of 1 bedroom, living room, kitchen, bathroom.  It was built in 1998 with energy class B and renovated in 2023.",
R.drawable.apartment_three
),
Apartment(
"4",
"Apartment, 68 sq.m.",
"Areos Field, Gyzi - Areos Field (Athens - Center)",
"€130.000",
"Quiet, spacious, interior apartment, in a very central location, next to the under construction metro station on Alexandra Avenue for sale. Ideal for investment. The property is very close to the location shown on the map. Apartment For Sale, floor: 2nd, in the area: Gyzi - Pedion Areos - Pedion Areos. The area of \u200B\u200Bthe property is 68 sq.m. and is located on a plot of 500 sq.m. It consists of: 2 bedrooms, 1 bathroom, 1 kitchen, 1 living room. It was built in 1972. The heating of the property is Central with Oil.",
R.drawable.apartment_four
),
Apartment(
"5",
"Apartment, 42 sq.m.",
"Lykavittos, Kolonaki - Lykavittos (Athens - Center)",
"€140.000",
"Exarchia - Neapoli Exarchia NAPOLI FOR SALE renovated furnished mezzanine apartment with a total area of \u200B\u200B42 sq.m. . It consists of 1 bedroom, living room, kitchen, bathroom. It was built in 1970 with energy class E and has individual heating - natural gas, aluminum frames, tile and wood floors, armored door, built-in wardrobes, elevator, A/C, alarm, electrical appliances, screens, double glazing, night current",
R.drawable.apartment_five
)
)
}

Scaffold(
topBar = {
TopAppBar(title = { Text(text = "Apartments List") })
}
) { paddingValues ->
LazyColumn(
contentPadding = paddingValues,
modifier = Modifier.padding(16.dp)
) {
items(apartmentsDetails) { apartment ->
ApartmentListItem(apartment)
Spacer(modifier = Modifier.height(8.dp))
}
}
}
}

Вот как экран выглядит на данный момент. Описание рядом с изображением, начинающееся с «Квартира на продажу» и далее, — это то, что необходимо переместить.

[img]https://i.sstatic. net/9QAxPW8K.png[/img]

Я пытаюсь, чтобы описание отображалось под изображением и выравнивалось по левому краю, но я не знаю, как это сделать.< /p>
Я попробовал использовать код пробелов в файле ApartmentListItem.kt, чтобы описание отображалось под изображением, вот так:

Код: Выделить всё

Column {
Text(text = apartment.apartmentName, style = MaterialTheme.typography.h5)
Text(text = apartment.apartmentLocation, style = MaterialTheme.typography.subtitle1)
Text(text = apartment.apartmentPrice, style = MaterialTheme.typography.subtitle2)
}

Spacer(
modifier = Modifier
.height(10.dp)
.fillMaxWidth()
)
Text(
text = apartment.apartmentDescription,
style = MaterialTheme.typography.body1,
modifier = Modifier.fillMaxWidth(),
)

Но, похоже, оно не появляется на экране, когда я это делаю.
Как мне выровнять описание квартиры, чтобы перейти под изображением каждого элемента?

Вот как я хочу, чтобы экран выглядел:

[img]https://i. sstatic.net/2cSsX5M6.png[/img]
.

Подробнее здесь: https://stackoverflow.com/questions/788 ... ght-column