Что эквивалентно расширенному виджету Flutter в Jetpack Compose?
Я новичок в этом, и я хочу создать простое приложение для визитных карточек, подобное этому:
Чтобы добиться этого макета, я хочу создать два основных: один для верхней части (логотип с именем и заголовком) и один для нижней части экрана (контактные данные). Я хочу, чтобы первый занимал все оставшееся пространство экрана, поэтому нижний идет в конец страницы. ВFlutter
я бы поставил обаColumns
в родителя и обернуть первыйColumn
сExpanded
, и это сделает работу. Итак, как добиться такого же поведения вJetpack Compose
? Код выглядит следующим образом:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
BusinessCardTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
BusinessCard()
}
}
}
}
}
@Composable
fun LogoNameTitle() {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
Image(
painter = painterResource(id = R.drawable.android_logo),
contentDescription = "",
)
Text("Jennifer Doe", color = Color.White)
Text("Android Developer Extraordinaire", color = Color.Green)
}
}
@Composable
fun ContactInformation() {
Column() {
Row() {
Icon(imageVector = Icons.Rounded.Phone, contentDescription = "", tint = Color.Green)
Text("+11 (123) 444 555 666", color = Color.White)
}
Row() {
Icon(imageVector = Icons.Rounded.Share, contentDescription = "", tint = Color.Green)
Text("@AndroidDev", color = Color.White)
}
Row() {
Icon(imageVector = Icons.Rounded.Email, contentDescription = "", tint = Color.Green)
Text("jen.doe@android.com", color = Color.White)
}
}
}
@Composable
fun BusinessCard() {
Surface(color = Color.DarkGray) {
Column(
modifier = Modifier.padding(16.dp)
) {
LogoNameTitle()
ContactInformation()
}
}
}
@Preview(showBackground = true, showSystemUi = true)
@Composable
fun BusinessCardPreview() {
BusinessCardTheme {
BusinessCard()
}
}
И текущий вывод: