Compose 实现TableLayout

Posted 2022-12-16 安果移不动

@OptIn(ExperimentalPagerApi::class)
@HiltViewModel
class DiscoveryFragmentViewModel @Inject constructor(
    private val mRepository: DiscoveryRepository,
) : BaseNetViewModel() 

    @OptIn(ExperimentalPagerApi::class)
    val pagerState = PagerState()

    //当前table下标
    var currentTableIndex by mutableStateOf(0)
        private set

    fun updateTableIndex(index: Int) 
        currentTableIndex = index
    

    init 
        viewModelScope.launch 
            snapshotFlow  pagerState.currentPage .collect  page ->
                // Page is the index of the page being swiped.
                updateTableIndex(page)
            
        
    


  
    fun onTableClick(index: Int,scope: CoroutineScope) 
        updateTableIndex(index)
        scope.launch 
            pagerState.animateScrollToPage(page = index)
        
    

    //table数据
    val tabList by mutableStateOf(
        listOf(
            R.string.discover_tab_captain,
            R.string.discover_tab_contributors,
            R.string.discover_tab_patrons,
        )
    )

package co.haive.dialog.v2.ui.contribute.scene

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ScrollableTabRow
import androidx.compose.material.Tab
import androidx.compose.material.TabRowDefaults.tabIndicatorOffset
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun DsicoverTable(viewModel: DiscoveryFragmentViewModel) 
    val scope = rememberCoroutineScope()
    ScrollableTabRow(selectedTabIndex = viewModel.currentTableIndex,
        backgroundColor = HaiveColor_White,
        contentColor = HaiveColor_Main,
        //设置为0 就靠右了
        edgePadding = 0.dp,
        indicator =  tabPositions ->

            Box(
                modifier = Modifier
                    .tabIndicatorOffset(tabPositions[viewModel.currentTableIndex])
                    .height(2.dp)
                    .clip(RoundedCornerShape(8.dp)) // clip modifier not working
                    .padding(horizontal = 20.dp)
                    .background(color = HaiveColor_Main, RoundedCornerShape(8.dp))
            )
        ,
        divider = ,
        tabs = 
            viewModel.tabList.forEachIndexed  index, title ->

                Tab(selected = viewModel.currentTableIndex == index,
                    selectedContentColor = HaiveColor_Main,
                    unselectedContentColor = HaiveColor_9B9B9B,
                    onClick = 
                        viewModel.onTableClick(index, scope)
                    ,
                    text = 
                        HaiveCustomText(
                            text = title,
                            textAlign = TextAlign.Center,
                            fontWeight = FontWeight.SemiBold,
                            fontSize = 17.sp,
                            color = if (viewModel.currentTableIndex == index) HaiveColor_Main else HaiveColor_9B9B9B,
                            modifier = Modifier.padding(vertical = 13.dp)

                        )
                    )


            
        )