写一个compose app
时间: 2023-11-29 13:55:04 浏览: 39
好的,我可以给你一个简单的Compose App示例。这个App将显示一个列表,列表中有一些简单的文本项。你可以点击其中的任何一项,在屏幕底部显示相应的文本。
首先,在build.gradle文件中,添加以下依赖项:
```
dependencies {
implementation "androidx.compose.ui:ui:1.0.1"
implementation "androidx.compose.material:material:1.0.1"
implementation "androidx.compose.runtime:runtime-livedata:1.0.1"
implementation "androidx.activity:activity-compose:1.3.0-alpha07"
}
```
然后,创建一个MainActivity类,将其声明为一个@AndroidEntryPoint类,以便使用Compose:
```
@AndroidEntryPoint
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyList()
}
}
}
```
现在,我们可以创建MyList组件,它将显示我们的项目列表。对于这个例子,我们将硬编码一些文本项,但在实际应用中,你可以使用一个ViewModel从网络或本地数据库中获取数据。
```
@Composable
fun MyList() {
val items = listOf(
"Item 1",
"Item 2",
"Item 3",
"Item 4",
"Item 5",
)
Column(modifier = Modifier.fillMaxSize()) {
items.forEach { item ->
ListItem(item = item)
}
}
}
```
接下来,我们创建一个ListItem组件,它将显示每个项目。当用户点击任何一个项目时,我们将使用LiveData在屏幕底部更新相应的文本。
```
@Composable
fun ListItem(item: String) {
val selectedItem = remember { mutableStateOf("") }
Text(
text = item,
modifier = Modifier
.padding(16.dp)
.clickable {
selectedItem.value = item
}
)
if (selectedItem.value == item) {
Text(
text = "You selected $item",
modifier = Modifier
.padding(16.dp)
.align(Alignment.BottomStart)
)
}
}
```
最后,在MainActivity中,我们使用setContent { }将MyList组件设置为内容。
这样,我们就完成了一个简单的Compose App,可以显示项目列表,并在用户点击任何一个项目时,在屏幕底部显示相应的文本。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)