Jetpack Compose布局的使用詳細(xì)介紹

更新時(shí)間：2022年09月06日 14:19:23 作者：兒歌八萬(wàn)首

Jetpack Compose是用于構(gòu)建原生Android界面的新工具包。它可簡(jiǎn)化并加快Android上的界面開(kāi)發(fā)，使用更少的代碼、強(qiáng)大的工具和直觀(guān)的 Kotlin API，快速讓?xiě)?yīng)用生動(dòng)而精彩

一.標(biāo)準(zhǔn)布局組件

Compose中可以將多個(gè)控件元素組合使用，例如下面這樣，

@Composable
fun WidgetGroup() {
    Text(text = "不為往事擾")
    Text(text = "余生只愿笑")
}

但是我們會(huì)發(fā)現(xiàn)，如果僅僅是這樣，兩個(gè)文本控件會(huì)重疊在一起，類(lèi)似于下面這種樣式：

如果我們想將多個(gè)控件垂直擺放在一起，可以在控件外層添加Column：組件

@Composable
fun WidgetGroup() {
    Column {
        Text(text = "不為往事擾")
        Text(text = "余生只愿笑")
    }
}

如果想要水平擺放在頁(yè)面上可以使用 Row組件

@Composable
fun WidgetGroup() {
    Row {
        Text(text = "不為往事擾")
        Text(text = "余生只愿笑")
    }
}

二.修飾符

如果我們還想在文字下面添加一張圖片，可以直接添加一個(gè)Image控件：

@Composable
fun WidgetGroup() {
    val image = imageResource(id = R.drawable.header)
    val imageModifier = Modifier
        .preferredHeight(180.dp)
        .fillMaxWidth()
        .clip(RoundedCornerShape(10.dp))
    Column {
        Text(text = "不為往事擾")
        Text(text = "余生只愿笑")
        Spacer(modifier = Modifier.preferredHeight(10.dp))
        Image(asset = image, modifier = imageModifier, contentScale = ContentScale.Crop)
    }
}

Spacer控件是用來(lái)填充空白的，我們還可以添加Modifier修飾符來(lái)修飾各種控件和組件。具體用法可以參考官方api，例如這里我們可以利用修飾符來(lái)添加圖片的圓角。

現(xiàn)在我們?cè)趤?lái)優(yōu)化一下這個(gè)布局，在文字的左邊加一個(gè)圓形頭像，來(lái)看看應(yīng)該怎么添加吧：

  val imageHead=Modifier.preferredSize(50.dp)
        .clip(CircleShape)
   Column(modifier = Modifier.padding(10.dp)){
        Row (verticalAlignment = Alignment.CenterVertically){
            Image(asset = image,modifier = imageHead,contentScale = ContentScale.Crop)
            Spacer(modifier = Modifier.preferredSize(10.dp))
            Column {
                Text(text = "不為往事擾")
                Text(text = "余生只愿笑")
            }
        }
        Spacer(modifier = Modifier.preferredHeight(10.dp))
        Image(asset = image, modifier = imageModifier, contentScale = ContentScale.Crop)
    }

我們需要將這兩個(gè)文本控件用Column包裹起來(lái)，然后在它的上級(jí)在用Row包裹，在Row里面添加一個(gè)Image控件，利用修飾符來(lái)對(duì)Image進(jìn)行裁剪，使其變成圓形。來(lái)看看效果吧。

三.滑動(dòng)組件

1.ScrollableRow和ScrollableColumn

使用 ScrollableRow 或 ScrollableColumn 可使 Row 或 Column 內(nèi)的元素滾動(dòng)。

@Composable
fun ScollableWidget() {
    ScrollableColumn(Modifier.fillMaxSize()) {
        for (i in 1..10) {
            WidgetGroup()
        }
    }
}

如果要顯示的元素很少，這種方法效果很好，但對(duì)于大型數(shù)據(jù)集，很快就會(huì)出現(xiàn)性能問(wèn)題。如需僅顯示屏幕上可見(jiàn)的部分元素，請(qǐng)使用 LazyColumnFor 或 LazyRowFor。

2.LazyRowFor和LazyColumnFor

與 RecyclerView類(lèi)似，LazyColumnFor和 LazyRowFor不會(huì)布置或呈現(xiàn)屏幕外的任何可組合項(xiàng)。使用方式也很簡(jiǎn)單，也不需要適配器，直接調(diào)用方法即可，可以設(shè)置數(shù)據(jù)，以及修飾符等等

    LazyColumnFor(items = getUsers()) {
        WidgetGroup(it.userName)
    }
    LazyRowFor(items = getUsers()) {
        WidgetGroup(it.userName)
    }

可以看一下其需要傳入的參數(shù)，有數(shù)據(jù)源，修飾符，padding，以及Alignment，大部分都是用來(lái)調(diào)整頁(yè)面樣式的，最后一個(gè)是用來(lái)聲明單個(gè)item的樣式布局。當(dāng)然如果我們想使用不同的item布局的話(huà)只需要在聲明item樣式的時(shí)候新增判斷就可以了。

@Composable
fun <T> LazyColumnFor(
    items: List<T>,  //用來(lái)填充列表的數(shù)據(jù)源
    modifier: Modifier = Modifier, //用來(lái)修飾列表的樣式
    state: LazyListState = rememberLazyListState(),
    contentPadding: PaddingValues = PaddingValues(0.dp), //用來(lái)設(shè)置item之間的間距
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,//用來(lái)設(shè)置對(duì)齊位置
    itemContent: @Composable LazyItemScope.(T) -> Unit //用來(lái)聲明item樣式布局
)

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

您可能感興趣的文章: