Android Compose搜索框实现

1.  
   class MainActivity : ComponentActivity() {
2.  
    
3.  
   override fun onCreate(savedInstanceState: Bundle?) {
4.  
   super.onCreate(savedInstanceState)
5.  
   setContent {
6.  
   Column(Modifier.fillMaxSize()) {
7.  
   Spacer(Modifier.height(50.dp))
8.  
   searchBar()
9.  
   }
10.  
    }
11.  
    }
12.  
    }
13.  
     
14.  
    @Composable
15.  
    fun searchBar() {
16.  
    var text by remember { mutableStateOf("")}
17.  
    Box(modifier = Modifier.background(Color(0xFFD3D3D3)).padding(50.dp)) {
18.  
    BasicTextField(value = text, onValueChange = { text = it }, decorationBox = {
19.  
    Row(verticalAlignment = Alignment.CenterVertically,
20.  
    modifier = Modifier.padding(horizontal = 8.dp)) {
21.  
    Icon(imageVector = Icons.Filled.Search, contentDescription = "")
22.  
    Box(modifier = Modifier.padding(horizontal = 10.dp).weight(1f),
23.  
    contentAlignment = Alignment.CenterStart) {
24.  
    if (text.isEmpty()) {
25.  
    Text(text = "输入点东西康康吧~" ,
26.  
    style = TextStyle(Color(0,0,0,128))
27.  
    )
28.  
    }
29.  
    it()
30.  
    }
31.  
    if (text.isNotEmpty()) {
32.  
    IconButton(onClick = { text = ""}, modifier = Modifier.size(16.dp)) {
33.  
    Icon(imageVector = Icons.Filled.Close, contentDescription = "")
34.  
    }
35.  
    }
36.  
    }
37.  
    }, modifier = Modifier.padding(10.dp).background(Color.White, CircleShape)
38.  
    .height(30.dp).fillMaxWidth()
39.  
    )
40.  
    }
41.  
    }

运行后的效果：

 这个搜索框用Compose实现起来看上去有点嵌套地狱，主要还是不熟悉控件里面的属性

这篇好文章是转载于：学新通技术网