英文:
Pill Shaped Composable in jetpack compose
问题
以下是翻译好的部分：
我希望实现如下设计。
看起来 Material 3 没有这个作为本机组件。
有没有办法实现这个设计？单选按钮？
编辑
根据 @Megh 的答案，我修改了一些代码以实现如下。
@Composable
fun TabViewSample() {
val selectedOption = remember { mutableStateOf(0) }
val backgroundColor = Color.Red.copy(0.2f)
Row(
modifier = Modifier
.widthIn(max = 600.dp)
.fillMaxWidth()
.padding(start = 20.dp, end = 20.dp, top = 28.dp)
.background(backgroundColor, shape = RoundedCornerShape(25.dp))
.wrapContentHeight(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
val list = listOf<String>("English", "Arabic")
for (i in list.indices) {
ProgressTabView(
modifier = Modifier.weight(1f),
backgroundColor = if (selectedOption.value != i) {
Color.Transparent
} else {
Color.Red
},
onClick = {
selectedOption.value = i
},
titleText = "English",
textColor = Color.White
)
}
}
}
@Composable
fun ProgressTabView(
modifier: Modifier,
backgroundColor: Color,
onClick: () -> Unit,
titleText: String,
textColor: Color,
) {
ElevatedButton(
onClick = {
onClick()
},
colors = ButtonDefaults.buttonColors(
containerColor = backgroundColor,
contentColor = Color.White,
disabledContainerColor = backgroundColor,
disabledContentColor = Color.White
),
modifier = modifier
.padding(2.dp)
.clip(RoundedCornerShape(25.dp))
) {
Text(
text = titleText,
modifier = Modifier
.align(Alignment.CenterVertically)
.padding(8.dp),
color = textColor,
lineHeight = 16.sp,
)
}
}
请注意，这是代码的翻译部分，不包括代码中的变量和注释。
英文:
I am looking to achieve a design like below.
Looks like Material 3 doesn't have this as a native component.
Any idea on how this design can be achieved? Radio Button?
EDIT
Based on the answer by @Megh I have modified some code to achieve the below.
@Composable
fun TabViewSample() {
val selectedOption = remember { mutableStateOf(0) }
val backgroundColor = Color.Red.copy(0.2f)
Row(
modifier = Modifier
.widthIn(max = 600.dp)
.fillMaxWidth()
.padding(start = 20.dp, end = 20.dp, top = 28.dp)
.background(backgroundColor, shape = RoundedCornerShape(25.dp))
.wrapContentHeight(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
val list = listOf<String>("English", "Arabic")
for (i in list.indices) {
ProgressTabView(
modifier = Modifier.weight(1f),
backgroundColor = if (selectedOption.value != i) {
Color.Transparent
} else {
Color.Red
},
onClick = {
selectedOption.value = i
},
titleText = "English",
textColor = Color.White
)
}
}
}
@Composable
fun ProgressTabView(
modifier: Modifier,
backgroundColor: Color,
onClick: () -> Unit,
titleText: String,
textColor: Color,
) {
ElevatedButton(
onClick = {
onClick()
},
colors = ButtonDefaults.buttonColors(
containerColor = backgroundColor,
contentColor = Color.White,
disabledContainerColor = backgroundColor,
disabledContentColor = Color.White
),
modifier = modifier
.padding(2.dp)
.clip(RoundedCornerShape(25.dp))
) {
Text(
text = titleText,
modifier = Modifier
.align(Alignment.CenterVertically)
.padding(8.dp),
color = textColor,
lineHeight = 16.sp,
)
}
}
答案1
得分: 3
请尝试以下代码：
@Composable
fun TabViewSample() {
Row(
modifier = Modifier
.widthIn(max = 600.dp)
.fillMaxWidth()
.padding(start = 20.dp, end = 20.dp, top = 28.dp)
.background(Color.Red.copy(0.2f), shape = RoundedCornerShape(25.dp))
.wrapContentHeight(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
ProgressTabView(
modifier = Modifier.weight(1f),
backgroundColor = //你的颜色,
onClick = {
//你的点击事件要求
},
titleText = "示例文本",
textStyle = //你的文本样式,
textColor = //你的颜色,
)
ProgressTabView(
modifier = Modifier.weight(1f),
backgroundColor = //你的颜色,
onClick = {
//你的点击事件要求
},
titleText = "示例文本",
textStyle = //你的文本样式,
textColor = //你的颜色,
)
}
}
@Composable
fun ProgressTabView(
modifier: Modifier,
backgroundColor: Color,
onClick: () -> Unit,
titleText: String,
textColor: Color,
textStyle: androidx.compose.ui.text.TextStyle,
) {
Box(
modifier = modifier
.padding(2.dp)
.background(
color = backgroundColor,
RoundedCornerShape(25.dp)
)
.motionClickEvent {
onClick()
}
.clip(RoundedCornerShape(25.dp))
) {
Text(
text = titleText,
modifier = Modifier
.align(Alignment.Center)
.padding(8.dp),
color = textColor,
style = textStyle,
lineHeight = 16.sp
)
}
}
示例输出：
英文:
Try out this code:
@Composable
fun TabViewSample() {
Row(
modifier = Modifier
.widthIn(max = 600.dp)
.fillMaxWidth()
.padding(start = 20.dp, end = 20.dp, top = 28.dp)
.background(Color.Red.copy(0.2f), shape = RoundedCornerShape(25.dp))
.wrapContentHeight(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
ProgressTabView(
modifier = Modifier.weight(1f),
backgroundColor = //your color,
onClick = {
//your onClick requirement
},
titleText = "Sample Text",
textStyle = //your textStyle,
textColor = //your color,
)
ProgressTabView(
modifier = Modifier.weight(1f),
backgroundColor = //your color,
onClick = {
//your onClick requirement
},
titleText = "Sample Text",
textStyle = //your textStyle,
textColor = //your color,
)
}
}
@Composable
fun ProgressTabView(
modifier: Modifier,
backgroundColor: Color,
onClick: () -> Unit,
titleText: String,
textColor: Color,
textStyle: androidx.compose.ui.text.TextStyle,
) {
Box(
modifier = modifier
.padding(2.dp)
.background(
color = backgroundColor,
RoundedCornerShape(25.dp)
)
.motionClickEvent {
onClick()
}
.clip(RoundedCornerShape(25.dp))
) {
Text(
text = titleText,
modifier = Modifier
.align(Alignment.Center)
.padding(8.dp),
color = textColor,
style = textStyle,
lineHeight = 16.sp
)
}
}
Sample Output:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论