iT邦幫忙

2022 iThome 鐵人賽

DAY 8
0

Compose的Box相當於XML的FrameLayout
可以想像成是一個可以在不自由布局的矩形
內部的組件會疊在一起,放越後面會顯示在越上面

Box(modifier = Modifier.fillMaxSize()) {
    Spacer(modifier = Modifier.padding(20.dp).background(Color.Red).size(150.dp))
    Spacer(modifier = Modifier.padding(40.dp).background(Color.Green).size(150.dp))
    Spacer(modifier = Modifier.padding(60.dp).background(Color.Blue).size(150.dp))
}

https://ithelp.ithome.com.tw/upload/images/20220914/20145692kExC0JOiYv.png

Alignment

在Box也能用Alignment控制位置

Box(modifier = Modifier.fillMaxSize()) {
    Spacer(modifier = Modifier.align(Alignment.TopEnd).background(Color.Red).size(150.dp))
    Spacer(modifier = Modifier.align(Alignment.BottomStart).background(Color.Green).size(150.dp))
    Spacer(modifier = Modifier.align(Alignment.Center).background(Color.Blue).size(150.dp))
}

https://ithelp.ithome.com.tw/upload/images/20220914/20145692hp8q9XlTUZ.png
Box可以用的Alignment可以當作九宮格
有上中下的Top, Center, Bottom
有左中右的Start, Center, End
一共九種組合 ex: CenterEnd

BiasAlignment

如果有興趣的話,可以看看Alignment的原碼
可以看到是由BiasAlignment()實現的
而BiasAlignment()是藉由X軸的horizontalBias和Y軸的verticalBias構成
意思是說,我們可以藉由這個BiasAlignment()讓組件放在任意位置
horizontalBias和verticalBias是兩個介於-1到1之間的Float(其實可以超出range
-1是開始/頂部(Start/Top),0是居中,1是結束/底部(End/Bottom)
如果我想要把組件距離左右是2:3,距離上下是7:3
那只要這樣做就可以了

Box(modifier = Modifier.fillMaxSize()) {
    val align= BiasAlignment(-0.2f, 0.4f)
    Spacer(modifier = Modifier.align(align).background(Color.Red).size(150.dp))
}

https://ithelp.ithome.com.tw/upload/images/20220914/201456926mv4Hf5uU0.png

Offset:

控制位置還有另一種方法,offset
類似座標,直接給予直接給予指定的座標就可以了
做邊原點是左上角,X軸向右為正,Y軸下向為正
使用時也是用Modifier,參數是X和Y兩個DP值
如果要放在距離原點 (100.dp, 350.dp)的位置,作法也很簡單

Box(modifier = Modifier.fillMaxSize()) {
    Spacer(modifier = Modifier.offset(100.dp,350.dp)
        .background(Color.Red).size(150.dp))
}

https://ithelp.ithome.com.tw/upload/images/20220914/201456925NaIBxz05U.png

總結:
一般情況使用padding和Alignment就很夠用了
如果要用比例的方式聲明位置,可以用BiasAlignment
如果要用座標的方式聲明位置,可以用Offset


上一篇
7. Compose 的 LinearLayout:Column & Row
系列文
Jetpack Compose 輕易入門 :無障礙的開箱即用8
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言