HackerGprat
commented
3 months ago Your code before ( 👈 click to expand )
```kotlin @Composable fun QuadrantAssembly(heading11: String, content11: String, colour11: Long, heading12: String, content12: String, colour12: Long, heading21: String, content21: String, colour21: Long, heading22: String, content22: String, colour22: Long, modifier: Modifier = Modifier) { Column( verticalArrangement = Arrangement.Center, modifier = Modifier .padding(16.dp) ) { Row(Modifier.weight(1f)) { Quadrant(heading11, content11, colour11) Quadrant(heading12, content12, colour12) } Row(Modifier.weight(1f)) { Quadrant(heading21, content21, colour21) Quadrant(heading22, content22, colour22) } } } @Composable fun Quadrant(heading: String, content: String, colour: Long, modifier: Modifier = Modifier) { Surface(modifier = Modifier.fillMaxSize(), color = Color(colour)) { Column( verticalArrangement = Arrangement.Center, modifier = modifier ) { Text( text = heading, fontWeight = FontWeight.Bold, modifier = Modifier .align(alignment = Alignment.CenterHorizontally) .padding(bottom = 16.dp) ) Text( text = content, modifier = modifier, textAlign = TextAlign.Justify ) } } } @Preview(showBackground = true) @Composable fun QuadrantPreview() { ComposeQuadrantTheme { QuadrantAssembly( "dummy heading 1","dummy conetents 1", 0xFFEADDFF, "dummy heading 2","dummy conetents 2", 0xFFD0BCFF, "dummy heading 3","dummy conetents 3", 0xFFB69DF8, "dummy heading 4","dummy conetents 4", 0xFFF6EDFF ) } } ```after some delete or comment and add - read the comment in code ( 👈 click to expand )
``` kotlin package com.example.composequadrant import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.example.composequadrant.ui.theme.ComposeQuadrantTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposeQuadrantTheme { // A surface container using the 'background' color from the theme Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background ) { } } } } } @Composable fun QuadrantAssembly(heading11: String, content11: String, colour11: Long, heading12: String, content12: String, colour12: Long, heading21: String, content21: String, colour21: Long, heading22: String, content22: String, colour22: Long, modifier: Modifier = Modifier) { Column( // verticalArrangement = Arrangement.Center, // 👈 delete it modifier = modifier.fillMaxSize() // 👈 add this, using small m in modifier, because capital M is for default i guess,both nothing changin , if you will use small m then you are uign the paramters otherwise it will show you are not using modifer paramters // .padding(16.dp) ) { Row(Modifier.weight(1f) ) { Quadrant(heading11, content11, colour11, modifier = Modifier.weight(1f)) // 👈 add this - modifier = Modifier.weight(1f)), it like css change the 1f to 2f and 3f and see the effects Quadrant(heading12, content12, colour12, modifier = Modifier.weight(1f)) // 👈 add this } Row(Modifier.weight(1f)) { Quadrant(heading21, content21, colour21, modifier = Modifier.weight(1f)) // 👈 add this Quadrant(heading22, content22, colour22, modifier = Modifier.weight(1f)) // 👈 add this } } } @Composable fun Quadrant(heading: String, content: String, colour: Long, modifier: Modifier = Modifier) { // Surface(modifier = Modifier.fillMaxSize(), color = Color(colour)) // 👈 delete this line or comment // { // 👈 delete this line or comment Column( verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, // 👈 to add horizontally everyting modifier = modifier .fillMaxSize() .background(Color(colour)) // 👈add this you are taking long way, in function parameter add - bgcolor: Color , Color data type, not long , if using long the, you have to use Color(long_value) to get that color, // .background(colour) // if you were using Color data type .padding(16.dp) ) { Text( text = heading, fontWeight = FontWeight.Bold, modifier = Modifier // .align(alignment = Alignment.CenterHorizontally) // 👈 delete it, or comment .padding(bottom = 16.dp), ) Text( text = content, modifier = modifier, textAlign = TextAlign.Justify ) } // end of column // } // end of surface // 👈 delete this line or comment } // end of Quadrant() @Preview(showBackground = true) @Composable fun QuadrantPreview() { ComposeQuadrantTheme { QuadrantAssembly( "dummy heading 1","dummy conetents 1", 0xFFEADDFF, "dummy heading 2","dummy conetents 2", 0xFFD0BCFF, "dummy heading 3","dummy conetents 3", 0xFFB69DF8, "dummy heading 4","dummy conetents 4", 0xFFF6EDFF ) } } ```- still i dont know why the texts are not in center,
- your code is too much complecated to read
- take a look of others code and get some ideas
-
12
-
15
- also see offcial code to get some idea
- official code
rchparkinson
In developing a solution to the Compose Quadrant exercise, I followed the guidance that suggested using Row(Modifier.weight(1f)) { ... in order to create two equal-width elements in each row. This usage is supposed to set the width of each element in the row. However, when I hover the mouse over the word weight, I see that it is sizing element height and has ColumnScope. I do not see a second column in the Preview.
I need help determining the problem.
Here is my code:
package com.example.composequadrant
import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.example.composequadrant.ui.theme.ComposeQuadrantTheme
class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposeQuadrantTheme { // A surface container using the 'background' color from the theme Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background ) { //Greeting("Android") } } } } } @Composable fun QuadrantAssembly(heading11: String, content11: String, colour11: Long, heading12: String, content12: String, colour12: Long, heading21: String, content21: String, colour21: Long, heading22: String, content22: String, colour22: Long, modifier: Modifier = Modifier) { Column( verticalArrangement = Arrangement.Center, modifier = Modifier .padding(16.dp) ) { Row(Modifier.weight(1f)) { Quadrant(heading11, content11, colour11) Quadrant(heading12, content12, colour12) } Row(Modifier.weight(1f)) { Quadrant(heading21, content21, colour21) Quadrant(heading22, content22, colour22) } } }
@Composable fun Quadrant(heading: String, content: String, colour: Long, modifier: Modifier = Modifier) { Surface(modifier = Modifier.fillMaxSize(), color = Color(colour)) { Column( verticalArrangement = Arrangement.Center, modifier = modifier ) { Text( text = heading, fontWeight = FontWeight.Bold, modifier = Modifier .align(alignment = Alignment.CenterHorizontally) .padding(bottom = 16.dp) ) Text( text = content, modifier = modifier, textAlign = TextAlign.Justify ) } } }
@Preview(showBackground = true) @Composable fun QuadrantPreview() { ComposeQuadrantTheme { QuadrantAssembly( stringResource(R.string.quad11_heading), stringResource(R.string.quad11_content), 0xFFEADDFF, stringResource(R.string.quad12_heading), stringResource(R.string.quad12_content), 0xFFD0BCFF, stringResource(R.string.quad21_heading), stringResource(R.string.quad21_content), 0xFFB69DF8, stringResource(R.string.quad22_heading), stringResource(R.string.quad22_content), 0xFFF6EDFF ) } }