Kotlin Compose Todo小项目删除添加项目，认识状态提升

Posted 2022-06-22 安果移不动

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Kotlin Compose Todo小项目删除添加项目，认识状态提升相关的知识，希望对你有一定的参考价值。

样式

用到了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可以添加数据

这种可以把状态管理解耦出来