Compose UI 之 Small TopAppBar

已于 2024-03-08 16:09:29 修改
阅读量257 收藏 1
点赞数
分类专栏： Android Jetpack Compose 组件篇 文章标签： Android Compose
于 2024-03-06 12:15:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sz_chrome/article/details/136501621
版权
本文介绍了Jetpack Compose中的TopAppBar和CenterAlignedTopAppBar组件，详细阐述了它们的特点、参数及示例。TopAppBar提供高度可定制的Material Design 3风格应用栏，支持响应式布局；CenterAlignedTopAppBar则以居中标题为特点，适用于标题突出的场景。
摘要由CSDN通过智能技术生成

Small 类型 TopAppBar

AppBar 主要由2类，顶部 AppBar 和底部 AppBar。

  • 顶部 AppBar：主要包含了标题，action菜单，导航菜单。
  • 底部 AppBar：典型地包含主要导航项。

顶部 AppBar

顶部 AppBar 包含了 4 中类型： TopAppBar CenterAlignedTopAppBar MediumTopAppBar LargeTopAppBar

下面会逐个介绍 AppBar 的类型及给出示例。

TopAppBar

TopAppBar 是一个重要的组件，它提供了 Material Design 3 标准的顶部应用栏实现，提供现代化的外观和交互方式。TopAppBar 不仅具有直观且易用的 API，还支持高度定制，使得开发者能够轻松构建符合 Material Design 准则的应用界面。它通常包含应用的标题、导航图标、操作按钮等元素，为用户提供直观且一致的操作体验。

TopAppBar 特点

