11. Compose 对于复杂界面的尝试

01. Compose 可组合组件之Row And Column

02. Compose 可组合组件之 属性 modifier

03. Compose 可组合组件之Card 图片

04. Compose 字体

05. Compose State

06. Compose SnackBar

07. Compose List

08. Compose ConstrainLayout

09. Compose Button

10. Compose CheckBox

11. Compose 对于复杂界面的尝试

列表里面嵌套 纵向列表 + 横向列表 + TabRow(TabLayout) + Surface(ViewPager)

@Composable
    fun LazyColumnDemo() {
        val listData = (0..20).toList()
        val childData = (0..10).toList()
        val selectedIndex = remember { mutableStateOf(0) }

        val tabsName = remember { DemoTabs.values().map { it.value } }

        LazyColumn(modifier = Modifier.fillMaxWidth(), content = {
            //头部内容
            item {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(200.dp)
                        .background(Color.Cyan),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = "头部")
                }
            }

            //列表内容
            items(count = listData.size) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(200.dp)
                        .background(
                            if (it % 2 == 0) {
                                Color.Gray
                            } else {
                                Color.LightGray
                            }
                        ),
                    contentAlignment = Alignment.Center
                ) {
                    if (it == 4) {
                        LazyColumn(modifier = Modifier
                            .fillMaxWidth()
                            .fillMaxHeight(),content = {
                            items(count = childData.size){content->
                                Box( modifier = Modifier
                                    .fillMaxWidth()
                                    .height(100.dp)
                                    .background(
                                        if (content % 2 == 0) {
                                            Color.Red
                                        } else {
                                            Color.Yellow
                                        }
                                    ),
                                    contentAlignment = Alignment.Center) {
                                    Text(text = "子item  $content")
                                }
                            }
                        })
                    } else if (it == 6) {
                        LazyRow(modifier = Modifier.fillMaxWidth(),content = {
                            items(count = childData.size){content->
                                Box( modifier = Modifier
                                    .fillMaxWidth()
                                    .height(100.dp)
                                    .background(
                                        if (content % 2 == 0) {
                                            Color.Red
                                        } else {
                                            Color.Yellow
                                        }
                                    ),
                                    contentAlignment = Alignment.Center) {
                                    Text(text = "子item  $content")
                                }
                            }
                        })
                    } else {
                        Text(text = "列表项：$it")
                    }

                }
            }

            //尾部内容
            item {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(200.dp)
                        .background(Color.Magenta),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = "尾部0")
                }
            }
            item {
                Column (modifier = Modifier
                    .fillMaxWidth()
                    .fillParentMaxHeight()
                ){
                    TabRow(modifier = Modifier.height(50.dp),selectedTabIndex = selectedIndex.value) {
                        tabsName.forEachIndexed {index, title ->
                            Tab(
                                selected = index == selectedIndex.value,
                                onClick = {
                                    when (title) {
                                        DemoTabs.APPLE.value -> {
                                            selectedIndex.value = DemoTabs.APPLE.ordinal
                                        }
                                        DemoTabs.GOOGLE.value -> {
                                            selectedIndex.value = DemoTabs.GOOGLE.ordinal
                                        }
                                        DemoTabs.AMAZON.value -> {
                                            selectedIndex.value = DemoTabs.AMAZON.ordinal
                                        }
                                    }
                                },
                                text = { Text(title) }
                            )
                        }
                    }

                    Surface(modifier = Modifier.fillMaxHeight()) {
                        when (selectedIndex.value) {
                            DemoTabs.APPLE.ordinal -> {
                               Apple()
                            }
                            DemoTabs.GOOGLE.ordinal -> {
                                Google()
                            }
                            DemoTabs.AMAZON.ordinal -> {
                                Amazon()
                            }
                        }
                    }
                }
            }
        })
    }


    @Composable
    fun Apple(){
        LazyColumn(modifier = Modifier.fillMaxWidth(),content = {
            item(){
                Box(modifier = Modifier
                    .fillMaxWidth()
                    .height(400.dp)
                    .background(color = Color.Yellow)){
                    Text(text = "1",fontSize = 35.sp)
                }
            }

            item(){
                Box(modifier = Modifier
                    .fillMaxWidth()
                    .height(400.dp)
                    .background(color = Color.Red)){
                    Text(text = "2",fontSize = 35.sp)
                }
            }
            item(){
                Box(modifier = Modifier
                    .fillMaxWidth()
                    .height(400.dp)
                    .background(color = Color.Green)){
                    Text(text = "3",fontSize = 35.sp)
                }
            }
        })
    }

    @Composable
    fun Google(){
        LazyColumn(modifier = Modifier.fillMaxWidth(),content = {
            item(){
                Box(modifier = Modifier
                    .height(400.dp)
                    .background(color = Color.Yellow)){
                    Text(text = "1",fontSize = 35.sp)
                }
            }

            item(){
                Box(modifier = Modifier
                    .height(400.dp)
                    .background(color = Color.Green)){
                    Text(text = "2",fontSize = 35.sp)
                }
            }
        })
    }

    @Composable
    fun Amazon(){
        LazyColumn(modifier = Modifier.fillMaxWidth(),content = {
            item(){
                Box(modifier = Modifier
                    .height(400.dp)
                    .fillMaxWidth()
                    .background(color = Color.Yellow)){
                    Text(text = "1",fontSize = 35.sp)
                }
            }

            item(){
                Box(modifier = Modifier
                    .height(400.dp)
                    .fillMaxWidth()
                    .background(color = Color.Red)){
                    Text(text = "2",fontSize = 35.sp)
                }
            }
            item(){
                Box(modifier = Modifier
                    .height(400.dp)
                    .fillMaxWidth()
                    .background(color = Color.Green)){
                    Text(text = "3",fontSize = 35.sp)
                }
            }
            item(){
                Box(modifier = Modifier
                    .height(400.dp)
                    .fillMaxWidth()
                    .background(color = Color.Yellow)){
                    Text(text = "4",fontSize = 35.sp)
                }
            }

            item(){
                Box(modifier = Modifier
                    .fillMaxWidth()
                    .height(400.dp)
                    .background(color = Color.Red)){
                    Text(text = "5",fontSize = 35.sp)
                }
            }
            item(){
                Box(modifier = Modifier
                    .height(400.dp)
                    .fillMaxWidth()
                    .background(color = Color.Green)){
                    Text(text = "6",fontSize = 35.sp)
                }
            }
        })
    }


    private enum class DemoTabs(val value: String) {
        APPLE("Apple"),
        GOOGLE("Google"),
        AMAZON("Amazon")
    }