Android compose需要在UI顶部放置一个constraintlayout

Question

我在jetpack Compose上迈出了第一步，目前我正在使用Card(和其他组件布局)开发一个类似recyclerview的列表。对于我的应用程序，我有一个xml包含布局的类型是constrantlayout，我需要这个是在UI的顶部。

下面是我当前的代码:

package com.example.cvdriskestimator.Fragments

class leaderBoardActivity : ComponentActivity() {
private var participantNames = ArrayList<String>()
private var participantAvatars = ArrayList<Drawable>()

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Scaffold() {
ConstraintCompose()
participantList()
}
}

}
@Composable
fun ConstraintCompose() {
ConstraintLayout(modifier = Modifier
.fillMaxHeight()
.fillMaxWidth()) {
val (medAppLayoutRefId) = createRefs()
Box(modifier = Modifier.constrainAs(medAppLayoutRefId)
{
top.linkTo(parent.top, 0.dp)
})
{
AndroidView(
{ context: Context ->
val view = LayoutInflater.from(context)
.inflate(R.layout.cvd_title_form, null, false)
// do whatever you want...
view // return the view
}
)
}
}
}

@Preview
@Composable
fun participantList()
{
Row(modifier = Modifier
.clip(RoundedCornerShape(10.dp))
.background(MaterialTheme.colors.surface))
{
val scrollState = rememberLazyListState()
LazyColumn(state = scrollState, modifier = Modifier.border( 5.dp, Color.DarkGray , shape = RoundedCornerShape(60.dp))){
items(participantList)
{
participant ->
run {
participantCard(
participantList.indexOf(participant) ,
userName = participant.participantName,
participantImage = participant.participantDrawable
)
}
}
}
}
}
@Composable
fun participantCard(
userID : Int ,
userName : String , participantImage : Int)
{
Card(elevation = 5.dp ,
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.padding(5.dp)
)
{
Row(modifier = Modifier
.padding(5.dp)
.fillMaxWidth()
.wrapContentHeight() ,
horizontalArrangement = Arrangement.Center ,
verticalAlignment = Alignment.CenterVertically ,
)
{
Text( color = Color.Black , fontSize = 20.sp , fontFamily = FontFamily.Default ,  textAlign = TextAlign.Center ,
text = userID.toString() + ". " + userName )
Image(painterResource(id = participantImage),  contentDescription = "participant image" , modifier = Modifier
.size(20.dp, 20.dp)
.clip(
CircleShape
)   )

Box(modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.padding(5.dp, 0.dp, 0.dp, 5.dp))
{
Text(color = Color.Black, fontSize = 20.sp, modifier =
Modifier
.border(2.dp, Color.Gray)
.padding(10.dp) , text = "Score : " + setParticipantScore(userID ).toString())
}
Image(painterResource(id = R.drawable.ic_trophy) , contentDescription = "Participant Trophy"
, modifier = Modifier.size(20.dp , 20.dp))
}
}
}

private fun setParticipantScore(id : Int) : Int
{
return ((10000) - (id * 500))
}
val participantList = listOf<participant>(
participant("Lampros " , R.drawable.avatar) ,
participant("Chris" , R.drawable.avatar_b) ,
participant("Dimitris" , R.drawable.beard) ,
participant("Kostas" , R.drawable.boy) ,
participant("Panagiotis" , R.drawable.gamer) ,
participant("Nikoleta" , R.drawable.woman) ,
participant("Dimitra" , R.drawable.womanb) ,
participant("Kyriakos" , R.drawable.man_a) ,
participant("Giannis" , R.drawable.man_b)
)
data class participant(
var participantName : String ,
var participantDrawable : Int
)
}

作为输出，虽然我只得到卡列表，所以我猜有一些问题，我如何定义约束布局，并以编程方式使用它?当我单独预览ConstraintCompose的功能时，我可以看到UI布局中出现的布局。

任何帮助都是感激的。

消息

Answer 1

我从你的问题中理解到，你想把你的ConstraintCompose作为列表的标题(当你滚动列表时滚动)

有一个非常简单的方法来做到这一点，添加ConstraintCompose()作为一个项目在您的LazyColumn

@Preview
@Composable
fun participantList()
{
Row(modifier = Modifier
.clip(RoundedCornerShape(10.dp))
.background(MaterialTheme.colors.surface))
{
val scrollState = rememberLazyListState()
LazyColumn(state = scrollState, modifier = Modifier.border( 5.dp, Color.DarkGray , shape = RoundedCornerShape(60.dp))){
// Your Constraint Compose here
item {
ConstraintCompose()
}
items(participantList) { participant ->
run {
participantCard(
participantList.indexOf(participant) ,
userName = participant.participantName,
participantImage = participant.participantDrawable
)
}
}
}
}
}

如果你想让标题具有粘性，你可以把它添加到列中，比如

下面

Column() {
ConstraintCompose()
participantList()
}