Compose 搜索框

hehui0921

已于 2024-08-28 13:03:47 修改

阅读量177

点赞数 1

分类专栏： android13 文章标签： android

于 2024-08-28 12:22:35 首次发布

本文链接：https://blog.csdn.net/oHeHui1/article/details/141637696

版权

android13 专栏收录该内容

80 篇文章 1 订阅

订阅专栏

@Composable
fun CustomStyledTextField(
) {
    var text by remember { mutableStateOf("搜索") }
    // Define the text style with desired font size
    val textStyle = TextStyle(
        fontSize = 8.sp, // Set the font size here
        fontWeight = FontWeight.Normal // You can adjust font weight as needed
    )

    Box(
        modifier = Modifier
            .size(374.dp.px(), 50.dp.px())
            .background(Color(0xffffff00), shape = RoundedCornerShape(15))
//            .border(0.dp, Color.Gray, shape = RoundedCornerShape(8.dp))
            .padding(1.dp).padding(start = 2.dp)
    ) {
        BasicTextField(
            textStyle = textStyle,
            value = text,
            onValueChange = {
                text = it
            },
//            modifier = Modifier.fillMaxWidth(),
            singleLine = true,
            decorationBox = { innerTextField ->
                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    // Place the text field
                    Box(modifier = Modifier.weight(1f)) {
                        innerTextField()
                    }
//                    Image(
//                        painter = painterResource(id = R.drawable.search_icon),
//                        contentDescription = "Vector Image Example",
//                        modifier = Modifier.size(70.dp.px(),42.dp.px()) // Adjust size if needed
//                    )
                    // Add an icon at the end
                    Icon(
                        imageVector = Icons.Default.Search,
                        contentDescription = "Search Icon",
                        modifier = Modifier.size(24.dp)
                    )
                }
            }
        )
    }
}

在这里插入图片描述

@Composable
fun CustomStyledTextField(
) {
    var text by remember { mutableStateOf("搜索") }
    // Define the text style with desired font size
    val textStyle = TextStyle(
        fontSize = 8.sp, // Set the font size here
        fontWeight = FontWeight.Normal // You can adjust font weight as needed
    )

    Box(
        modifier = Modifier
            .size(374.dp.px(), 50.dp.px())
            .background(Color(0x66ffffff), shape = RoundedCornerShape(15))
//            .border(1.dp, Color.Gray, shape = RoundedCornerShape(1.dp))
            .padding(1.dp)
            .padding(start = 2.dp)
    ) {
        BasicTextField(
            textStyle = textStyle,
            value = text,
            onValueChange = {
                text = it
            },
            singleLine = true,
            decorationBox = { innerTextField ->
                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    // Place the text field
                    Box(modifier = Modifier.weight(1f)) {
                        innerTextField()
                    }
                    // Add an icon at the end
                    Box(modifier = Modifier.background(Color.Blue, shape = RoundedCornerShape(15)).clickable {  }) {
                        Icon(
                            imageVector = Icons.Default.Search,
                            tint = Color.White,
                            contentDescription = "Search Icon",
                            modifier = Modifier.size(24.dp)
                        )
                    }
                }
            }
        )
    }
}