我试图设计一个搜索栏,像谷歌搜索栏的高度降低。但输入文本被裁剪,也占位符文本。
TextField(
value = searchText.value,
singleLine = true,
onValueChange = {
searchText.value = it
},
placeholder = { //placeholder text is also getting cropped
Text(
text = "Search",
fontSize = 20.sp,
)
},
textStyle = TextStyle(fontSize = 20.sp), // input text is getting cropped
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 10.dp)
.height(45.dp), // Here I have decreased the height
shape = RoundedCornerShape(22.dp),
)
我的输入文本和占位符文本被裁剪了50%。如何解决?
5条答案
按热度按时间rkttyhzu1#
我在使用TextField时遇到了同样的问题。显然,这是一个有精确填充的材质组件,这会导致文本裁剪(即使字体较小)。
结果如下:
正如注解建议的解决方案是使用BasicTextField,下面是代码:
用改变的背景形状调用它:
jqjz2hbq2#
从
1.2.0
开始,您可以将**TextFieldDecorationBox
与BasicTextField
配合使用。在这里,您可以使用
contentPadding
**属性来减少垂直填充:cgyqldqp3#
更简单的方法是对其进行缩放:
2w2cym1i4#
我稍微改进了@zoran代码,此代码具有完整BasicTextField参数。
cig3rfwq5#
由于某种原因,当您键入并清除所有文本,然后再次键入时,已接受的答案会崩溃。因此,我复制了
TextField
的实际实现,更改了高度并删除了填充。