Kotlin Compose Todo小项目 删除添加项目 ,认识状态提升
2023-09-27 14:27:35 时间
样式
用到了icon扩展
implementation "androidx.compose.material:material-icons-extended:$compose_version"
数据bean
package com.anguomob.jecpack.activity.compose.todo.bean
import android.support.annotation.StringRes
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.ui.graphics.vector.ImageVector
import com.anguomob.jecpack.R
import java.util.*
data class TodoItem(
val task: String,
val icon: ToDoIcon = ToDoIcon.Default,
val id: UUID = UUID.randomUUID()
) {
}
enum class ToDoIcon(val imageVector: ImageVector, @StringRes val contentDescription: Int) {
Square(Icons.Default.CropSquare, R.string.expand),
Done(Icons.Default.Done, R.string.done),
Event(Icons.Default.Event, R.string.event),
PrivacyTip(Icons.Default.PrivacyTip, R.string.privacy),
Trash(Icons.Default.RestoreFromTrash, R.string.restore),
Default(Square.imageVector, Square.contentDescription)
}
针对列表页面进行一个渲染
package com.anguomob.jecpack.activity.compose.todo.one
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Button
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import com.anguomob.jecpack.R
import com.anguomob.jecpack.activity.compose.todo.bean.ToDoIcon
import com.anguomob.jecpack.activity.compose.todo.bean.TodoItem
@Composable
fun TodoActivityScreen() {
val items = listOf(
TodoItem("Learn compose", ToDoIcon.Event),
TodoItem("Take a CodeLab"),
TodoItem("Apply state", ToDoIcon.Done),
TodoItem("Build dynamic UIs", ToDoIcon.Square),
)
TodoScreen(items)
}
@Composable
fun TodoScreen(dataLists: List<TodoItem>) {
Column() {
LazyColumn(
modifier = Modifier
.weight(1f)
) {
items(dataLists) {
TodoRow(it, modifier = Modifier.fillParentMaxWidth())
}
}
Button(
onClick = {},
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
) {
Text("新建TODO")
}
}
}
@Composable
fun TodoRow(todo: TodoItem, modifier: Modifier = Modifier) {
Row(
modifier = modifier.padding(horizontal = 16.dp, vertical = 8.dp),
//子元素水平均匀分发
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(todo.task)
Icon(
imageVector = todo.icon.imageVector,
contentDescription = stringResource(id = todo.icon.contentDescription)
)
}
}
没啥好讲的 就是实际用到了
horizontalArrangement = Arrangement.SpaceBetween
用来把两个空间撑到两边。
给投资人看下就可以募集到资金开发智能版本
新建一个数据随机生成类
import com.anguomob.jecpack.activity.compose.todo.bean.ToDoIcon
import com.anguomob.jecpack.activity.compose.todo.bean.TodoItem
//
// Created by Administrator on 2022/6/20.
//
fun generateRandomTodoItem(): TodoItem {
val message = listOf(
"Learn compose",
"Learn state",
"Build dynamic UIs",
"Learn Unidirectional Data Flow",
"Integrate LiveData",
"Integrate ViewModel",
"Remember to saveState!",
"Build stateless composables",
"Use state from stateless composables",
).random()
val icon = ToDoIcon.values().random()
return TodoItem(message, icon)
}
添加viewModel操作数据
package com.anguomob.jecpack.activity.compose.todo.viewmodel
import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
import com.anguomob.jecpack.activity.compose.todo.bean.TodoItem
class TodoViewModel : ViewModel() {
private var _todoItems = MutableLiveData(listOf<TodoItem>())
val todoItems: LiveData<List<TodoItem>> = _todoItems
fun addItem(item: TodoItem) {
_todoItems.value = _todoItems.value!! + listOf(item)
}
fun removeItem(item: TodoItem) {
_todoItems.value =
_todoItems.value!!
.toMutableList()
.also {
it.remove(item)
}
}
}
变更刚才的布局数据
package com.anguomob.jecpack.activity.compose.todo.one
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Button
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import com.anguomob.jecpack.R
import com.anguomob.jecpack.activity.compose.todo.bean.ToDoIcon
import com.anguomob.jecpack.activity.compose.todo.bean.TodoItem
import com.anguomob.jecpack.activity.compose.todo.viewmodel.TodoViewModel
import generateRandomTodoItem
@Composable
fun TodoActivityScreen(todoViewModel: TodoViewModel) {
// val items = listOf(
// TodoItem("Learn compose", ToDoIcon.Event),
// TodoItem("Take a CodeLab"),
// TodoItem("Apply state", ToDoIcon.Done),
// odoItem("Build dynamic UIs", ToDoIcon.Square),
val items: List<TodoItem> by todoViewModel.todoItems.observeAsState(listOf())
TodoScreen(items = items, onAddItem = {
todoViewModel.addItem(it)
}, onItemClick = {
todoViewModel.removeItem(it)
})
}
@Composable
fun TodoScreen(
items: List<TodoItem>,
onAddItem: (TodoItem) -> Unit,
onItemClick: (TodoItem) -> Unit
) {
Column() {
LazyColumn(
modifier = Modifier
.weight(1f)
) {
items(items) {
TodoRow(it, modifier = Modifier.fillParentMaxWidth(), onItemClick = onItemClick)
}
}
Button(
onClick = {
onAddItem(generateRandomTodoItem())
},
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
) {
Text("新建TODO")
}
}
}
@Composable
fun TodoRow(todo: TodoItem, modifier: Modifier = Modifier, onItemClick: (TodoItem) -> Unit) {
Row(
modifier = modifier
.padding(horizontal = 16.dp, vertical = 8.dp)
.clickable { onItemClick(todo) },
//子元素水平均匀分发
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(todo.task)
Icon(
imageVector = todo.icon.imageVector,
contentDescription = stringResource(id = todo.icon.contentDescription)
)
}
}
点击条目的时候可以删除数据
点击底部add可以添加数据
这种可以把状态管理解耦出来
数据流状态
相关文章
- 用Kotlin优雅地开发Android应用
- 研究学习Kotlin的一些方法
- 对比Java,Kotlin的优点和缺点
- Kotlin Compose 监听软键盘 点击enter提交事件
- Kotlin 取出来最快的协程数据
- Kotlin map 转换为数据bean
- Kotlin jetpack compose 文本输入框ExitText/TextField remember 居然可以传两个参数
- kotlin T.()
- kotlin (T)
- 【60】 Kotlin 泛型中的 in 和 out
- 【31】kotlin 函数复合
- 【25】kotlin 枚举
- 【1】Kotlin是什么 如何系统学习Kotlin
- 创建一个基于 Kotlin 的 Android 项目(下集)