{"id":4054,"date":"2022-11-06T10:07:06","date_gmt":"2022-11-06T09:07:06","guid":{"rendered":"http:\/\/blogperso.union31.fr\/?p=4054"},"modified":"2022-11-06T10:22:18","modified_gmt":"2022-11-06T09:22:18","slug":"kotlin-personnaliser-ses-composants","status":"publish","type":"post","link":"https:\/\/blogperso.union31.fr\/?p=4054","title":{"rendered":"KOTLIN : personnaliser ses composants"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Sommaire<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blogperso.union31.fr\/?p=4054\/#I_Introduction\" >I Introduction<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blogperso.union31.fr\/?p=4054\/#II_Utilisation_du_Composable_%C2%AB_OutlinedTextField_%C2%BB\" >II Utilisation du Composable \u00ab\u00a0OutlinedTextField\u00a0\u00bb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blogperso.union31.fr\/?p=4054\/#III_Notre_cas\" >III  Notre cas<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/blogperso.union31.fr\/?p=4054\/#III1_Presentation_composant\" >III.1 Pr\u00e9sentation composant<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/blogperso.union31.fr\/?p=4054\/#III2_Code_du_composant\" >III.2 Code du composant<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/blogperso.union31.fr\/?p=4054\/#III3_Comprehension_graphique_par_blocs_de_code\" >III.3 Compr\u00e9hension graphique par blocs de code<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/blogperso.union31.fr\/?p=4054\/#IV_Code_complet_de_lactivite_integrant_ce_composant_personnalise\" >IV Code complet de l&rsquo;activit\u00e9 int\u00e9grant ce composant personnalis\u00e9<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"I_Introduction\"><\/span>I Introduction<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>L\u2019id\u00e9e est de voir comment cr\u00e9er son propre composant \u00e0 partir de composants classiques de \u00ab\u00a0Compose\u00a0\u00bb.<\/p>\n\n\n\n<p>Pour cela on souhaite&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>une zone de saisie pour renseigner un chiffre\u00a0;<\/li>\n\n\n\n<li>un bouton permettant d\u2019incr\u00e9menter le chiffre ;<\/li>\n\n\n\n<li>un bouton permettant de d\u00e9cr\u00e9menter le chiffre ;<\/li>\n\n\n\n<li>un contr\u00f4le sur la saisie (que des chiffres\u2026).<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\"><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><\/ul>\n\n\n\n<p>L\u2019id\u00e9e est de voir comment cr\u00e9er son propre composant \u00e0 partir de composants classiques de \u00ab\u00a0Compose\u00a0\u00bb.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"II_Utilisation_du_Composable_%C2%AB_OutlinedTextField_%C2%BB\"><\/span>II Utilisation du Composable \u00ab\u00a0OutlinedTextField\u00a0\u00bb<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Nous allons utiliser un Composable de type \u00ab\u00a0OutlinedTextField\u00a0\u00bb qui peut int\u00e9grer des composants dans plusieurs zones, notamment avant et apr\u00e8s le texte de saisie, comme on peut le voir dans l&rsquo;image ci-dessous :<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"815\" height=\"605\" src=\"http:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image.png\" alt=\"\" class=\"wp-image-4055\" srcset=\"https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image.png 815w, https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image-300x223.png 300w, https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image-768x570.png 768w\" sizes=\"auto, (max-width: 815px) 100vw, 815px\" \/><figcaption class=\"wp-element-caption\">Source\u00a0: https:\/\/m2.material.io\/components\/text-fields#anatomy<\/figcaption><\/figure>\n\n\n\n<p>A savoir que ce composable propose les param\u00e8tres suivants\u00a0:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"842\" height=\"574\" src=\"http:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image-1.png\" alt=\"\" class=\"wp-image-4056\" srcset=\"https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image-1.png 842w, https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image-1-300x205.png 300w, https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image-1-768x524.png 768w\" sizes=\"auto, (max-width: 842px) 100vw, 842px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"III_Notre_cas\"><\/span>III  Notre cas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"III1_Presentation_composant\"><\/span>III.1 Pr\u00e9sentation composant<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Notre composant sera de la forme suivante\u00a0:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"340\" src=\"http:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image-2-1024x340.png\" alt=\"\" class=\"wp-image-4057\" srcset=\"https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image-2-1024x340.png 1024w, https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image-2-300x100.png 300w, https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image-2-768x255.png 768w, https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image-2.png 1087w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"III2_Code_du_composant\"><\/span>III.2 Code du composant<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Le code du Composable sera le suivant :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"kotlin\" class=\"language-kotlin\">\/**\n * Composant permettant d'incr\u00e9menter\/d\u00e9cr\u00e9menter un chiffre avec possibilit\u00e9 de modifier manuellemet la valeur\n * @param valeur_initiale valeur qu'affichera le composant au premier affichage\n * @param valeur_label libell\u00e9 de la zone de saisie\n * @param callback_retour_valeur fonction retour qui donnera la valeur du composant\n *\/\n@Composable\nfun Texte_saisie( valeur_initiale:String = \"0\",\n                  valeur_label:String=\"\",\n                  callback_retour_valeur : ( (valeur:Int)->Unit )?=null\n                  ) {\n\n    \/\/ Pour m\u00e9moriser la valeur renseign\u00e9e par l'utilisateur\n    var valeur_saisie by remember { mutableStateOf(valeur_initiale)}\n\n    OutlinedTextField(\n        \/\/ Enregistrement changement texte\n        value = valeur_saisie,   \/\/ valeur en cours\n        onValueChange = {\n            valeur_saisie = it      \/\/ d\u00e8s changement, on modifie la valeur en cours\n            valeur_saisie = valeur_saisie.replace(\"[^0-9,\\\\.]\".toRegex(),\"\")\n        },\n        \/\/ Fait en sorte que le sorte que le texte soit centr\u00e9 horizontalement\n        textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center),\n        \/\/ Change la couleur de de fond\n        colors = TextFieldDefaults.textFieldColors(backgroundColor = Color(0xBEBCDC97)),\n        \/\/ on force \u00e0 une seule ligne\n        singleLine = true,\n        \/\/Espacement , taille, sortie de focus\n        modifier = Modifier\n            .padding(start = 20.dp, end = 10.dp)\n            .defaultMinSize(\n                minWidth = 2.dp,\n                minHeight = 2.dp\n            ) \/\/ bof ... prend une autre taille min par defaut\n            .width(160.dp) \/\/ influe sur la taille mais fixe les choses ...\n            .onFocusChanged {\n                            if (!it.isFocused) {\n                                \/\/ retour valeur\n                                try {\n                                    callback_retour_valeur?.invoke(valeur_saisie.toInt())\n                                } catch (e:Exception) {\n                                }\n                            }\n            }\n        ,\n        \/\/ Nom du champ\n        \/\/   si valeur non renseign\u00e9e, affichera dans la zone valeur\n        \/\/   si valeur renseign\u00e9e, cette zone sera plac\u00e9e en haut \u00e0 gauche en miniature\n        \/\/     au dessus de la zone de valeur\n        label = {\n            Row() {\n                \/\/Icon(imageVector = Icons.Rounded.Favorite , contentDescription = null )\n                Text(text = valeur_label)\n            }\n        },\n        \/\/ Place quand valeur non renseign\u00e9e et focus (emplacement de la zone valeur \u00e0 renseigner)\n        \/\/    --> Attention la hauteur prendra la hauteur de ce texte si texte plus long que le label\n        placeholder = {\n            \/\/Text(text = \"Texte quand valeur non renseign\u00e9e avec une grande description de la mort qui tue\")\n        },\n        \/\/ Place avant le texte de saisie\n        leadingIcon = {\n           Icon(\n               imageVector = Icons.Rounded.Remove ,\n               contentDescription = null,\n               modifier = Modifier.clickable {\n                   valeur_saisie = Decremente_valeur(valeur_saisie)\n                   \/\/ renvoie valeur\n                   try {\n                       callback_retour_valeur?.invoke(valeur_saisie.toInt())\n                   } catch (e:Exception) {\n                   }\n\n               }\n           )\n        },\n        \/\/ Place apr\u00e8s le texte de saisie\n        trailingIcon = {\n            Icon(\n                imageVector = Icons.Rounded.Add ,\n                contentDescription = null,\n                modifier = Modifier.clickable {\n                    valeur_saisie = Incremente_valeur(valeur_saisie)\n                    \/\/ renvoie valeur\n                    try {\n                        callback_retour_valeur?.invoke(valeur_saisie.toInt())\n                    } catch (e:Exception) {\n                    }\n                }\n            )\n        },\n\n        \/\/ Force la possibilit\u00e9 de ne pas changer la valeur\n        \/\/readOnly = true\n        \/\/ D\u00e9finit le type de clavier \u00e0 utiliser (chiffre)\n        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number,imeAction = ImeAction.Default),\n\n    )\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"III3_Comprehension_graphique_par_blocs_de_code\"><\/span>III.3 Compr\u00e9hension graphique par blocs de code<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Ci-dessous les principaux morceaux de code qui permettent d&rsquo;obtenir le composant souhait\u00e9 :<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"656\" src=\"http:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image-3-1024x656.png\" alt=\"\" class=\"wp-image-4058\" srcset=\"https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image-3-1024x656.png 1024w, https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image-3-300x192.png 300w, https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image-3-768x492.png 768w, https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image-3.png 1340w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"IV_Code_complet_de_lactivite_integrant_ce_composant_personnalise\"><\/span>IV Code complet de l&rsquo;activit\u00e9 int\u00e9grant ce composant personnalis\u00e9<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ainsi le code complet :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"kotlin\" class=\"language-kotlin\">package com.example.textview_test1\n\nimport android.os.Bundle\nimport androidx.activity.ComponentActivity\nimport androidx.activity.compose.setContent\nimport androidx.compose.foundation.clickable\nimport androidx.compose.foundation.layout.*\nimport androidx.compose.foundation.text.KeyboardOptions\nimport androidx.compose.material.*\nimport androidx.compose.material.icons.Icons\nimport androidx.compose.material.icons.rounded.*\nimport androidx.compose.runtime.*\nimport androidx.compose.ui.Modifier\nimport androidx.compose.ui.focus.onFocusChanged\nimport androidx.compose.ui.graphics.Color\nimport androidx.compose.ui.text.input.ImeAction\nimport androidx.compose.ui.text.input.KeyboardType\nimport androidx.compose.ui.text.style.TextAlign\nimport androidx.compose.ui.tooling.preview.Preview\nimport androidx.compose.ui.unit.dp\nimport com.example.textview_test1.ui.theme.Textview_test1Theme\n\nclass MainActivity : ComponentActivity() {\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContent {\n            Textview_test1Theme {\n                \/\/ A surface container using the 'background' color from the theme\n                Surface(\n                    modifier = Modifier.fillMaxSize(),\n                    \/\/color = MaterialTheme.colors.error\n                ) {\n                    Sommaire()\n                }\n            }\n        }\n    }\n\n}\n\n\/**\n * Composant permettant d'incr\u00e9menter\/d\u00e9cr\u00e9menter un chiffre avec possibilit\u00e9 de modifier manuellemet la valeur\n * @param valeur_initiale valeur qu'affichera le composant au premier affichage\n * @param valeur_label libell\u00e9 de la zone de saisie\n * @param callback_retour_valeur fonction retour qui donnera la valeur du composant\n *\/\n@Composable\nfun Texte_saisie( valeur_initiale:String = \"0\",\n                  valeur_label:String=\"\",\n                  callback_retour_valeur : ( (valeur:Int)->Unit )?=null\n                  ) {\n\n    \/\/ Pour m\u00e9moriser la valeur renseign\u00e9e par l'utilisateur\n    var valeur_saisie by remember { mutableStateOf(valeur_initiale)}\n\n    OutlinedTextField(\n        \/\/ Enregistrement changement texte\n        value = valeur_saisie,   \/\/ valeur en cours\n        onValueChange = {\n            valeur_saisie = it      \/\/ d\u00e8s changement, on modifie la valeur en cours\n            valeur_saisie = valeur_saisie.replace(\"[^0-9,\\\\.]\".toRegex(),\"\")\n        },\n        \/\/ Fait en sorte que le sorte que le texte soit centr\u00e9 horizontalement\n        textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center),\n        \/\/ Change la couleur de de fond\n        colors = TextFieldDefaults.textFieldColors(backgroundColor = Color(0xBEBCDC97)),\n        \/\/ on force \u00e0 une seule ligne\n        singleLine = true,\n        \/\/Espacement , taille, sortie de focus\n        modifier = Modifier\n            .padding(start = 20.dp, end = 10.dp)\n            .defaultMinSize(\n                minWidth = 2.dp,\n                minHeight = 2.dp\n            ) \/\/ bof ... prend une autre taille min par defaut\n            .width(160.dp) \/\/ influe sur la taille mais fixe les choses ...\n            .onFocusChanged {\n                            if (!it.isFocused) {\n                                \/\/ retour valeur\n                                try {\n                                    callback_retour_valeur?.invoke(valeur_saisie.toInt())\n                                } catch (e:Exception) {\n                                }\n                            }\n            }\n        ,\n        \/\/ Nom du champ\n        \/\/   si valeur non renseign\u00e9e, affichera dans la zone valeur\n        \/\/   si valeur renseign\u00e9e, cette zone sera plac\u00e9e en haut \u00e0 gauche en miniature\n        \/\/     au dessus de la zone de valeur\n        label = {\n            Row() {\n                \/\/Icon(imageVector = Icons.Rounded.Favorite , contentDescription = null )\n                Text(text = valeur_label)\n            }\n        },\n        \/\/ Place quand valeur non renseign\u00e9e et focus (emplacement de la zone valeur \u00e0 renseigner)\n        \/\/    --> Attention la hauteur prendra la hauteur de ce texte si texte plus long que le label\n        placeholder = {\n            \/\/Text(text = \"Texte quand valeur non renseign\u00e9e avec une grande description de la mort qui tue\")\n        },\n        \/\/ Place avant le texte de saisie\n        leadingIcon = {\n           Icon(\n               imageVector = Icons.Rounded.Remove ,\n               contentDescription = null,\n               modifier = Modifier.clickable {\n                   valeur_saisie = Decremente_valeur(valeur_saisie)\n                   \/\/ renvoie valeur\n                   try {\n                       callback_retour_valeur?.invoke(valeur_saisie.toInt())\n                   } catch (e:Exception) {\n                   }\n\n               }\n           )\n        },\n        \/\/ Place apr\u00e8s le texte de saisie\n        trailingIcon = {\n            Icon(\n                imageVector = Icons.Rounded.Add ,\n                contentDescription = null,\n                modifier = Modifier.clickable {\n                    valeur_saisie = Incremente_valeur(valeur_saisie)\n                    \/\/ renvoie valeur\n                    try {\n                        callback_retour_valeur?.invoke(valeur_saisie.toInt())\n                    } catch (e:Exception) {\n                    }\n                }\n            )\n        },\n\n        \/\/ Force la possibilit\u00e9 de ne pas changer la valeur\n        \/\/readOnly = true\n        \/\/ D\u00e9finit le type de clavier \u00e0 utiliser (chiffre)\n        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number,imeAction = ImeAction.Default),\n\n    )\n}\n\n\/**\n * Incr\u00e9mente une valeur de type String\n * @param valeur\n * @return Valeur sous forme de String\n *\/\nfun Incremente_valeur(valeur:String):String {\n    var val_int = 0\n\n    try {\n        val_int = valeur.toInt()\n        val_int++\n    } catch (e:Exception) {\n\n    }\n    return val_int.toString()\n}\n\n\/**\n * D\u00e9cr\u00e9mente une valeur de type String\n * @param valeur\n * @return Valeur sous forme de String\n *\/\nfun Decremente_valeur(valeur:String):String {\n    var val_int = 0\n    try {\n        val_int = valeur.toInt()\n        val_int--\n    } catch (e:Exception) {\n\n    }\n    return val_int.toString()\n}\n\n\n\/**\n * Construction g\u00e9n\u00e9rale de l'activit\u00e9\n *\/\n@Composable\nfun Sommaire() {\n\n    var valeur_texte_saisie1 by remember { mutableStateOf(0) }\n\n\n    Column() {\n        Text(text = \"Test Textview\")\n        Spacer(modifier = Modifier.height(20.dp))\n        Row(\n            modifier = Modifier.fillMaxWidth(),\n            horizontalArrangement = Arrangement.Center\n        ) {\n            Texte_saisie(\n                valeur_label = \"Ann\u00e9e Min\",\n                callback_retour_valeur = {\n                    \/\/ r\u00e9cup\u00e8re la valeur saisie (manuellement ou via les boutons)\n                    valeur_texte_saisie1 = it\n                }\n            )\n            Spacer(modifier = Modifier.width(10.dp))\n            Texte_saisie(valeur_label = \"Ann\u00e9e Max\")\n        }\n\n        Spacer(modifier = Modifier.height(8.dp))\n        Row(\n            modifier = Modifier.fillMaxWidth(),\n            horizontalArrangement = Arrangement.Center\n        ) {\n            Texte_saisie(valeur_label = \"D\u00e9but taux\")\n            Spacer(modifier = Modifier.width(10.dp))\n            Texte_saisie(valeur_label = \"Fin Taux\")\n        }\n\n        Spacer(modifier = Modifier.height(8.dp)) \n        Row (\n            modifier=Modifier.fillMaxWidth()\n                ) {\n            Text(text = \"Valeur : \" + valeur_texte_saisie1.toString())\n        \n        }\n    }\n}\n\n@Preview(showBackground = true)\n@Composable\nfun DefaultPreview() {\n    Textview_test1Theme {\n        Sommaire()\n    }\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>Aper\u00e7u de l&rsquo;activit\u00e9 :<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image-4.png\" alt=\"\" class=\"wp-image-4069\" width=\"244\" height=\"419\" srcset=\"https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image-4.png 487w, https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/11\/image-4-175x300.png 175w\" sizes=\"auto, (max-width: 244px) 100vw, 244px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>I Introduction L\u2019id\u00e9e est de voir comment cr\u00e9er son propre composant \u00e0 partir de composants classiques de \u00ab\u00a0Compose\u00a0\u00bb. Pour cela on souhaite&nbsp;: L\u2019id\u00e9e est de voir comment cr\u00e9er son propre composant \u00e0 partir de composants classiques de \u00ab\u00a0Compose\u00a0\u00bb. II Utilisation<\/p>\n","protected":false},"author":1,"featured_media":4065,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-4054","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-_dev"],"_links":{"self":[{"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/posts\/4054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4054"}],"version-history":[{"count":7,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/posts\/4054\/revisions"}],"predecessor-version":[{"id":4070,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/posts\/4054\/revisions\/4070"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/media\/4065"}],"wp:attachment":[{"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}