Jetpack?Compose常用組件詳細介紹

更新時間：2022年10月28日 08:46:34 作者：唯鹿

本篇開始介紹Jetpack?Compose?中常用的組件。有一部分之前的文章中也出現(xiàn)過，今天詳細說明一下

1. Text

日常最常用的應該就是顯示文字，所以有必要說一下Text控件。首先源碼如下：

@Composable
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
)

部分屬性，見名知意，所以就不多說了。

text ：要顯示的文字。顯示資源使用stringResource(R.string.xxx)
modifier上一篇有介紹，這里略過。
color：文字的顏色。如果顏色未指定，并且style也沒有設(shè)置顏色，則使用LocalContentColor的黑色。
textDecoration：文字上繪制的裝飾(例如下劃線TextDecoration.Underline)。
textAlign：文字在容器內(nèi)的對齊方式，例如左對齊（TextAlign.Left），居中（TextAlign.Center）。比較特別的是TextAlign.Justify，表示在換行時拉伸所在行文字，以填充容器的寬度。

	Column {
        Text(
            "Hello Compose Hello Compose",
            modifier = Modifier.width(120.dp)
        )
        Text(
            "Hello Compose Hello Compose",
            modifier = Modifier.width(120.dp),
            textAlign = TextAlign.Justify,
        )
    }

效果圖：

其實這個屬性不太適應于中文，如果你要拉伸需要文字間添加空格。不要誤以為是在指定寬度內(nèi)文字均勻顯示。

overflow：文字在顯示不下溢出時的顯示方式。TextOverflow.Clip直接截斷，TextOverflow.Ellipsis顯示省略號，TextOverflow.Visible繼續(xù)超出邊界顯示。

	Column {
        Text(
            "Hello Compose Hello Compose Hello Compose",
            modifier = Modifier.size(120.dp, 50.dp),
        )
        Text(
            "Hello Compose Hello Compose Hello Compose",
            modifier = Modifier.size(120.dp, 50.dp),
            overflow = TextOverflow.Visible,
        )
    }

效果圖：

注意：無法避免被其他修飾符（如Modifier.clipToBounds）剪切。

softWrap：文字是否自動換行。
onTextLayout：Text布局時執(zhí)行的回調(diào)，返回的TextLayoutResult對象包含段落、文字大小等信息。
style：文字樣式配置，包含上面提到的一些屬性，還有一些例如文字陰影，背景色等屬性。默認使用上層中最近的配置。

2. Image

Image的源碼如下：

@Composable
fun Image(
    painter: Painter,// 或ImageBitmap，ImageVector
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = 1.0f,
    colorFilter: ColorFilter? = null
)

painter：繪制的圖片，加載本地資源使用painterResource(id = R.drawable.xxx)
contentDescription：描述此圖像所代表的內(nèi)容，用于可訪問型服務。
modifier上一篇有介紹，這里略過。
alignment就是圖片在固定大小中的對齊方式。一共是八個方位加一個居中九種類型。
alpha：圖片透明度。
colorFilter：顏色過濾器，基本和ImageVIew的一致。比如ColorFilter.lighting(multiply: Color, add: Color)用法和LightingColorFilter一樣，ColorFilter.colorMatrix(colorMatrix: ColorMatrix)和ColorMatrixColorFilter一樣。這里放一個著色的小例子：

	Column {
        Image(
            painter = painterResource(id = R.drawable.intercom_snooze),
            modifier = Modifier.size(220.dp, 60.dp).background(Color.Yellow),
            contentDescription = null
        )
        Image(
            painter = painterResource(id = R.drawable.intercom_snooze),
            modifier = Modifier.size(220.dp, 60.dp).background(Color.Yellow),
            contentDescription = null,
            colorFilter = ColorFilter.tint(color = Color.Green)
        )
    }

效果圖：

contentScale就是圖片的在固定大小中的縮放類型，和ImageView的scaleType一樣。這里分為以下七種類型：

(1). ContentScale.Crop 等比縮放到完全填充整個控件，如果結(jié)合Alignment.Center就和ImageView的ScaleType.CENTER_CROP一致。

(2). ContentScale.Fit 等比縮放到自適應整個控件，如果結(jié)合Alignment.Center就和ImageView的ScaleType.FIT_CENTER一致。此模式為Image默認值。對于ImageView的ScaleType.FIT_START和ScaleType.FIT_END其實就是調(diào)整alignment屬性。

(3). ContentScale.FillHeight 等比縮放到圖片高度填滿控件高度。

(4). ContentScale.FillWidth 等比縮放到圖片寬度填滿控件寬度。

