如何在jetpack compose中创建定制的银色应用栏

问题描述 投票:0回答:1

我想在 jetpack 中构建一个应用程序,其中包含自定义应用程序意味着带有列表的银色应用程序。预先感谢

jetpack 撰写银色应用栏check here for UI

android-jetpack-compose android-jetpack android-jetpack-compose-material3 jetpack
1个回答
0
投票

请检查这里

   @OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopAppBarWithScaffold() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = { LargeTopAppBar(scrollBehavior = scrollBehavior) }
    ) { padding ->
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .padding(padding),
            contentPadding = PaddingValues(16.dp)
        ) {
            items(50) {
                ListItem(
                    headlineContent = { Text(text = "Item $it") },
                    leadingContent = {
                        Icon(
                            imageVector = Icons.Default.Face,
                            contentDescription = null
                        )
                    }
                )
            }
        }
    }
}

LargeTopAppBar
有趣的创造

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LargeTopAppBarM3(
    scrollBehavior: TopAppBarScrollBehavior
) {
    LargeTopAppBar(
        scrollBehavior = scrollBehavior,
        title = {
            Text(
                text = "Silver App bar",
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        },
        navigationIcon = {
            IconButton(onClick = { /* do something*/ }) {
                Icon(imageVector = Icons.Filled.Menu, contentDescription = "Open Menu")
            }
        },
        actions = {

            IconButton(onClick = { /* do something*/ }) {
                Icon(imageVector = Icons.Filled.Settings, contentDescription = "Open Settings")
            }

        }
    )
}
© www.soinside.com 2019 - 2024. All rights reserved.