• Compose中的Text组件

    纵向布局为：Column

    横向布局为：Row

    设置内容

    text属性设置内容。

    设置权重

    Modifier.weight(1.0f, true)权重设置，第一个参数 Float类型设置占比权重，第二个参数当为true时，元素将占据分配的整个宽度。

    fontSize设置字体大小，FontFamily(Font(R.font.shizizuo))设置字体样式。

    设置字体间距

    letterSpacing 设置字体间距。

    1. Text(
    2.     //权重设置
    3.     modifier = Modifier.weight(1.0f, true),
    4.     text = "当前数量：$index",
    5.     fontSize = 30.sp,
    6.     //字体样式设置
    7.     fontFamily = FontFamily(Font(R.font.shizizuo)),
    8.     //字体颜色设置
    9.     color = colorResource(id = R.color.purple_500),
    10.     //设置字符间距
    11.     letterSpacing = 5.sp
    12. )

    更多属性参考源码：

    1. fun Text(
    2.     text: String,
    3.     modifier: Modifier = Modifier,
    4.     color: Color = Color.Unspecified,
    5.     fontSize: TextUnit = TextUnit.Unspecified,
    6.     fontStyle: FontStyle? = null,
    7.     fontWeight: FontWeight? = null,
    8.     fontFamily: FontFamily? = null,
    9.     letterSpacing: TextUnit = TextUnit.Unspecified,
    10.     textDecoration: TextDecoration? = null,
    11.     textAlign: TextAlign? = null,
    12.     lineHeight: TextUnit = TextUnit.Unspecified,
    13.     overflow: TextOverflow = TextOverflow.Clip,
    14.     softWrap: Boolean = true,
    15.     maxLines: Int = Int.MAX_VALUE,
    16.     onTextLayout: (TextLayoutResult) -> Unit = {},
    17.     style: TextStyle = LocalTextStyle.current
    18. )

    设置下划线与删除线

    TextDecoration.Underline给字体设置下划线，TextDecoration.LineThrough给字体设置删除线，extAlign.Center设置字体内容居中。

    1. Text(
    2.     //宽度全屏
    3.     modifier = Modifier.fillMaxWidth(),
    4.     text = "Hello world!",
    5.     //下划线
    6.     textDecoration = TextDecoration.Underline,
    7.     //内容居中
    8.     textAlign = TextAlign.Center
    9. )
    10.  
    11. Text(
    12.     modifier = Modifier.fillMaxWidth(),
    13.     text = "Hello world!",
    14.     //中划(删除/过时)线
    15.     textDecoration = TextDecoration.LineThrough,
    16.     //内容居中
    17.     textAlign = TextAlign.Center
    18. )

    设置行高

    lineHeight设置行高，fontSize设置字体大小，maxLines设置最大行，TextOverflow.Clip设置文本超出不显示，TextOverflow.Ellipsis设置超出文本省略号显示。

    1. Text(
    2.     "素胚勾勒出青花笔锋浓转淡",
    3.     //行高
    4.     lineHeight = 35.sp,
    5.     //字符间距
    6.     letterSpacing = 35.sp,
    7.     //字体大小
    8.     fontSize = 15.sp,
    9.     //最大行
    10. //    maxLines = 1,
    11.     //剪切溢出的文本以固定其容器。
    12. //    overflow = TextOverflow.Clip,
    13.     //使用省略号表示文本已溢出。
    14. //    overflow = TextOverflow.Ellipsis,
    15. )

    设置指定字符样式

    使用buildAnnotatedString属性设置内容，SpanStyle设置字符样式。

    1. Text(
    2.     modifier = Modifier.fillMaxWidth(),
    3.     text = buildAnnotatedString {
    4.         withStyle(
    5.             style = SpanStyle(
    6.                 fontWeight = FontWeight.Bold,
    7.                 color = Color.Blue,
    8.                 fontSize = 20.sp
    9.             )
    10.         ) {
    11.             append("H")
    12.         }
    13.         append("ello\t")
    14.         withStyle(
    15.             style = SpanStyle(
    16.                 fontWeight = FontWeight.Bold,
    17.                 color = Color.Green,
    18.                 fontSize = 20.sp
    19.             )
    20.         ) {
    21.             append("W")
    22.         }
    23.         append("orld")
    24.     },
    25.     textAlign = TextAlign.Center
    26. )

     长按复制与过滤复制

    SelectionContainer属性中添加的内容支持长按复制。SelectionContainer中设置DisableSelection属性，DisableSelection中设置的内容可跳过复制。

    1. SelectionContainer(modifier = Modifier.fillMaxWidth()) {
    2.     Column {
    3.         Text(
    4.             "天青色等烟雨",
    5.             modifier = Modifier.fillMaxWidth(),
    6.             textAlign = TextAlign.Center
    7.         )
    8.         Text(
    9.             "而我在等你",
    10.             modifier = Modifier.fillMaxWidth(),
    11.             textAlign = TextAlign.Center
    12.         )
    13.         Text(
    14.             "月色被打捞起",
    15.             modifier = Modifier.fillMaxWidth(),
    16.             textAlign = TextAlign.Center
    17.         )
    18.         //过滤复制
    19.         DisableSelection {
    20.             Text(
    21.                 "晕开了结局",
    22.                 modifier = Modifier.fillMaxWidth(),
    23.                 textAlign = TextAlign.Center
    24.             )
    25.             Text(
    26.                 "如传世的青花瓷",
    27.                 modifier = Modifier.fillMaxWidth(),
    28.                 textAlign = TextAlign.Center
    29.             )
    30.         }
    31.         Text(
    32.             "自顾自美丽",
    33.             modifier = Modifier.fillMaxWidth(),
    34.             textAlign = TextAlign.Center
    35.         )
    36.         Text(
    37.             "你眼带笑意",
    38.             modifier = Modifier.fillMaxWidth(),
    39.             textAlign = TextAlign.Center
    40.         )
    41.     }
    42. }

    完整代码：

    1. import android.os.Bundle
    2. import androidx.activity.ComponentActivity
    3. import androidx.activity.compose.setContent
    4. import androidx.compose.foundation.BorderStroke
    5. import androidx.compose.foundation.layout.Column
    6. import androidx.compose.foundation.layout.Row
    7. import androidx.compose.foundation.layout.fillMaxSize
    8. import androidx.compose.foundation.layout.fillMaxWidth
    9. import androidx.compose.foundation.layout.padding
    10. import androidx.compose.foundation.shape.RoundedCornerShape
    11. import androidx.compose.foundation.text.selection.DisableSelection
    12. import androidx.compose.foundation.text.selection.SelectionContainer
    13. import androidx.compose.material3.Button
    14. import androidx.compose.material3.ButtonDefaults
    15. import androidx.compose.material3.MaterialTheme
    16. import androidx.compose.material3.Surface
    17. import androidx.compose.material3.Text
    18. import androidx.compose.runtime.Composable
    19. import androidx.compose.runtime.mutableStateOf
    20. import androidx.compose.runtime.saveable.rememberSaveable
    21. import androidx.compose.ui.Alignment
    22. import androidx.compose.ui.Modifier
    23. import androidx.compose.ui.graphics.Color
    24. import androidx.compose.ui.res.colorResource
    25. import androidx.compose.ui.res.stringResource
    26. import androidx.compose.ui.text.SpanStyle
    27. import androidx.compose.ui.text.buildAnnotatedString
    28. import androidx.compose.ui.text.font.Font
    29. import androidx.compose.ui.text.font.FontFamily
    30. import androidx.compose.ui.text.font.FontWeight
    31. import androidx.compose.ui.text.style.TextAlign
    32. import androidx.compose.ui.text.style.TextDecoration
    33. import androidx.compose.ui.text.withStyle
    34. import androidx.compose.ui.tooling.preview.Preview
    35. import androidx.compose.ui.unit.dp
    36. import androidx.compose.ui.unit.sp
    37. import com.cwj.composedemo.ui.theme.ComposeDemoTheme
    38.  
    39. class MainActivity : ComponentActivity() {
    40.     override fun onCreate(savedInstanceState: Bundle?) {
    41.         super.onCreate(savedInstanceState)
    42.         setContent {
    43.             ComposeDemoTheme {
    44.                 // A surface container using the 'background' color from the theme
    45.                 Surface(
    46.                     modifier = Modifier.fillMaxSize(),
    47.                     color = MaterialTheme.colorScheme.background
    48.                 ) {
    49.                     //动态改变内容，初始值设置为0
    50.                     val index = rememberSaveable { mutableStateOf(0) }
    51.                     Greeting(index.value) {
    52.                         index.value = it
    53.                     }
    54.                 }
    55.             }
    56.         }
    57.     }
    58. }
    59.  
    60. @Composable
    61. fun Greeting(index: Int, onIndexChangeInt: (Int) -> Unit) {
    62.     //纵向布局
    63.     Column(
    64.         modifier = Modifier.fillMaxSize(),
    65.         //纵向居中
    66. //        verticalArrangement = Arrangement.Center,
    67.         //横向居中
    68. //        horizontalAlignment = Alignment.CenterHorizontally,
    69.     ) {
    70.         //横向布局
    71.         Row(
    72.             Modifier.padding(10.dp, 10.dp),
    73.             //纵向居中
    74.             verticalAlignment = Alignment.CenterVertically
    75.         ) {
    76.             Text(
    77.                 //权重设置
    78.                 modifier = Modifier.weight(1.0f, true),
    79.                 text = "当前数量：$index",
    80.                 fontSize = 30.sp,
    81.                 //字体样式设置
    82.                 fontFamily = FontFamily(Font(R.font.shizizuo)),
    83.                 //字体颜色设置
    84.                 color = colorResource(id = R.color.purple_500),
    85.                 //设置字符间距
    86.                 letterSpacing = 5.sp
    87.             )
    88.  
    89.             Button(
    90.                 //边框宽度与颜色设置
    91.                 border = BorderStroke(2.dp, color = colorResource(id = R.color.purple_200)),
    92.                 //圆角设置
    93.                 shape = RoundedCornerShape(8.dp),
    94.                 colors = ButtonDefaults.buttonColors(
    95.                     //容器颜色
    96.                     containerColor = colorResource(id = R.color.purple_500),
    97.                     //内容颜色
    98.                     contentColor = colorResource(id = R.color.white),
    99.                 ),
    100.                 onClick = {
    101.                     onIndexChangeInt(index + 1)
    102.                 }
    103.             ) {
    104.                 Text(
    105.                     text = stringResource(id = R.string.add),
    106.                     //斜体
    107. //                fontStyle = FontStyle.Italic,
    108.                     //加粗
    109. //                fontWeight = FontWeight.Bold,
    110.                 )
    111.             }
    112.         }
    113.  
    114.         Text(
    115.             //宽度全屏
    116.             modifier = Modifier.fillMaxWidth(),
    117.             text = "Hello world!",
    118.             //下划线
    119.             textDecoration = TextDecoration.Underline,
    120.             //内容居中
    121.             textAlign = TextAlign.Center
    122.         )
    123.  
    124.         Text(
    125.             modifier = Modifier.fillMaxWidth(),
    126.             text = "Hello world!",
    127.             //中划(删除/过时)线
    128.             textDecoration = TextDecoration.LineThrough,
    129.             //内容居中
    130.             textAlign = TextAlign.Center
    131.         )
    132.  
    133.         Text(
    134.             "素胚勾勒出青花笔锋浓转淡",
    135.             //行高
    136.             lineHeight = 35.sp,
    137.             //字符间距
    138.             letterSpacing = 35.sp,
    139.             //字体大小
    140.             fontSize = 15.sp,
    141.             //最大行
    142. //            maxLines = 1,
    143.             //剪切溢出的文本以固定其容器。
    144. //            overflow = TextOverflow.Clip,
    145.             //使用省略号表示文本已溢出。
    146. //            overflow = TextOverflow.Ellipsis,
    147.         )
    148.  
    149.         Text(
    150.             modifier = Modifier.fillMaxWidth(),
    151.             text = buildAnnotatedString {
    152.                 withStyle(
    153.                     style = SpanStyle(
    154.                         fontWeight = FontWeight.Bold,
    155.                         color = Color.Blue,
    156.                         fontSize = 20.sp
    157.                     )
    158.                 ) {
    159.                     append("H")
    160.                 }
    161.                 append("ello\t")
    162.  
    163.                 withStyle(
    164.                     style = SpanStyle(
    165.                         fontWeight = FontWeight.Bold,
    166.                         color = Color.Green,
    167.                         fontSize = 20.sp
    168.                     )
    169.                 ) {
    170.                     append("W")
    171.                 }
    172.                 append("orld")
    173.             },
    174.             textAlign = TextAlign.Center
    175.         )
    176.  
    177.         //长按复制
    178.         SelectionContainer(modifier = Modifier.fillMaxWidth()) {
    179.             Column {
    180.                 Text(
    181.                     "天青色等烟雨",
    182.                     modifier = Modifier.fillMaxWidth(),
    183.                     textAlign = TextAlign.Center
    184.                 )
    185.                 Text(
    186.                     "而我在等你",
    187.                     modifier = Modifier.fillMaxWidth(),
    188.                     textAlign = TextAlign.Center
    189.                 )
    190.                 Text(
    191.                     "月色被打捞起",
    192.                     modifier = Modifier.fillMaxWidth(),
    193.                     textAlign = TextAlign.Center
    194.                 )
    195.                 //过滤复制
    196.                 DisableSelection {
    197.                     Text(
    198.                         "晕开了结局",
    199.                         modifier = Modifier.fillMaxWidth(),
    200.                         textAlign = TextAlign.Center
    201.                     )
    202.                     Text(
    203.                         "如传世的青花瓷",
    204.                         modifier = Modifier.fillMaxWidth(),
    205.                         textAlign = TextAlign.Center
    206.                     )
    207.                 }
    208.                 Text(
    209.                     "自顾自美丽",
    210.                     modifier = Modifier.fillMaxWidth(),
    211.                     textAlign = TextAlign.Center
    212.                 )
    213.                 Text(
    214.                     "你眼带笑意",
    215.                     modifier = Modifier.fillMaxWidth(),
    216.                     textAlign = TextAlign.Center
    217.                 )
    218.             }
    219.         }
    220.     }
    221. }
    222.  
    223. @Preview(showBackground = true, showSystemUi = true)
    224. @Composable
    225. fun GreetingPreview() {
    226.     ComposeDemoTheme {
    227.         //动态改变内容，初始值设置为0
    228.         val index = rememberSaveable { mutableStateOf(0) }
    229.         Greeting(index.value) {
    230.             index.value = it
    231.         }
    232.     }
    233. }

  • 相关阅读:
    网络渗透课2
    VMware虚拟机中的Linux通过NAT模式共享主机网卡实现与外部设备通信
    Chrome扩展开发实战：网页图片抓取，打造专属自己的效率插件
    大话STL第六期——map/multimap
    一小时上手微信小程序开发
    跨平台游戏引擎 Axmol-2.0.0 正式发布
    rocky linux 8.5 基本设置
    Nginx gateway集群和动态网关
    AndroidStudio 新建工程的基本修改及事件添加
    计算机的发展史以及未来 App和Cloud这10年发展很快，被忽略的硬性的螺旋上升 QCon 大会2022
  • 原文地址：https://blog.csdn.net/juer2017/article/details/133633302