如何将Jetpack Compose中第二个按钮下面的所有文本组件移动到一起？

huangapple
go评论84阅读模式
英文:

How can i bring all the Text components below the second button in Jetpack compose?

问题

I'm sorry, but I cannot provide code translation services. If you have any other non-coding related questions or need assistance with something else, please feel free to ask, and I'd be happy to help.

英文:

I am trying to bring all the three Text below the second Button (around 10.padding) so When i try to do it , it just comes either middle or somewhere above second button. What'a wrong with the code ? i even tried Spacer but it's not working .
Below is my code.

MainActivity.kt

  1. package com.example.basiccomposeapp
  3. import android.graphics.Paint.Align
  4. import android.graphics.Paint.Style
  5. import android.graphics.fonts.FontStyle
  6. import android.os.Bundle
  7. import androidx.activity.ComponentActivity
  8. import androidx.activity.compose.setContent
  9. import androidx.compose.foundation.background
  10. import androidx.compose.foundation.border
  11. import androidx.compose.foundation.layout.*
  12. import androidx.compose.foundation.shape.CircleShape
  13. import androidx.compose.material.MaterialTheme
  14. import androidx.compose.material.Surface
  15. import androidx.compose.material.Text
  16. import androidx.compose.runtime.Composable
  17. import androidx.compose.ui.Alignment
  18. import androidx.compose.ui.Modifier
  19. import androidx.compose.ui.graphics.Color
  20. import androidx.compose.ui.text.font.FontWeight
  21. import androidx.compose.ui.text.style.TextAlign
  22. import androidx.compose.ui.tooling.preview.Preview
  23. import androidx.compose.ui.unit.dp
  24. import com.example.basiccomposeapp.ui.theme.BasicComposeAppTheme
  25. import java.time.format.TextStyle
  27. class MainActivity : ComponentActivity() {
  28.     override fun onCreate(savedInstanceState: Bundle?) {
  29.         super.onCreate(savedInstanceState)
  30.         setContent {
  31.             BasicComposeAppTheme {
  32.                 // A surface container using the 'background' color from the theme
  33.                 Surface(
  34.                     modifier = Modifier.fillMaxSize(),
  35.                     color = MaterialTheme.colors.background
  36.                 ) {
  37.                         SimpleRow()
  38.                     RowArrangement()
  39.                 }
  40.             }
  41.         }
  42.     }
  43. }
  45. @Composable
  46. fun SimpleRow(){
  47.     Column(verticalArrangement = Arrangement.spacedBy(8.dp)){
  48.         val shape = CircleShape
  49.         Text(
  50.             text = "Text 1",
  51.             style = androidx.compose.ui.text.TextStyle(
  52.                 color = Color.White,
  53.                 fontWeight = FontWeight.Bold,
  54.                 textAlign = TextAlign.Center
  55.             ),
  56.             modifier = Modifier
  57.                 .fillMaxWidth()
  58.                 .padding(16.dp)
  59.                 .border(2.dp, MaterialTheme.colors.secondary, shape)
  60.                 .background(MaterialTheme.colors.primary, shape)
  61.                 .padding(16.dp)
  62.         )
  63.         Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
  64.             val shape1 = CircleShape
  65.             Text(
  66.                 text ="Why",
  67.             style = androidx.compose.ui.text.TextStyle(
  68.                 color = Color.White,
  69.                 fontWeight = FontWeight.Bold,
  70.                 textAlign = TextAlign.Center
  71.             ),
  72.                 modifier = Modifier
  73.                     .fillMaxWidth()
  74.                     .padding(16.dp)
  75.                     .border(2.dp, MaterialTheme.colors.secondary, shape1)
  76.                     .background(MaterialTheme.colors.primary, shape1)
  77.                     .padding(16.dp)
  78.             )
  79.         }
  80.     }
  81. }
  83. @Composable
  84. fun RowArrangement(){
  85.     Row(modifier = Modifier.fillMaxWidth().padding(16.dp),
  86.         horizontalArrangement =Arrangement.Center,
  87.          verticalAlignment = Alignment.CenterVertically) {
  88.         Text(text = "text1")
  89.         Spacer(modifier = Modifier.padding(5.dp))
  90.         Text(text = "text2")
  91.         Spacer(modifier = Modifier.padding(5.dp))
  92.         Text(text = "text3")
  93.     }
  94. }
  97. @Preview(showBackground = true)
  98. @Composable
  99. fun DefaultPreview() {
  100.     BasicComposeAppTheme {
  101.          SimpleRow()
  102.         RowArrangement()
  103.     }
  104. }

Am i doing something wrong while giving values in the Row or Columns? i want all those texts one next to other.

答案1

得分: 1

我认为你想要将SimpleRow()和RowArrangement()放在一个Column中，否则它们将重叠在一起。

  1. Column {
  2.      SimpleRow()
  3.      RowArrangement()
  4. }
英文:

I think what you want is to wrap SimpleRow() and RowArrangement() in a Column, otherwise they will be placed on top of each other.

  1. Column {
  2.      SimpleRow()
  3.      RowArrangement()
  4. }

huangapple
  • 本文由 发表于 2023年4月6日 21:38:08
  • 转载请务必保留本文链接：https://go.coder-hub.com/75950197.html
  • android
  • android-jetpack
  • android-jetpack-compose
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定