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

用来把两个空间撑到两边。

给投资人看下就可以募集到资金开发智能版本

扫描二维码关注公众号，回复： 14300048 查看本文章

新建一个数据随机生成类

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 Compose Todo小项目 删除添加项目 ，认识状态提升

猜你喜欢

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