The vertical layout is: Column
The horizontal layout is: Row
Set content
The text attribute sets the content.
Set weight
Modifier.weight(1.0f, true) weight setting, the first parameter is Float type to set the proportion weight, when the second parameter is true, the element will occupy the entire allocated width.
fontSize sets the font size, and FontFamily(Font(R.font.shizizuo)) sets the font style.
Set font spacing
letterSpacing sets font spacing.
Text(
//weight setting
modifier = Modifier.weight(1.0f, true),
text = "Current quantity: $index",
fontSize = 30.sp,
//Font style setting
fontFamily = FontFamily(Font(R.font.shizizuo)),
//Font color setting
color = colorResource(id = R.color.purple_500),
//Set character spacing
letterSpacing = 5.sp
)
For more attributes, refer to the source code:
fun Text(
text: String,
modifier: Modifier = Modifier,
color: Color = Color.Unspecified,
fontSize: TextUnit = TextUnit.Unspecified,
fontStyle: FontStyle? = null,
fontWeight: FontWeight? = null,
fontFamily: FontFamily? = null,
letterSpacing: TextUnit = TextUnit.Unspecified,
textDecoration: TextDecoration? = null,
textAlign: TextAlign? = null,
lineHeight: TextUnit = TextUnit.Unspecified,
overflow: TextOverflow = TextOverflow.Clip,
softWrap: Boolean = true,
maxLines: Int = Int.MAX_VALUE,
onTextLayout: (TextLayoutResult) -> Unit = {},
style: TextStyle = LocalTextStyle.current
)
Set underline and strikethrough
TextDecoration.Underline sets the underline for the font, TextDecoration.LineThrough sets the strikethrough for the font, and extAlign.Center sets the font content to be centered.
Text(
//width full screen
modifier = Modifier.fillMaxWidth(),
text = "Hello world!",
//underline
textDecoration = TextDecoration.Underline,
//Content centered
textAlign = TextAlign.Center
)
Text(
modifier = Modifier.fillMaxWidth(),
text = "Hello world!",
//Middle stroke (delete/obsolete) line
textDecoration = TextDecoration.LineThrough,
//Content centered
textAlign = TextAlign.Center
)
Set row height
lineHeight sets the line height, fontSize sets the font size, maxLines sets the maximum line, TextOverflow.Clip sets the text to not be displayed if it exceeds the limit, and TextOverflow.Ellipsis sets the ellipsis to be displayed if the text exceeds the limit.
Text(
"The plain embryo outlines the blue and white brush strokes, which turn from thick to light",
//row height
lineHeight = 35.sp,
//Character spacing
letterSpacing = 35.sp,
//font size
fontSize = 15.sp,
//maximum row
// maxLines = 1,
//Cut overflowing text to fix its container.
// overflow = TextOverflow.Clip,
//Use an ellipsis to indicate that the text has overflowed.
// overflow = TextOverflow.Ellipsis,
)
Set the specified character style
Use the buildAnnotatedString property to set the content and SpanStyle to set the character style.
Text(
modifier = Modifier.fillMaxWidth(),
text = buildAnnotatedString {
withStyle(
style = SpanStyle(
fontWeight = FontWeight.Bold,
color = Color.Blue,
fontSize = 20.sp
)
) {
append("H")
}
append("ello\t")
withStyle(
style = SpanStyle(
fontWeight = FontWeight.Bold,
color = Color.Green,
fontSize = 20.sp
)
) {
append("W")
}
append("orld")
},
textAlign = TextAlign.Center
)
Long press to copy and filter copy
The content added in the SelectionContainer property supports long press copy. Set the DisableSelection property in SelectionContainer, and the content set in DisableSelection can be skipped.
SelectionContainer(modifier = Modifier.fillMaxWidth()) {
Column {
Text(
"The sky is blue and waiting for misty rain",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center
)
Text(
"And I'm waiting for you",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center
)
Text(
"The moonlight was salvaged",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center
)
//Filter copy
DisableSelection {
Text(
"Faint ending",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center
)
Text(
"Like the blue and white porcelain handed down from ancient times",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center
)
}
Text(
"Taking care of one's own beauty",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center
)
Text(
"You have a smile in your eyes",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center
)
}
}
Complete code:
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.selection.DisableSelection
import androidx.compose.foundation.text.selection.SelectionContainer
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.cwj.composedemo.ui.theme.ComposeDemoTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeDemoTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
//Dynamically change content, initial value is set to 0
val index = rememberSaveable { mutableStateOf(0) }
Greeting(index.value) {
index.value = it
}
}
}
}
}
}
@Composable
fun Greeting(index: Int, onIndexChangeInt: (Int) -> Unit) {
//Vertical layout
Column(
modifier = Modifier.fillMaxSize(),
//center vertically
// verticalArrangement = Arrangement.Center,
//Horizontally centered
//horizontalAlignment = Alignment.CenterHorizontally,
) {
//horizontal layout
Row(
Modifier.padding(10.dp, 10.dp),
//center vertically
verticalAlignment = Alignment.CenterVertically
) {
Text(
//weight setting
modifier = Modifier.weight(1.0f, true),
text = "Current quantity: $index",
fontSize = 30.sp,
//Font style setting
fontFamily = FontFamily(Font(R.font.shizizuo)),
//Font color setting
color = colorResource(id = R.color.purple_500),
//Set character spacing
letterSpacing = 5.sp
)
Button(
//Border width and color settings
border = BorderStroke(2.dp, color = colorResource(id = R.color.purple_200)),
//round corner settings
shape = RoundedCornerShape(8.dp),
colors = ButtonDefaults.buttonColors(
//container color
containerColor = colorResource(id = R.color.purple_500),
//Content color
contentColor = colorResource(id = R.color.white),
),
onClick = {
onIndexChangeInt(index + 1)
}
) {
Text(
text = stringResource(id = R.string.add),
//Italic
// fontStyle = FontStyle.Italic,
//bold
// fontWeight = FontWeight.Bold,
)
}
}
Text(
//width full screen
modifier = Modifier.fillMaxWidth(),
text = "Hello world!",
//underline
textDecoration = TextDecoration.Underline,
//Content centered
textAlign = TextAlign.Center
)
Text(
modifier = Modifier.fillMaxWidth(),
text = "Hello world!",
//Middle stroke (delete/obsolete) line
textDecoration = TextDecoration.LineThrough,
//Content centered
textAlign = TextAlign.Center
)
Text(
"The plain embryo outlines the blue and white brush strokes, which turn from thick to light",
//row height
lineHeight = 35.sp,
//Character spacing
letterSpacing = 35.sp,
//font size
fontSize = 15.sp,
//maximum row
// maxLines = 1,
//Cut overflowing text to fix its container.
// overflow = TextOverflow.Clip,
//Use an ellipsis to indicate that the text has overflowed.
// overflow = TextOverflow.Ellipsis,
)
Text(
modifier = Modifier.fillMaxWidth(),
text = buildAnnotatedString {
withStyle(
style = SpanStyle(
fontWeight = FontWeight.Bold,
color = Color.Blue,
fontSize = 20.sp
)
) {
append("H")
}
append("ello\t")
withStyle(
style = SpanStyle(
fontWeight = FontWeight.Bold,
color = Color.Green,
fontSize = 20.sp
)
) {
append("W")
}
append("orld")
},
textAlign = TextAlign.Center
)
//Long press to copy
SelectionContainer(modifier = Modifier.fillMaxWidth()) {
Column {
Text(
"The sky is blue and waiting for misty rain",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center
)
Text(
"And I'm waiting for you",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center
)
Text(
"The moonlight was salvaged",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center
)
//Filter copy
DisableSelection {
Text(
"Faint ending",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center
)
Text(
"Like the blue and white porcelain handed down from ancient times",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center
)
}
Text(
"Taking care of one's own beauty",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center
)
Text(
"You have a smile in your eyes",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center
)
}
}
}
}
@Preview(showBackground = true, showSystemUi = true)
@Composable
fun GreetingPreview() {
ComposeDemoTheme {
//Dynamically change content, initial value is set to 0
val index = rememberSaveable { mutableStateOf(0) }
Greeting(index.value) {
index.value = it
}
}
}