Compose HorizontalPager的使用

package com.xyz.robot01.activity.compose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Tab
import androidx.compose.material3.TabRow
import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
import androidx.compose.material3.Text
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

class PagerActivity : ComponentActivity() {

    val   TAG="PagerActivity"

    @OptIn(ExperimentalFoundationApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

 setContent {
     // scroll to page
     val coroutineScope = rememberCoroutineScope()

     val tabs = listOf("Tab 1", "Tab 2", "Tab 3", "Tab 4", "Tab 5")
     // Display 10 items
     val pagerState = rememberPagerState(pageCount = {
         tabs.size
     })

     Column(modifier = Modifier.fillMaxSize(),
         horizontalAlignment = Alignment.CenterHorizontally) {
         Row {
             tabs.forEachIndexed { index, title ->
                 val selected = pagerState.currentPage == index
            Box(modifier = Modifier.clickable {
                coroutineScope.launch {  pagerState.animateScrollToPage(index) }
            }
                .padding(8.dp)
                .background(if(selected)  Color.Red else Color.Gray,
                    shape = RoundedCornerShape(4.dp)
                ) // Custom background and shape
                .size(width = 20.dp, height = 5.dp)){
            }
             }
         }

         Spacer(modifier = Modifier.height(5.dp))

         TabRow(
             containerColor=Color.Transparent,
             selectedTabIndex = pagerState.currentPage,
             indicator = { tabPositions ->
                 // Use a transparent Box to hide the default indicator
                 Box(
                     Modifier
                         .tabIndicatorOffset(tabPositions[pagerState.currentPage])
                         .background(Color.Transparent)
                         .height(0.dp)
                 )
             },
             modifier  = Modifier
                 .background(Color.Transparent)
                 .width(160.dp),
             divider ={ }
             ) {
             tabs.forEachIndexed { index, _ ->
                 val selected = pagerState.currentPage == index
                 Tab(
                     selected = pagerState.currentPage == index,
                     onClick = { coroutineScope.launch {  pagerState.animateScrollToPage(index) }},
                         modifier = Modifier
                             .padding(8.dp)
                             .background( if(selected)  Color.Red else Color.Gray ,
                                 shape = RoundedCornerShape(4.dp)
                             ) // Custom background and shape
                             .size(width = 20.dp, height = 5.dp)
                 )
             }
         }
         HorizontalPager(state = pagerState) { page ->
             if (page == 0) {
                 LazyColumn01()
             } else {
                 Box(
                     modifier = Modifier
                         .fillMaxSize()
                         .padding(16.dp)
                 ) {
                     Text(
                         text = "Fragment $page",
                         modifier = Modifier
                             .align(Alignment.Center)
                             .background(
                                 Color.Red
                             )
                     )
                 }
             }
         }
     }
 }
    }
}