Jetpack Compose 教學上課講義【從零開始學 Jetpack Compose 程式設計】Slot API 槽位佈局方式

 

【從零開始學 Jetpack Compose 程式設計】

線上教學課程目錄: https://bit.ly/3JF4SFA
Youtube 課程播放清單：https://bit.ly/3tFjRbx
Udemy 線上課程：https://bit.ly/3MbVnhO

Slot API

名詞圖像記憶解釋 Slot 概念

https://www.google.com/search?q=投幣&rlz=1C5CHFA_enTW962TW962&sxsrf=ALiCzsY514j6LNCzR0AUrs5ya8rfV0LqMg:1652697291406&source=lnms&tbm=isch&sa=X&ved=2ahUKEwi9xuaX6eP3AhWVI6YKHV0QDGcQ_AUoAnoECAIQBA&biw=1920&bih=976&dpr=1

Slot 範例

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Demo(topContent = { View1() }, midContent = { View2() }, bottomContent = { View3() })
        }
    }
}

@Composable
fun Demo(
    topContent: @Composable () -> Unit,
    midContent: @Composable () -> Unit,
    bottomContent: @Composable () -> Unit
) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        topContent()
        midContent()
        bottomContent()
    }
}

@Composable
fun View1() {
    Text("上層內容")

}

@Composable
fun View2() {
    Text("中層內容")
}

@Composable
fun View3() {
    Text("底層內容")
}