CODEWITHSUNDEEP
androidkotlinandroid-jetpack-compose
JRowan
JRowan

Reputation: 7114

Can we use composable functions from other classes inside another class?

I am just practicing jetpack compose and trying to get used to it and I made a directory inside my app called Views and I am making different kotlin classes inside that directory each with a different composable function for different peices of my UI. The problem is that I cannot call a composable function from a different kotlin file inside other ones.

for example i have a class Ticket with composable TicketView function

class Ticket {

@Composable
fun TicketView(myTicket: MyTicket, winingTicket: WinningTicket, isActualTicket: Boolean, isPowerball: Boolean, numTicket: Int) {
    Column(
    ){
        if(isActualTicket) Text("Winning Ticket",fontSize = 25.sp) else Text("Ticket " + numTicket,fontSize = 25.sp,)
        Row(modifier = Modifier.fillMaxWidth().background(color= Color.Black),verticalAlignment = Alignment.CenterVertically) {
            Box(modifier = Modifier.weight(1f).size(75.dp,75.dp)){
                Image(painter = painterResource(id = if(myTicket.getNumber(0) == winingTicket.getNumber(0) && !isActualTicket) R.drawable.ball1star else R.drawable.ball1),"ball 1",modifier = Modifier.fillMaxSize())
                Text(
                    if (isActualTicket) winingTicket.getNumber(0).toString() else myTicket.getNumber(0).toString(),
                    fontSize = 25.sp,
                    textAlign = TextAlign.Center,
                    style = TextStyle(textDecoration = TextDecoration.Underline),
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.fillMaxSize().paddingFromBaseline(top = 45.dp))
            }
            Box(modifier = Modifier.weight(1f).size(75.dp,75.dp)){
                Image(painter = painterResource(id = if(myTicket.getNumber(1) == winingTicket.getNumber(1) && !isActualTicket) R.drawable.ball1star else R.drawable.ball1),"ball 2",modifier = Modifier.fillMaxSize())
                Text(if (isActualTicket) winingTicket.getNumber(1).toString() else myTicket.getNumber(1).toString(),
                    fontSize = 25.sp,textAlign = TextAlign.Center,
                    style = TextStyle(textDecoration = TextDecoration.Underline),
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.fillMaxSize().paddingFromBaseline(top = 45.dp))
            }
            Box(modifier = Modifier.weight(1f).size(75.dp,75.dp)){
                Image(painter = painterResource(id = if(myTicket.getNumber(2) == winingTicket.getNumber(2) && !isActualTicket) R.drawable.ball1star else R.drawable.ball1),"ball 3",modifier = Modifier.fillMaxSize())
                Text(if (isActualTicket) winingTicket.getNumber(2).toString() else myTicket.getNumber(2).toString(),
                    fontSize = 25.sp,textAlign = TextAlign.Center,
                    style = TextStyle(textDecoration = TextDecoration.Underline),
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.fillMaxSize().paddingFromBaseline(top = 45.dp))
            }
            Box(modifier = Modifier.weight(1f).size(75.dp,75.dp)){
                Image(painter = painterResource(id = if(myTicket.getNumber(3) == winingTicket.getNumber(3) && !isActualTicket) R.drawable.ball1star else R.drawable.ball1),"ball 4",modifier = Modifier.fillMaxSize())
                Text(if (isActualTicket) winingTicket.getNumber(3).toString() else myTicket.getNumber(3).toString(),
                    fontSize = 25.sp,textAlign = TextAlign.Center,
                    style = TextStyle(textDecoration = TextDecoration.Underline),
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.fillMaxSize().paddingFromBaseline(top = 45.dp))
            }
            Box(modifier = Modifier.weight(1f).size(75.dp,75.dp)){
                Image(painter = painterResource(id = if(myTicket.getNumber(4) == winingTicket.getNumber(4) && !isActualTicket) R.drawable.ball1star else R.drawable.ball1),"ball 5",modifier = Modifier.fillMaxSize())
                Text(if (isActualTicket) winingTicket.getNumber(4).toString() else myTicket.getNumber(4).toString(),
                    fontSize = 25.sp,textAlign = TextAlign.Center,
                    style = TextStyle(textDecoration = TextDecoration.Underline),
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.fillMaxSize().paddingFromBaseline(top = 45.dp))
            }
            Box(modifier = Modifier.weight(1f).size(75.dp,75.dp)){
                var id = R.drawable.power1
                if(myTicket.getNumber(5) == winingTicket.getNumber(5) && !isActualTicket){
                    if(isPowerball){
                        id = R.drawable.powerstar1
                    }else{
                        id = R.drawable.megastar1
                    }
                }else{
                    if(isPowerball){
                        id = R.drawable.power1
                    }else{
                        id = R.drawable.mega1
                    }
                }
                Image(painter = painterResource(id =  id),"powerball",modifier = Modifier.fillMaxSize())
                Text(if (isActualTicket) winingTicket.getNumber(5).toString() else myTicket.getNumber(5).toString(),
                    fontSize = 25.sp,textAlign = TextAlign.Center,
                    style = TextStyle(textDecoration = TextDecoration.Underline),
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.fillMaxSize().paddingFromBaseline(top = 45.dp))
            }
            Box(modifier = Modifier.weight(2f).size(75.dp,75.dp)){

                Text(winingTicket.calculateWin(myTicket.ticket!!, true),
                    color = Color.White,
                    fontSize = 20.sp,textAlign = TextAlign.Center,
                    style = TextStyle(textDecoration = TextDecoration.Underline),
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.fillMaxSize().paddingFromBaseline(top = 12.dp))
            }




        }
    }

}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    PowerMegaTheme {
        var myTicket = MyTicket()
        myTicket.ticket = "1 2 12 4 5 6"
        myTicket.multi = true;
        var winningTicket = WinningTicket()
        winningTicket.winningNumber = "1 2 12 4 5 6"
        winningTicket.multiplier = "2"
        TicketView(myTicket = myTicket, winingTicket = winningTicket,isActualTicket = true,isPowerball = true, numTicket = 1)
    }
}

}

and then i have a TicketCard class with TicketCard composable function that I would like to use the TicketView composable function in

class TicketCard {

@Composable
fun TicketCard(winningTicket: WinningTicket, myTickets: List<MyTicket>, isPowerball: Boolean){
    Card(){
        Text(winningTicket.date!!)
        var count = 1
        for(myTicket in myTickets){
            //I would like to use TicketView here
        }

    }
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    PowerMegaTheme {

    }
}

}

I tried to import the class and It will just not let me do it. Maybe I am going about building my ui elements the wrong way.

Thank you for your time.

Upvotes: 8

Views: 11411

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 365028

To create a composable function, just add the @Composable annotation to the function name, you don't need a class.

Create a file Ticket.kt. Just put inside

@Composable
fun TicketView(){    
  //your code
}

Then in another file you can use the TicketView. The only requirement is that Composable functions can only ever be called from within another Composable function.

Upvotes: 25

Related Questions