(5). ContentScale.Inside 如果寬高大于控件寬高，則等比縮放展示。如果圖片寬高小于等于控件寬高，則不縮放直接展示。結(jié)合Alignment.Center就和ImageView的ScaleType.CENTER_INSIDE一致。

(6). ContentScale.None 不縮放，原圖大小展示。結(jié)合Alignment.Center就和ImageView的ScaleType.CENTER一致。

(7). ContentScale.FillBounds拉伸圖片寬高填滿控件，和ImageView的ScaleType.FIT_XY一致。

因為基本上和原生ImageView類似，這里就簡單示例一下：

	Column {
        Image(
            painter = painterResource(id = R.drawable.intercom_snooze),
            modifier = Modifier.size(220.dp, 60.dp).background(Color.Yellow),
            contentDescription = null
        )
        Image(
            painter = painterResource(id = R.drawable.intercom_snooze),
            modifier = Modifier.size(220.dp, 60.dp).background(Color.Yellow),
            contentDescription = null,
            alignment = Alignment.TopStart
        )
        Image(
            painter = painterResource(id = R.drawable.intercom_snooze),
            modifier = Modifier.size(220.dp, 60.dp).background(Color.Yellow),
            contentDescription = null,
            contentScale = ContentScale.Crop,
        )
        Image(
            painter = painterResource(id = R.drawable.intercom_snooze),
            modifier = Modifier.size(220.dp, 60.dp).background(Color.Yellow),
            contentDescription = null,
            contentScale = ContentScale.FillBounds,
        )
    }

效果圖：

最后補充一下如何加載網(wǎng)絡(luò)圖片。目前Coil這個圖片加載框架支持了Jetpack Compose，使用時添加Coil依賴：

implementation("io.coil-kt:coil:1.4.0")
implementation("io.coil-kt:coil-compose:1.4.0")

用法：

Image(
    painter = rememberImagePainter("https://xxx"),
    contentDescription = null,
)

具體的功能用法可以參看文檔，這里就不說明了。

對于我們習慣使用的Glide、Fresco截止本文發(fā)布前官方?jīng)]有支持，但是可以使用Github上開源的landscapist，里面功能很完善，也同時支持Coil。

3. LazyColumn

系統(tǒng)會對所有列表項進行組合和布局，無論它們是否可見，因此如果您需要顯示大量列表項（或長度未知的列表），則使用 Column 等布局可能會導致性能問題。

Compose 提供了一組組件，這些組件只會對在組件視口中可見的列表項進行組合和布局。這些組件包括 LazyColumn 和 LazyRow。

你可以理解為一個是垂直方向滾動的RecyclerView，一個是水平方向滾動的RecyclerView。網(wǎng)格是LazyVerticalGrid，不過目前還是實驗性（當前compose 1.1）。

直接上示例：

	LazyColumn(
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
    ) {
        // Add a single item
        item {
            Text(text = "First item")
        }
        // Add 5 items
        items(5) { index ->
            Text(text = "Item: $index")
        }
        // Add another single item
        item {
            Text(text = "Last item")
        }
    }

contentPadding：內(nèi)容區(qū)域的內(nèi)間距。
verticalArrangement：列表項之間在垂直方向上的間距。
item：添加一個列表項。
items：添加多個列表項。

效果圖：

還有其他一些方法：

itemsIndexed：用法同items，不過它會同時返回索引。
stickyHeader：粘性標題，也就是平時見到的吸頂效果。目前為實驗性API，詳細用法見文末鏈接。

rememberLazyListState：列表的狀態(tài)，提供了firstVisibleItemIndex 和 firstVisibleItemScrollOffset 屬性，可以實現(xiàn)滾動位置的監(jiān)聽。scrollToItem()和 animateScrollToItem()方法，可以實現(xiàn)將列表滾動到指定item。用法：

	val listState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()
    LazyColumn(
        state = listState,
    ) {
       ...
    }
	Button(
        onClick = {
        	// 掛起函數(shù)，需要在協(xié)程中調(diào)用。
            coroutineScope.launch {
                listState.animateScrollToItem(index = 0)
            }
        }
    ) {
        ...
    }

對于按鈕（Button）、輸入框（TextField）等組件，因為篇幅有限就不一一說明了，大體用法差不太多，結(jié)合文檔相信你也可以快速理解。

對于ViewPager，SwipeRefreshLayout這類常用組件，可以使用Google開源的Accompanist。當然里面不止這些，有興趣的可以看一下。

隨著Compose的普及，開源社區(qū)上已經(jīng)有了很多的組件供我們使用，對于日常開發(fā)來說已經(jīng)沒有什么問題了。

參考

官方文檔 - 列表

官方文檔 - 文字

到此這篇關(guān)于Jetpack Compose常用組件詳細介紹的文章就介紹到這了,更多相關(guān)Jetpack Compose組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: