Jetpack Compose佈局的使用詳細介紹

Posted on by

一.標準佈局組件

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

@Composable
fun WidgetGroup() {
    Text(text = "不為往事擾")
    Text(text = "餘生隻願笑")
}

但是我們會發現，如果僅僅是這樣，兩個文本控件會重疊在一起，類似於下面這種樣式：

如果我們想將多個控件垂直擺放在一起，可以在控件外層添加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，例如這裡我們可以利用修飾符來添加圖片的圓角。

現在我們在來優化一下這個佈局，在文字的左邊加一個圓形頭像，來看看應該怎麼添加吧：

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

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

2.LazyRowFor和LazyColumnFor

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

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

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

@Composable
fun <T> LazyColumnFor(
    items: List<T>,  //用來填充列表的數據源
    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佈局內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：