Probléme d'affichage avec JetPack Compose lors de la résolution d'un exercice.

Bonjour à tous,

Je commence le développement sur Android. Je suis actuellement entrain de faire un tutoriel. Je dois réaliser ceci : Pièce jointe 648826 mais je me retrouve plutôt avec ceci : Pièce jointe 648827.

J'ai a ma disposition la correction de l'exercice et elle fonctionne. Mais je n'arrive pas a voir ou j'ai fait une erreur même avec la correction. Il y a surement un concept que j'ai du mal comprendre.

Voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            QuadrantTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    QuadrantApp()
                }
            }
        }
    }
}
 
@Composable
fun QuadrantApp() {
 
    Column (Modifier.fillMaxWidth()){
        Row (Modifier.weight(1f)){
            QuadrantCard(stringResource(id = R.string.title1), stringResource(id = R.string.body1), colorResource(id = R.color.Quad1),modifier =Modifier.weight(1f))
            QuadrantCard(stringResource(id = R.string.title2), "body2", colorResource(id = R.color.Quad2),modifier = Modifier.weight(1f))
        }
 
        Row (Modifier.weight(1f)) {
            QuadrantCard(stringResource(id = R.string.title3), "body", colorResource(id = R.color.Quad3),modifier = Modifier.weight(1f))
            QuadrantCard(stringResource(id = R.string.title4), "body2", colorResource(id = R.color.Quad4),modifier = Modifier.weight(1f))
        }
    }
 
}
 
@Composable
fun QuadrantCard(title: String,body: String, color: Color, modifier: Modifier = Modifier){
 
    Column (
        modifier = modifier
            .fillMaxSize()
            .padding(16.dp)
            .background(color),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ){
        Text(
            text = title,
            fontWeight = FontWeight.Bold,
            modifier = modifier.padding(bottom = 16.dp)
        )
 
        Text(
            text = body,
            //fontSize = 14.sp,
            textAlign = TextAlign.Justify,
        )
 
    }
 
}
 
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    QuadrantTheme {
        QuadrantApp()
    }
}

et voici celui de la correction :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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
                ) {
                    ComposeQuadrantApp()
                }
            }
        }
    }
}
 
@Composable
fun ComposeQuadrantApp() {
    Column(Modifier.fillMaxWidth()) {
        Row(Modifier.weight(1f)) {
            ComposableInfoCard(
                title = "title1",
                description = "Creates a composable that lays out and draws a given Painter class object.",
                backgroundColor = Color(0xFFEADDFF),
                modifier = Modifier.weight(1f)
            )
            ComposableInfoCard(
                title = "title2",
                description = "Creates a composable that lays out and draws a given Painter class object.2",
                backgroundColor = Color(0xFFD0BCFF),
                modifier = Modifier.weight(1f)
            )
        }
        Row(Modifier.weight(1f)) {
            ComposableInfoCard(
                title = "title3",
                description = "Creates a composable that lays out and draws a given Painter class object.3",
                backgroundColor = Color(0xFFB69DF8),
                modifier = Modifier.weight(1f)
            )
            ComposableInfoCard(
                title = "title4",
                description = "Creates a composable that lays out and draws a given Painter class object.4",
                backgroundColor = Color(0xFFF6EDFF),
                modifier = Modifier.weight(1f)
            )
        }
    }
}
 
@Composable
private fun ComposableInfoCard(
    title: String,
    description: String,
    backgroundColor: Color,
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier
            .fillMaxSize()
            .background(backgroundColor)
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = title,
            modifier = Modifier.padding(bottom = 16.dp),
            fontWeight = FontWeight.Bold
        )
        Text(
            text = description,
            textAlign = TextAlign.Justify
        )
    }
}
 
@Preview(showBackground = true)
@Composable
fun ComposeQuadrantAppPreview() {
    ComposequadrantTheme {
        ComposeQuadrantApp()
    }
}

Je viens de perdre 2h dessus ...je suis sur que ce n'est pas grand chose mais je tourne en rond.
Merci d'avance pour le coup de pouce.