JetBrains / compose-multiplatform

Compose Multiplatform, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.
https://jetbrains.com/lp/compose-multiplatform
Apache License 2.0
15.95k stars 1.16k forks source link

Too much memory consuming #1460

Open memonahmedanees opened 2 years ago

memonahmedanees commented 2 years ago

hi to all ,

i was strange that , my app has 10 windows which are based on database ,

when i created first window my app consuming 90mb ram , when i reached 10 windows app memory consuming reached 490mb

when i developing database software through C# same app consuming 45mb of ram i think mutable state consuming too much ram

any idea how i manage ram

akurasov commented 2 years ago

Can you share some dummy reproducer that demos high memory consumption? Also, which version do you use? There used to be some memory leaks a while ago, but they were fixed.

memonahmedanees commented 2 years ago

ok , i used 1.0.0-alpha4-build396 , on windows 10 OS.

where is my ReProducer

package ui.gui

import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout. import androidx.compose.material. import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled. import androidx.compose.runtime.Composable import androidx.compose.runtime.MutableState import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.input.key.Key import androidx.compose.ui.input.pointer.pointerMoveFilter import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.IntSize import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import infos.SoftwareDetail import layout.BUTTONS import ui.model.DistrictRegModel import java.time.

@OptIn(ExperimentalComposeUiApi::class) @Composable fun StudentRegistration(screenPaam: MutableState) {

val buttonNewEnableState = remember { mutableStateOf(true) }
val buttonFindEnableState = remember { mutableStateOf(true) }
val buttonEditEnableState = remember { mutableStateOf(false) }
val buttonDeleteEnableState = remember { mutableStateOf(false) }
val buttonPrintEnableState = remember { mutableStateOf(false) }
val buttonSaveEnableState = remember { mutableStateOf(false) }

val studentId = remember { mutableStateOf(0) }
val studentName = remember { mutableStateOf("".uppercase()) }
val fatherName = remember { mutableStateOf("".uppercase()) }
val surname = remember { mutableStateOf("".uppercase()) }
val date = remember { mutableStateOf(MonthDay.now().dayOfMonth.toString()) }
val monthList = Month.values()
val month = remember { mutableStateOf(YearMonth.now().month.toString()) }
val year = remember { mutableStateOf(Year.now().toString()) }
val contactNum = remember { mutableStateOf("") }
val taulka = remember { mutableStateOf("".uppercase()) }
val address = remember { mutableStateOf("".uppercase()) }
val district = remember { mutableStateOf("".uppercase()) }
val isActive = remember { mutableStateOf(true) }

val labelTypo = MaterialTheme.typography.caption
val labelBoxColor = Color(0xFFF5F5F5)
val boxSize = IntSize(100, 50)
val isSurnameExpended = remember { mutableStateOf(false) }
val surnameCheck = listOf("Memon", "Channa")
val taulkaCheck = listOf<String>("Bhiria", "Moro", "Kandiaro", "Mehrabpur", "Noshero Feroze")

Box {
    //repeating header on every page

    Column {
        SoftwareDetail.HeadingRepeatOnEveryWindow()

        //space between header and detail of student
        Spacer(modifier = Modifier.height(10.dp))

        //image and text of student page
        Row {
            //image
            Image(
                painter = painterResource("ic_student.svg"),
                contentDescription = null,
                modifier = Modifier
                    .height(30.dp)
                    .width(30.dp)
            )

            //Space between text and image
            Spacer(modifier = Modifier.width(5.dp))

            //Text
            Text(
                text = "Student Registration",
                style = MaterialTheme.typography.h4
            )

        }

        //row for student events button
        Row(
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.fillMaxWidth()
        ) {

            //button for New Record
            BUTTONS.ButtonIcon(
                buttonText = "ew",
                icon = Icons.Default.Add,
                key = Key.S,
                shortcutKeyText = "N",
                modifier = Modifier,
                backgroundColor = BUTTONS.BUTTON_NEW_COLOR,
                hoverColor = BUTTONS.BUTTON_NEW_HOVER_COLOR,
                enable = buttonNewEnableState.value

            ) {
                //button new on click

            }

            Spacer(modifier = Modifier.width(5.dp))

            //button find the record
            BUTTONS.ButtonIcon(
                buttonText = "ind",
                icon = Icons.Default.Search,
                key = Key.F,
                shortcutKeyText = "F",
                modifier = Modifier,
                backgroundColor = BUTTONS.BUTTON_ACTION_DEFAULT_COLOR,
                hoverColor = BUTTONS.BUTTON_ACTION_HOVER_COLOR,
                enable = buttonFindEnableState.value

            ) {
                //button FIND on click

            }
            Spacer(modifier = Modifier.width(5.dp))

            //button EDIT the record
            BUTTONS.ButtonIcon(
                buttonText = "dit",
                icon = Icons.Default.Edit,
                key = Key.E,
                shortcutKeyText = "E",
                modifier = Modifier,
                backgroundColor = BUTTONS.BUTTON_ACTION_DEFAULT_COLOR,
                hoverColor = BUTTONS.BUTTON_ACTION_HOVER_COLOR,
                enable = buttonEditEnableState.value

            ) {
                //button EDIT on click

            }

            Spacer(modifier = Modifier.width(5.dp))

            //button SAVE the record
            BUTTONS.ButtonIcon(
                buttonText = "ave",
                icon = Icons.Default.Done,
                key = Key.S,
                shortcutKeyText = "S",
                modifier = Modifier,
                backgroundColor = BUTTONS.BUTTON_ACTION_DEFAULT_COLOR,
                hoverColor = BUTTONS.BUTTON_ACTION_HOVER_COLOR,
                enable = buttonSaveEnableState.value

            ) {
                //button SAVE on click

            }

            Spacer(modifier = Modifier.width(5.dp))

            //button DELETE the record
            BUTTONS.ButtonIcon(
                buttonText = "elete",
                icon = Icons.Default.Delete,
                key = Key.D,
                shortcutKeyText = "D",
                modifier = Modifier,
                backgroundColor = BUTTONS.BUTTON_ACTION_DELETE_COLOR,
                hoverColor = BUTTONS.BUTTON_ACTION_DELETE_HOVER_COLOR,
                enable = buttonDeleteEnableState.value

            ) {
                //button DELETE on click

            }

            //space
            Spacer(modifier = Modifier.width(5.dp))

            //button REFRESH
            BUTTONS.ButtonIcon(
                buttonText = "efresh",
                icon = Icons.Default.Refresh,
                key = Key.R,
                shortcutKeyText = "R",
                modifier = Modifier,
                backgroundColor = BUTTONS.BUTTON_ACTION_DEFAULT_COLOR,
                hoverColor = BUTTONS.BUTTON_ACTION_HOVER_COLOR

            ) {
                //button REFRESH on click

            }

            //space
            Spacer(modifier = Modifier.width(5.dp))

            //button Print
            BUTTONS.ButtonIcon(
                buttonText = "rint",
                icon = null,
                key = Key.P,
                shortcutKeyText = "P",
                modifier = Modifier,
                backgroundColor = BUTTONS.BUTTON_ACTION_DEFAULT_COLOR,
                hoverColor = BUTTONS.BUTTON_ACTION_HOVER_COLOR,
                iconPath = "ic_print.svg",
                enable = buttonPrintEnableState.value

            ) {
                //button Print on click

            }

            //space
            Spacer(modifier = Modifier.width(20.dp))

            //button exit
            BUTTONS.ButtonIcon(
                buttonText = "exit",
                icon = Icons.Default.ExitToApp,
                key = Key.X,
                shortcutKeyText = "E",
                modifier = Modifier,
                backgroundColor = BUTTONS.BUTTON_ACTION_DEFAULT_COLOR,
                hoverColor = BUTTONS.BUTTON_ACTION_HOVER_COLOR,
                iconPath = "ic_print.svg"

            ) {
                //button EXIT on click
                screenPaam.value = 2

            }

        }

        Spacer(modifier = Modifier.height(10.dp))

        //row for student id
        Row {

            //label Student Id
            Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier
                    .background(color = labelBoxColor)
                    .height(50.dp)
                    .width(100.dp)
            ) {
                Text(text = "Student Id :", style = labelTypo)
            }

            //space
            Spacer(modifier = Modifier.width(10.dp))

            //student id
            OutlinedTextField(
                value = "${studentId.value}",
                onValueChange = { studentId.value = it.toInt() },
                modifier = Modifier.height(50.dp).width(100.dp),
                placeholder = { Text(text = "Student ID") },
                readOnly = true,
                singleLine = true
            )

        }

        //space between student id and student name
        Spacer(modifier = Modifier.height(10.dp))

        //row for student name father name and surname
        Row {

            //box for label student name
            Box(
                modifier = Modifier
                    .background(color = labelBoxColor)
                    .height(boxSize.height.dp)
                    .width(boxSize.width.dp),
                contentAlignment = Alignment.Center
            ) {
                //label student name
                Text(text = "Name :")
            }

            //space between label and date
            Spacer(modifier = Modifier.width(10.dp))

            //student name
            OutlinedTextField(
                value = studentName.value.uppercase(),
                onValueChange = { studentName.value = it },
                modifier = Modifier.width(200.dp).height(boxSize.height.dp),
                singleLine = true
            )

            //student father name section

            //space between label and data
            Spacer(modifier = Modifier.width(10.dp))

            //label father name
            Box(
                modifier = Modifier
                    .background(color = labelBoxColor)
                    .height(boxSize.height.dp)
                    .width(boxSize.width.dp),
                contentAlignment = Alignment.Center
            ) {
                //label student name
                Text(text = "Father Name :")
            }

            //space between label and data
            Spacer(modifier = Modifier.width(10.dp))

            //student father name data
            OutlinedTextField(
                value = fatherName.value.uppercase(),
                onValueChange = { fatherName.value = it.uppercase() },
                modifier = Modifier.width(180.dp).height(boxSize.height.dp),
                singleLine = true
            )

            //space
            Spacer(modifier = Modifier.width(10.dp))

            //box for label cast
            Box(
                modifier = Modifier
                    .background(color = labelBoxColor)
                    .height(boxSize.height.dp)
                    .width(boxSize.width.dp),
                contentAlignment = Alignment.Center
            ) {
                //label student name
                Text(text = "Surname :")
            }

            //space between label surname and surname data
            Spacer(modifier = Modifier.width(10.dp))

            //surname data
            Box {

                OutlinedTextField(
                    value = surname.value.uppercase(),
                    onValueChange = { surname.value = it.uppercase() },
                    modifier = Modifier.height(boxSize.height.dp).width(150.dp),
                    singleLine = true,
                    trailingIcon = {
                        Box(
                            modifier = Modifier
                                .height(boxSize.height.dp)
                                .width(50.dp)
                                .background(Color.LightGray)
                                .clickable { isSurnameExpended.value = !isSurnameExpended.value },
                            contentAlignment = Alignment.Center
                        ) {
                            Icon(
                                Icons.Default.KeyboardArrowDown,
                                null
                            )

                        }
                    },
                    readOnly = true
                )
                //box for surname drop down
                Box {

                    DropdownMenu(
                        expanded = isSurnameExpended.value,
                        onDismissRequest = { isSurnameExpended.value = false }
                    ) {

                        surnameCheck.forEach {
                            //change color state if user hover this
                            val changeColor = remember { mutableStateOf(false) }
                            DropdownMenuItem(
                                onClick = {
                                    surname.value = it
                                    isSurnameExpended.value = false
                                },
                                modifier = Modifier
                                    .height(20.dp)
                                    .background(color = if (changeColor.value) Color.LightGray else Color.Transparent)
                                    .pointerMoveFilter(
                                        onEnter = { changeColor.value = true; false },
                                        onExit = { changeColor.value = false; false }
                                    )

                            ) {
                                Text(
                                    text = it
                                )
                            }
                        }
                    }
                }
            }

        }

        Spacer(modifier = Modifier.height(10.dp))

        //row for date of birth
        Row {

            //box for label student date of birth
            Box(
                modifier = Modifier
                    .background(color = labelBoxColor)
                    .height(boxSize.height.dp)
                    .width(boxSize.width.dp),
                contentAlignment = Alignment.Center
            ) {
                //label student name
                Text(text = "Date of Birth :")
            }

            //space between label and date of birth data
            Spacer(modifier = Modifier.width(10.dp))

            //date
            Box(modifier = Modifier) {
                val isDateExpended = remember { mutableStateOf(false) }

                OutlinedTextField(
                    value = date.value,
                    onValueChange = { date.value = it },
                    label = { Text(text = "Date", fontSize = 14.sp) },
                    trailingIcon = {
                        Icon(
                            Icons.Default.KeyboardArrowDown,
                            null,
                            Modifier.clickable { isDateExpended.value = !isDateExpended.value }
                        )
                    },

                    readOnly = true,
                    modifier = Modifier.height(60.dp).width(90.dp).padding(0.dp)
                )

                //dropdown menu for date picker
                Box {
                    DropdownMenu(
                        expanded = isDateExpended.value,
                        onDismissRequest = { isDateExpended.value = false }
                    ) {
                        //date loop 1 to 31
                        for (x in 1..31) {
                            DropdownMenuItem(
                                onClick = { date.value = "$x"; isDateExpended.value = false },
                                modifier = Modifier.height(20.dp).width(75.dp)
                            ) {
                                Text(text = "$x")
                            }
                        }
                    }
                }

            }

            //space between date and month
            Spacer(modifier = Modifier.width(10.dp))
            //Month
            Box(modifier = Modifier) {
                val isMonthExpended = remember { mutableStateOf(false) }

                OutlinedTextField(
                    value = month.value,
                    onValueChange = { month.value = it },
                    label = { Text(text = "Month", fontSize = 14.sp) },
                    trailingIcon = {
                        Icon(
                            Icons.Default.KeyboardArrowDown,
                            null,
                            Modifier.clickable { isMonthExpended.value = !isMonthExpended.value }
                        )
                    },

                    readOnly = true,
                    modifier = Modifier.height(60.dp).width(150.dp).padding(0.dp)
                )

                //dropdown menu for Month picker
                Box {
                    DropdownMenu(
                        expanded = isMonthExpended.value,
                        onDismissRequest = { isMonthExpended.value = false }
                    ) {
                        //month loop
                        monthList.forEach {
                            DropdownMenuItem(
                                onClick = { month.value = it.name; isMonthExpended.value = false },
                                modifier = Modifier.height(20.dp).width(130.dp)
                            ) {
                                Text(text = it.name)
                            }
                        }
                    }
                }

            }

            //space between month and year
            Spacer(modifier = Modifier.width(10.dp))

            //Year
            Box(modifier = Modifier) {
                val isYearExpended = remember { mutableStateOf(false) }

                OutlinedTextField(
                    value = year.value,
                    onValueChange = { year.value = it },
                    label = { Text(text = "Year", fontSize = 14.sp) },
                    trailingIcon = {
                        Icon(
                            Icons.Default.KeyboardArrowDown,
                            null,
                            Modifier.clickable { isYearExpended.value = !isYearExpended.value }
                        )
                    },

                    readOnly = true,
                    modifier = Modifier.height(60.dp).width(100.dp).padding(0.dp)
                )

                //dropdown menu for Month picker
                Box {
                    DropdownMenu(
                        expanded = isYearExpended.value,
                        onDismissRequest = { isYearExpended.value = false }
                    ) {
                        //month loop
                        for (x in 1970..LocalDate.now().year) {
                            DropdownMenuItem(
                                onClick = { year.value = "$x"; isYearExpended.value = false },
                                modifier = Modifier.height(20.dp).width(75.dp)
                            ) {
                                Text(text = "$x")
                            }
                        }
                    }
                }

            }

            //space between year and active
            Spacer(modifier = Modifier.width(50.dp))

            //label active
            Box(
                modifier = Modifier
                    .background(color = if (isActive.value) Color(0xFF1DE9B6) else Color(0xFFFF7043))
                    .height(boxSize.height.dp)
                    .width(boxSize.width.dp),
                contentAlignment = Alignment.Center
            ) {
                //label student name
                Text(text = "Active :")
            }

            //space label active and data active

            Switch(
                checked = isActive.value,
                onCheckedChange = { isActive.value = it }
            )

            //space btwn active and contact
            Spacer(modifier = Modifier.width(10.dp))

            //label contact
            Box(
                modifier = Modifier
                    .background(color = labelBoxColor)
                    .height(boxSize.height.dp)
                    .width(boxSize.width.dp),
                contentAlignment = Alignment.Center
            ) {

                Text(text = "Phone# :")
            }

            //space data and label
            Spacer(Modifier.width(10.dp))

            //data contact
            OutlinedTextField(
                value = contactNum.value,
                onValueChange = { contactNum.value = it },
                singleLine = true,
                modifier = Modifier
                    .width(200.dp)
                    .height(boxSize.height.dp)
            )

        }

        //Space between row
        Spacer(modifier = Modifier.height(10.dp))

        // row for address  taulka and district
        Row {

            //label for taulka
            Box(
                modifier = Modifier
                    .background(color = labelBoxColor)
                    .height(boxSize.height.dp)
                    .width(boxSize.width.dp),
                contentAlignment = Alignment.Center
            ) {
                //label student name
                Text(text = "Taulka :")
            }

            //space between label and data
            Spacer(modifier = Modifier.width(10.dp))

            //data taulka
            Box {
                val isTaulkaExpended = remember { mutableStateOf(false) }
                OutlinedTextField(
                    value = taulka.value.uppercase(),
                    onValueChange = { taulka.value = it.uppercase() },
                    modifier = Modifier.height(boxSize.height.dp).width(210.dp),
                    trailingIcon = {
                        Icon(
                            Icons.Default.KeyboardArrowDown,
                            null,
                            Modifier.clickable { isTaulkaExpended.value = !isTaulkaExpended.value }
                        )
                    },
                    readOnly = true
                )

                // taulka dropdown
                Box {
                    DropdownMenu(
                        expanded = isTaulkaExpended.value,
                        onDismissRequest = { isTaulkaExpended.value = false }
                    ) {
                        //month loop
                        taulkaCheck.forEach {
                            DropdownMenuItem(
                                onClick = { taulka.value = it; isTaulkaExpended.value = false },
                                modifier = Modifier.height(20.dp).width(150.dp)
                            ) {
                                Text(text = it)
                            }
                        }
                    }
                }

            }

            //space  bweteen taulka and district
            Spacer(modifier = Modifier.width(10.dp))

            //label for dist
            Box(
                modifier = Modifier
                    .background(color = labelBoxColor)
                    .height(boxSize.height.dp)
                    .width(boxSize.width.dp),
                contentAlignment = Alignment.Center
            ) {
                //label student name
                Text(text = "Dist :")
            }

            //space between label and data
            Spacer(modifier = Modifier.width(10.dp))

            //data dist
            Box {
                val isDistExpended = remember { mutableStateOf(false) }
                OutlinedTextField(
                    value = district.value.uppercase(),
                    onValueChange = { district.value = it.uppercase() },
                    modifier = Modifier.height(boxSize.height.dp).width(210.dp),
                    trailingIcon = {
                        Icon(
                            Icons.Default.KeyboardArrowDown,
                            null,
                            Modifier.clickable { isDistExpended.value = !isDistExpended.value }
                        )
                    },
                    readOnly = true
                )

                // taulka dropdown
                Box {
                    DropdownMenu(
                        expanded = isDistExpended.value,
                        onDismissRequest = { isDistExpended.value = false }
                    ) {
                        //month loop
                        DistrictRegModel().getDistrictAll().forEach {
                            DropdownMenuItem(
                                onClick = { district.value = it.name; isDistExpended.value = false },
                                modifier = Modifier.height(20.dp).width(150.dp)
                            ) {
                                Text(text = it.name)
                            }
                        }
                    }
                }

            }

            //space btwn dist +  address
            Spacer(modifier = Modifier.width(10.dp))

            //label addr
            Box(
                modifier = Modifier
                    .background(color = labelBoxColor)
                    .height(boxSize.height.dp)
                    .width(boxSize.width.dp),
                contentAlignment = Alignment.Center
            ) {

                Text(text = "Addr :")
            }

            //space btwn label and data
            Spacer(modifier = Modifier.width(10.dp))
            Box {

                OutlinedTextField(
                    value = address.value.uppercase(),
                    onValueChange = { address.value = it.uppercase() },
                    modifier = Modifier.height(boxSize.height.dp).width(210.dp),

                    )

            }

        } // end row of student detail

        //space btwn student data row and butons
        Spacer(modifier = Modifier.height(50.dp))

    }
}

}

memonahmedanees commented 2 years ago

waiting for reply

akurasov commented 2 years ago

Please simplify it and localize what exactly consumes memory, to ensure it is Compose, not an app itself.

okushnikov commented 2 months ago

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.