我一直在尝试从底部到中心对齐列中的按钮有一段时间了，但我无法成功。
听是我代码：
NutritionHabitsScreen
@Composable
fun NutritionHabitsRoute(
navHostController: NavHostController,
sharedViewModel: SharedViewModel,
viewModel: NutritionHabitsViewModel = hiltViewModel()
) {
val state by viewModel.state.collectAsState()
NutritionHabit(
navHostController = navHostController,
sharedViewModel = sharedViewModel,
state = state,
buttonEnabled = viewModel::buttonEnabled
)
}
@Composable
fun NutritionHabit(
navHostController: NavHostController,
sharedViewModel: SharedViewModel,
state: NutritionHabitsScreenState,
buttonEnabled: (MutableList<Int>, MutableList<Int>) -> Unit
) {
val firstChoicesItems = sharedViewModel.registerItems?.choices?.get(0)?.items
val secondChoicesItems = sharedViewModel.registerItems?.choices?.get(1)?.items
var firstSelectedIndexes = remember { mutableListOf<Int>() }
var secondSelectedIndexes = remember { mutableListOf<Int>() }
Scaffold(
topBar = { BackPopUp(navController = navHostController, route = null) },
backgroundColor = Color.Transparent
) {
Column(
modifier = Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState())
) {
CustomText(
padding = 15.dp,
text = sharedViewModel.registerItems!!.choices[0].title ?: "",
textStyle = MaterialTheme.typography.h3
)
firstChoicesItems?.let {
it.forEachIndexed { index, element ->
CustomButton(
selectedIndexes = firstSelectedIndexes,
index = index,
borderDp = 2.dp,
textPadding = 15.dp,
topPadding = 5.dp,
bottomPadding = 5.dp,
startPadding = 15.dp,
endPadding = 15.dp,
text = firstChoicesItems[index].key ?: "",
selectedBorderColor = DefaultDYTColor,
unselectedBorderColor = MaterialTheme.colors.grayColor,
onSelected = { list ->
firstSelectedIndexes = list
buttonEnabled(firstSelectedIndexes, secondSelectedIndexes)
}
)
}
}
CustomText(
padding = 15.dp,
text = sharedViewModel.registerItems!!.choices[1].title ?: "",
textStyle = MaterialTheme.typography.h3
)
secondChoicesItems?.let {
it.forEachIndexed { index, items ->
CustomButton(
selectedIndexes = secondSelectedIndexes,
index = index,
borderDp = 2.dp,
textPadding = 15.dp,
topPadding = 5.dp,
bottomPadding = 5.dp,
startPadding = 15.dp,
endPadding = 15.dp,
text = secondChoicesItems[index].key ?: "",
selectedBorderColor = DefaultDYTColor,
unselectedBorderColor = MaterialTheme.colors.grayColor,
onSelected = { list ->
secondSelectedIndexes = list
buttonEnabled(firstSelectedIndexes, secondSelectedIndexes)
}
)
}
}
DYTLoginAndContinueButton(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
text = stringResource(id = R.string.devam),
navController = navHostController,
route = null,
enabled = state.buttonEnabled
) {}
}
}
}自定义按钮
@Composable
fun DYTLoginAndContinueButton(
modifier:Modifier,
text: String,
navController: NavController?,
route: String?,
enabled: Boolean,
onClick: () -> Unit
) {
Button(
onClick = {
onClick()
if(navController != null && route !=null)
navController.navigate(route)
},
modifier = modifier,
enabled = enabled,
elevation = ButtonDefaults.elevation(0.dp, 0.dp),
colors = ButtonDefaults.buttonColors(backgroundColor = DefaultDYTColor),
shape = RoundedCornerShape(25.dp)
) {
Text(
modifier = Modifier.padding(8.dp),
text = text,
textAlign = TextAlign.Center,
style = MaterialTheme.typography.button,
color = Color.White
)
}
}正如你所看到的，在列中有多个组件，并且在底部有一个我创建的自定义按钮DYTLoginAndContinueButton，我想将其对齐到屏幕的底部中心。我尝试了一些东西，当我成功的时候，它发生了，但由于某种原因，按钮在小屏幕上是不可见的，我不明白为什么。这是我的代码的最新版本目前，在大屏幕上，它不会出现在屏幕底部的中心对齐，而在小屏幕上，它似乎被本地化到了最后，因为屏幕已经很小了。我希望它在小屏幕和大屏幕上都能正确地出现在屏幕底部的中心。有人有什么建议吗？
2条答案
按热度按时间qij5mzcb1#
你必须使用不同的东西。你不能把
Button放在Column和verticalScroll。将Button移到Column之外，然后只对同一列应用weight修改器。类似于：
eivgtgni2#
添加
在DYTLoginAndContinueButton上方的列中，将使按钮转到大屏幕上的屏幕底部。在较小的屏幕上看不到它的问题可能是firstChoicesItem和secondChoicesItem占据了大部分屏幕，要看到按钮，您必须向下滚动。如果你想让它在底部对齐而不滚动，你可以这样做。