Compose 实现TableLayout

最新推荐文章于 2023-09-11 14:15:53 发布

安果移不动

最新推荐文章于 2023-09-11 14:15:53 发布

阅读量550

点赞数

分类专栏： # 038Compose 文章标签： android

独学而无友，则孤陋寡闻。q群582951247

本文链接：https://blog.csdn.net/mp624183768/article/details/128320302

版权

038Compose 专栏收录该内容

63 篇文章 2 订阅

订阅专栏



@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)

                        )
                    })


            }
        })
}