HorizontalPager 以及 TabRow 的使用

package com.q12we.robot01.activity.compose

import android.annotation.SuppressLint
import android.os.Bundle
import android.view.MotionEvent
import android.view.ViewGroup
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 com.abc.robot01.R
import kotlinx.coroutines.launch

class PagerActivity : ComponentActivity() {

    val   TAG="PagerActivity"

    fun inject(event:MotionEvent){
        findViewById<ViewGroup>(R.id.compose_view).dispatchTouchEvent(event)
    }

    @SuppressLint("CoroutineCreationDuringComposition")
    @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.scrollToPage(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(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.scrollToPage(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 ->
             Box(
                 modifier = Modifier
                     .fillMaxSize()
                     .padding(16.dp)
             ) {
                 Text(
                     text = "Fragment $page",
                     modifier = Modifier
                         .align(Alignment.Center)
                         .background(
                             Color.Red
                         )
                 )
             }
         }
     }
 }
    }
    companion object{
        var  a: PagerActivity? = null;
    }
}