Android Compose 控件学习四(MediumTopAppBar)

1.添加库

    implementation("androidx.navigation:navigation-common:2.8.9")
    implementation("androidx.navigation:navigation-compose:2.8.9")
    implementation("androidx.compose.material3:material3:1.3.2")
    implementation("androidx.compose.material3.adaptive:adaptive:1.1.0")
    implementation("androidx.compose.material3.adaptive:adaptive-layout-android:1.1.0")
    implementation("androidx.compose.material3.adaptive:adaptive-navigation-android:1.1.0")
    implementation("androidx.compose.material3.adaptive:adaptive-navigation:1.1.0")
    implementation("androidx.compose.material3:material3-adaptive-navigation-suite:1.3.2")
    implementation("androidx.compose.material:material:1.8.0")
    implementation("androidx.compose.material:material-icons-extended:1.7.8")
    implementation("androidx.compose.material:material-icons-core:1.7.8")
    implementation("androidx.compose.material3:material3-window-size-class:1.3.2")

2.示例

val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            MediumTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Medium Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        innerPadding
        //ScrollContent(innerPadding)
    }



Android Compose 中,有多种方法可以隐藏控件,以下为你介绍相关方法: ### 使用 `Visibility` 控制可见性 合理管理组件的可见性可以带来提升用户体验、优化性能、节省资源等好处。虽然未在引用中给出具体使用 `Visibility` 的代码示例,但通常可以通过修改 `Modifier` 来控制组件的可见性。例如: ```kotlin import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.height import androidx.compose.material.Button import androidx.compose.material.Text import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp import androidx.compose.foundation.Canvas import androidx.compose.ui.visibility @Composable fun VisibilityExample() { var isVisible by remember { mutableStateOf(true) } Column { Canvas( modifier = Modifier .width(100.dp) .height(100.dp) .visibility(if (isVisible) Visibility.Visible else Visibility.Hidden) ) { drawRect(Color.Blue) } Button(onClick = { isVisible = !isVisible }) { Text(text = if (isVisible) "隐藏" else "显示") } } } ``` ### 使用 `AnimatedVisibility` 实现动画隐藏 `AnimatedVisibility` 是 Android Compose 中的一个高级别动画 API,可以实现 Compose 组件的显示和隐藏,并且可以指定显示/隐藏时候的动画效果(`EnterTransition/ExitTransition`)。示例代码如下: ```kotlin import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.height import androidx.compose.material.Button import androidx.compose.material.Text import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.painterResource import androidx.compose.animation.AnimatedVisibility @Composable fun AnimatedVisibilityPage() { Column(horizontalAlignment = Alignment.CenterHorizontally) { var visible by remember { mutableStateOf(true) } AnimatedVisibility(visible = visible) { Image( painter = painterResource(id = R.mipmap.photot1), modifier = Modifier.width(300.dp), contentDescription = null ) } Spacer(modifier = Modifier.height(10.dp)) Button(onClick = { visible = !visible }) { Text(text = "显示/隐藏") } } } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lph009

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值