Android: Jetpack Compose: создание пользовательского стиля PageIndicatorsStyle для HorizontalPageIndicators

Я новичок в составлении Jetpack. Я работаю над носимым приложением (Wear OS), построенным на Kotlin. Однако я хочу интегрировать HorizontalPageIndicator Compose в класс фрагмента Kotlin.

Я могу это интегрировать, но не могу разместить в точном месте на экране. Положение PageIndicator по умолчанию для устройства с круглым экраном находится внизу, я хочу обновить его и разместить в верхней части экрана.

Пожалуйста, проверьте код ниже,

Фрагменты onCreateView()

      override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        Logger.info("onCreateView")
        binding = FragmentVitalsBinding.inflate(inflater)

        binding.composeView.apply {
            // Dispose of the Composition when the view's LifecycleOwner
            // is destroyed
            
             setViewCompositionStrategy(ViewCompositionStrategy
             .DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                // In Compose world
                PageIndicator()
            }
        }```


Page Indicator Component


      @Preview
@Composable
private fun PageIndicator() {
    val maxPages = 9
    var selectedPage by remember { mutableStateOf(0) }
    var finalValue by remember { mutableStateOf(8) }

    val animatedSelectedPage by animateFloatAsState(
        targetValue = selectedPage.toFloat(),
    ) {
        finalValue = it.toInt()
    }

    val pageIndicatorState: PageIndicatorState = remember {
        object : PageIndicatorState {
            override val pageOffset: Float
                get() = animatedSelectedPage - finalValue
            override val selectedPage: Int
                get() = finalValue
            override val pageCount: Int
                get() = maxPages
        }
    }
    Box(modifier = Modifier.fillMaxWidth(1f)
        .fillMaxHeight(0.5f)) {
        HorizontalPageIndicator(
            pageIndicatorState = pageIndicatorState,
            modifier = Modifier
                .align(Alignment.TopCenter)
        )
    }
}
```

Внутри класса HorizontalPageIndicator Jetpack Compose есть приведенный ниже код, который я хочу расширить и обновить. якорь = 90f Я хочу сделать его равным 0f, чтобы PageIndicators располагались в верхней части экрана.

      
@Composable
private fun CurvedPageIndicator(
    modifier: Modifier,
    pagesOnScreen: Int,
    indicatorFactory: @Composable (Int) -> Unit,
    spacerLeft: @Composable () -> Unit,
    spacerRight: @Composable () -> Unit
) {
    CurvedLayout(
        modifier = modifier,
        // 90 degrees equals to 6 o'clock position, at the bottom of the screen
        anchor = 90f,
        angularDirection = CurvedDirection.Angular.Reversed
    ) {
        // drawing 1 extra spacer for transition
        curvedComposable {
            spacerLeft()
        }
        for (page in 0..pagesOnScreen) {
            curvedComposable {
                indicatorFactory(page)
            }
        }
        curvedComposable {
            spacerRight()
        }
    }
}

Пожалуйста, обратитесь к изображению ниже, я хочу реализовать вот так:

Пожалуйста, проверьте и направляйте. Заранее спасибо...

Источник