Jetpack Compose布局的使用詳細介紹

更新時間：2022年09月06日 14:19:23 作者：兒歌八萬首

Jetpack Compose是用于構建原生Android界面的新工具包。它可簡化并加快Android上的界面開發(fā)，使用更少的代碼、強大的工具和直觀的 Kotlin API，快速讓應用生動而精彩

一.標準布局組件

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

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

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

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

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

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

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

二.修飾符

如果我們還想在文字下面添加一張圖片，可以直接添加一個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控件是用來填充空白的，我們還可以添加Modifier修飾符來修飾各種控件和組件。具體用法可以參考官方api，例如這里我們可以利用修飾符來添加圖片的圓角。

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

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

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

三.滑動組件

1.ScrollableRow和ScrollableColumn

使用 ScrollableRow 或 ScrollableColumn 可使 Row 或 Column 內的元素滾動。

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

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

2.LazyRowFor和LazyColumnFor

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

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

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

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

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

您可能感興趣的文章: