Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Bạn có thể tạo kiểu cho các phần văn bản để cải thiện khả năng đọc, tăng trải nghiệm tích cực cho người dùng và khuyến khích sự sáng tạo hơn thông qua việc sử dụng màu sắc và phông chữ.
Khả năng tương thích của phiên bản
Phương thức triển khai này yêu cầu bạn phải đặt minSDK của dự án thành API cấp 21 trở lên.
Phần phụ thuộc
Tạo kiểu cho các phần văn bản
Mã sau đây hiển thị chuỗi "Hello World" bằng màu xanh dương cho chữ "H", màu đỏ cho chữ "W" và màu đen cho phần văn bản còn lại. Để đặt các kiểu khác nhau trong một thành phần kết hợp Text, hãy sử dụng mã sau:
Định kiểu một phần văn bản bằng SpanStyle, một cấu hình cho phép định kiểu ở cấp ký tự.
Kết quả
Hình 1. Một dòng văn bản có nhiều kiểu.
Các bộ sưu tập chứa hướng dẫn này
Hướng dẫn này là một phần của các bộ sưu tập Hướng dẫn nhanh được tuyển chọn này, bao gồm các mục tiêu phát triển Android rộng hơn:
Văn bản hiển thị
Văn bản là phần chính của mọi giao diện người dùng. Tìm hiểu các cách khác nhau để bạn có thể trình bày văn bản trong ứng dụng nhằm mang lại trải nghiệm thú vị cho người dùng.
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-02-22 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-02-22 UTC."],[],[],null,["\u003cbr /\u003e\n\nYou can style parts of text to improve readability, increase positive user\nexperience, and encourage greater creativity through use of colors and fonts.\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nStyle parts of text\n\nThe following code displays the string \"Hello World\" using blue for the \"H\", red\nfor the \"W\", and black for the rest of the text. To set different styles within\na single [`Text`](/reference/kotlin/androidx/compose/material/package-summary#Text(androidx.compose.ui.text.AnnotatedString,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.collections.Map,kotlin.Function1,androidx.compose.ui.text.TextStyle)) composable, use the following code:\n\n\n```kotlin\n@Composable\nfun MultipleStylesInText() {\n Text(\n buildAnnotatedString {\n withStyle(style = SpanStyle(color = Color.Blue)) {\n append(\"H\")\n }\n append(\"ello \")\n\n withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {\n append(\"W\")\n }\n append(\"orld\")\n }\n )\n}https://github.com/android/snippets/blob/7a0ebbee11495f628cf9d574f6b6069c2867232a/compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt#L233-L248\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\n- Uses [`buildAnnotatedString`](/reference/kotlin/androidx/compose/ui/text/package-summary#buildAnnotatedString(kotlin.Function1)) that returns an [`AnnotatedString`](/reference/kotlin/androidx/compose/ui/text/AnnotatedString) string to set different styles within text.\n- Styles part of text with [`SpanStyle`](/reference/kotlin/androidx/compose/ui/text/SpanStyle), a configuration that allows character-level styling.\n\nResults **Figure 1.** A line of text with multiple styles.\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay text \nText is a central piece of any UI. Find out different ways you can present text in your app to provide a delightful user experience. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-text) \n\nHave questions or feedback \nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]