Android Studio Android Compose -如何使TabBar与TopAppBar沿着折叠

gopyfrb3 于 2023-08-07 发布在 Android

关注(0)|答案(1)|浏览(179)

我想在我的屏幕顶部有一个appbar，它有两行：
1.最上面一行将包含屏幕名称和导航图标（TopAppBar）
1.第二行将包含用于导航到应用程序其他部分的选项卡（TabBar）
我希望在脚手架中实现上述内容。以下是我到目前为止写的代码。

@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun NestedScrollTest() {

    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            TopAppBar(
                title = { Text(text = "Scroll Behavior Test") },
                navigationIcon = {
                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(imageVector = Icons.Default.Menu, contentDescription = "")
                    }
                },
                scrollBehavior = scrollBehavior
            )
        }
    ) {
        MyTabRowNew()
        LazyColumn(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = it.calculateTopPadding() + 56.dp)) {
            items((1..50).toList()) { item ->
                Text(modifier = Modifier.padding(8.dp), text = "Item $item")
            }
        }
    }
}

@Composable
fun MyTabRowNew(){
    var state by remember { mutableStateOf(0) }
    val titles = listOf("Tab 1", "Tab 2", "Tab 3 with lots of text")
    Column(
        modifier = Modifier.padding(top = 64.dp)
    ) {
        TabRow(selectedTabIndex = state) {
            titles.forEachIndexed { index, title ->
                Tab(
                    selected = state == index,
                    onClick = { state = index },
                    text = { Text(text = title, maxLines = 2, overflow = TextOverflow.Ellipsis) }
                )
            }
        }
    
    }
}

字符串
使用此代码，TopAppBar折叠，但TabBar不折叠，因此看起来很奇怪。当我在LazyColumn中滚动时，我如何将TabBar沿着折叠到TopAppBar中？
谢啦，谢啦

android-studio

来源：https://stackoverflow.com/questions/76673003/android-compose-how-to-make-tabbar-collapse-along-with-topappbar

1条答案

按热度按时间

dluptydi1#

实际上，您可以通过LazyColumnState和AnimateVisibility的组合来实现这一点。首先，你需要在你的项目中的某个地方添加这个Composable函数：

@Composable
    fun LazyListState.isScrollingUp(): Boolean {
        var previousIndex by remember(this) { mutableStateOf(firstVisibleItemIndex) }
        var previousScrollOffset by remember(this) { mutableStateOf(firstVisibleItemScrollOffset) }
        return remember(this) {
            derivedStateOf {
                if (previousIndex != firstVisibleItemIndex) {
                    previousIndex > firstVisibleItemIndex
                } else {
                    previousScrollOffset >= firstVisibleItemScrollOffset
                }.also {
                    previousIndex = firstVisibleItemIndex
                    previousScrollOffset = firstVisibleItemScrollOffset
                }
            }
        }.value
    }

字符串
它只是检测LazyColumn是否正在向上滚动。现在你有了这个，它很简单，你只需要检测LazyColumn是否被向上滚动，如果为True，则显示TopBars，如果不隐藏它们：

val lazyColumnState = rememberLazyListState()
                    Scaffold(modifier = Modifier.fillMaxSize(),
                        topBar = {
                            AnimatedVisibility(visible = lazyColumnState.isScrollingUp()) {
                                TopAppBar(
                                    title = { Text(text = "Scroll Behavior Test") },
                                    navigationIcon = {
                                        IconButton(onClick = { /*TODO*/ }) {
                                            Icon(
                                                imageVector = Icons.Default.Menu,
                                                contentDescription = ""
                                            )
                                        }
                                    }
                                )
                            }
                        }
                    ) { paddingValues ->
                        //second top bar
                        Column(modifier = Modifier
                            .fillMaxSize()
                            .padding(paddingValues)) {

                            AnimatedVisibility(visible = lazyColumnState.isScrollingUp()) {
                                Row(
                                    modifier = Modifier
                                        .fillMaxWidth()
                                        .height(40.dp)
                                ) {
                                    Button(onClick = { /*TODO*/ }, colors = ButtonDefaults.buttonColors(containerColor = Color.Red)) {
                                        Text(text = "5")
                                    }
                                }
                            }

                            LazyColumn(
                                modifier = Modifier
                                    .fillMaxSize() ,
                                state = lazyColumnState
                            ) {
                                items(50) {
                                    Text(
                                        text = it.toString(), modifier = Modifier
                                            .fillMaxWidth()
                                            .height(30.dp)
                                    )
                                }
                            }
                        }
                    }

型

赞(0）回复(0）举报 2023-08-07

我来回答

Android Studio Android Compose -如何使TabBar与TopAppBar沿着折叠

1条答案

相关问题

热门标签

最新问答