了解本专栏 订阅专栏 解锁全文 超级会员免费看
VoidHope
关注
专栏目录
订阅专栏
Compose UI 之 Medium&Large TopAppBar
VoidHope的博客
03-08 255
前面文章介绍了 Small 类型的TopAppBar。下来介绍 Medium 和 Large 类型的。
Jetpack Compose——TopAppBar（顶部应用程序栏）、BottomAppBar（底部应用程序栏）
lplj717的博客
12-21 3626
该博客基于：compose_version = '1.1.0-beta01' TopAppBar：位于屏幕的顶部。一般包含标题，导航图标和其他的更多操作等BottomAppBar：位于屏幕的底部，一般显示导航和按键操作 TopAppBar 首先看看TopAppBar的参数：有两种参数类型 TopAppBar( modifier: Modifier = Modifier,//布局修饰 backgroundColor: Color = MaterialTheme.colors.prim
Jetpack Compose - TopAppBar、BottomAppBar
乐翁龙
01-09 4593
Jetpack Compose - TopAppBar、BottomAppBar0、介绍1、属性一览1.1、TopAppBar1.2、 BottomAppBar2、使用示例2.1、 TopAppBar2.2、 BottomAppBar3、版本更新4、未解决问题 Compose系列文章，请点原文阅读。原文，是时候学习Compose了！ 0、介绍 关于AppBar其实就是XML中的androidx.appcompat.widget.Toolbar，关于这个控件可能我们大家用的不会很多，一般都是自己自定义的，
降Compose十八掌之『飞龙在天』| Layout
最新发布
稀有猿诉
07-08 666
从整体到局部，从大到小的角度来学习如何用Compose实现一个UI页面，并理解Compose的页面结构。
在 Jetpack Compose 中使用 TopAppBar
江小白的博客
07-10 598
Jetpack Compose 是一个现代化的、声明式的 UI 工具包，它使我们能够更方便地构建 Android 的用户界面。在本篇文章中，我们将介绍如何在 Jetpack Compose 中使用TopAppBar来创建顶部应用栏。TopAppBar是一个在屏幕顶部的应用栏，提供了在 Material Design 风格的应用中实现导航和执行操作的一种方式。在TopAppBar中，我们通常会放置一个导航图标（比如 "汉堡" 菜单图标），标题，以及一些操作按钮。
在 Jetpack Compose 中创建 AppBar
江小白的博客
06-29 578
AppBar，也就是我们常说的顶部应用栏，是用户界面的一个重要部分。它可以提供关于当前屏幕的上下文，以及完成操作和导航的入口。
jetpack compose 自定义topappbar
2201_75442488的博客
05-17 168
需要注意的是 需要在 需要联动滑动的 可组合函数的 Modifier 中将 NestedScrollConnection 传入。然后是我封装好的 Scaffold。
Jetpack Compose 重写TopAppBar 实现标题多行折叠
jiulang9的博客
11-16 881
想用compose实现类似掘金的文章详细页面的标题栏 便使用了MediumTopAppBar一开始用着没什么问题，但是标题字数多了，MediumTopAppBar就不支持了
Jetpack Compose 深入探索系列四： Compose UI
川峰的博客
03-01 2571
Compose UI 是一个 Kotlin 多平台框架。它提供了通过可组合函数发出 UI 的构建块和机制。除此之外，这个库还包括 Android 和 Desktop 源代码，为 Android 和 Desktop 提供集成层。当使用 Compose runtime 集成 UI 时，目标是构建用户可以在屏幕上体验的布局树。这个树是通过执行发出 UI 的 Composable 函数来创建和更新的。用于树的节点类型只有 Compose UI 知道，所以 Compose runtime 可以不知道它。即使 Comp
Compose UI 之 Scaffold 脚手架
VoidHope的博客
03-01 294
Scaffold脚手架组件是一个核心组件，它为开发者提供了一个标准的、可定制的应用界面框架。包含了应用界面的基础元素，如状态栏、导航栏、顶部应用栏（TopAppBar）等。通过Scaffold，开发者可以轻松地为应用添加这些常见组件，并对其进行自定义。
Jetpack Compose Scaffold和TopAppBar(顶部导航)
ScottePerk的博客
06-10 1613
Jetpack Compose Scaffold 实现TopAppBar 顶部导航
Jetpack Compose中使用MD样式组件Scaffold及导航底部菜单的实现
金戈鐡馬
05-16 1344
Compose给我们提供了一个Material Design样式的首页组件(Scaffold),我们可以直接套用从而完成一个APP的首页界面由于Scaffold中还包含有其他的组件,所以讲解Scaffold先讲解前置的一些组件。
Android Compose 新闻App（三）网络数据Compose UI显示加载、Room和DataStore使用
2401_84121573的博客
04-14 1185
外链图片转存中…(img-Im9ZFyOm-1713078142005)][外链图片转存中…(img-kNI9uCEg-1713078142006)][外链图片转存中…(img-wdEsaEmp-1713078142006)][外链图片转存中…(img-eQQg5V34-1713078142006)][外链图片转存中…(img-Sqg318gL-1713078142007)]
【Android-JetpackCompose】7、布局、Material 组件和布局、自定义布局
呆呆的猫的博客
10-06 1505
每个界面元素都有一个父元素，还可能有多个子元素。此外，每个元素在其父元素中都有一个位置，指定为 (x, y) 位置；也都有一个尺寸，指定为 width 和 height。父元素定义其子元素的约束条件。元素需要在这些约束条件内定义尺寸。约束条件可限制元素的最小和最大 width 和 height。如果某个元素有子元素，它可能会测量每个子元素，以帮助确定其尺寸。在界面树中布置每个节点的过程分为三个步骤。测量所有子项确定自己的尺寸放置其子项layout 修饰符仅更改调用可组合项。
Compose 可组合项 - 布局类
HugMua的博客
04-02 1067
Composable函数是整个UI中的某一部分界面（称为Layout），执行后会作为一个节点添加到UI树中，然后渲染展示在屏幕上。每个元素都有一个父元素以及可能有多个子元素，每个元素在父元素中都有一个坐标（x,y）和尺寸（width,height）。就是自定义一个 Modifier 的扩展函数，实现它的 layout( ) 方法如何测量及放置自身。形参Lambda有2个参数，measurable用于子元素的测量和放置，constraints约束子元素宽高的最大和最小值。
Android | Compose 初上手
m0_56146626的博客
04-25 1810
到这里，这篇文章也完了。这篇文章主要讲了一下Compose中最基本的一些 核心思想以及 UI 函数以及主题啥的。这也是我最开始接触到Compose学到的东西，所以这也算是我的学习笔记吧。《Android Compose 强化实战》Jetpack Compose 是Google发布的一个Android原生现代UI工具包，它完全采用Kotlin编写，是一套声明式UI框架，可以使用Kotlin语言的全部特性，可以帮助你轻松、快速的构建高质量的Android应用程序。
docker compose ui
04-28
Docker Compose UI是一个基于Web的图形化界面，用于管理Docker Compose。Docker Compose是一种声明式语言，用于定义和运行多容器Docker应用程序。Docker Compose UI允许用户使用该语言轻松创建和管理多容器应用程序...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

VoidHope

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

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

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

打赏作者

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

抵扣说明：

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

余额充值