1. Text

日常最常用的應(yīng)該就是顯示文字，所以有必要說(shuō)一下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
)

部分屬性，見(jiàn)名知意，所以就不多說(shuō)了。

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

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

效果圖：

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

• overflow：文字在顯示不下溢出時(shí)的顯示方式。TextOverflow.Clip直接截?cái)啵?code>TextOverflow.Ellipsis顯示省略號(hào)，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,
        )
    }

效果圖：

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

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

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)容，用于可訪問(wèn)型服務(wù)。
• modifier上一篇有介紹，這里略過(guò)。
• alignment就是圖片在固定大小中的對(duì)齊方式。一共是八個(gè)方位加一個(gè)居中九種類型。
• alpha：圖片透明度。
• colorFilter：顏色過(guò)濾器，基本和ImageVIew的一致。比如ColorFilter.lighting(multiply: Color, add: Color)用法和LightingColorFilter一樣，ColorFilter.colorMatrix(colorMatrix: ColorMatrix)和ColorMatrixColorFilter一樣。這里放一個(gè)著色的小例子：

	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 等比縮放到完全填充整個(gè)控件，如果結(jié)合Alignment.Center就和ImageView的ScaleType.CENTER_CROP一致。

(2). ContentScale.Fit 等比縮放到自適應(yīng)整個(gè)控件，如果結(jié)合Alignment.Center就和ImageView的ScaleType.FIT_CENTER一致。此模式為Image默認(rèn)值。對(duì)于ImageView的ScaleType.FIT_START和ScaleType.FIT_END其實(shí)就是調(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一致。

因?yàn)榛旧虾驮鶬mageView類似，這里就簡(jiǎn)單示例一下：

	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,
        )
    }

效果圖：

最后補(bǔ)充一下如何加載網(wǎng)絡(luò)圖片。目前Coil這個(gè)圖片加載框架支持了Jetpack Compose，使用時(shí)添加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,
)

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

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

3. LazyColumn

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

Compose 提供了一組組件，這些組件只會(huì)對(duì)在組件視口中可見(jiàn)的列表項(xiàng)進(jìn)行組合和布局。這些組件包括 LazyColumn 和 LazyRow。

你可以理解為一個(gè)是垂直方向滾動(dòng)的RecyclerView，一個(gè)是水平方向滾動(dòng)的RecyclerView。網(wǎng)格是LazyVerticalGrid，不過(guò)目前還是實(shí)驗(yàn)性（當(dāng)前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：列表項(xiàng)之間在垂直方向上的間距。
• item：添加一個(gè)列表項(xiàng)。
• items：添加多個(gè)列表項(xiàng)。

效果圖：

還有其他一些方法：

• itemsIndexed：用法同items，不過(guò)它會(huì)同時(shí)返回索引。
• stickyHeader：粘性標(biāo)題，也就是平時(shí)見(jiàn)到的吸頂效果。目前為實(shí)驗(yàn)性API，詳細(xì)用法見(jiàn)文末鏈接。

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

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

對(duì)于按鈕（Button）、輸入框（TextField）等組件，因?yàn)槠邢蘧筒灰灰徽f(shuō)明了，大體用法差不太多，結(jié)合文檔相信你也可以快速理解。

對(duì)于ViewPager，SwipeRefreshLayout這類常用組件，可以使用Google開(kāi)源的Accompanist。當(dāng)然里面不止這些，有興趣的可以看一下。

隨著Compose的普及，開(kāi)源社區(qū)上已經(jīng)有了很多的組件供我們使用，對(duì)于日常開(kāi)發(fā)來(lái)說(shuō)已經(jīng)沒(méi)有什么問(wèn)題了。

參考

官方文檔 - 列表

官方文檔 - 文字

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

最新評(píng)論