首页
学习
活动
专区
圈层
工具
发布

Material Design 实战 之 第六弹 —— 可折叠式标题栏(CollapsingToolbarLayout) & 系统差异型的功能实现(充分利用系统状态栏空间)

(水果名字和图片id); 实例化诸对象; 设置toolbar 设置导航按钮 设置折叠栏标题...就表示该控件会出现在系统状态栏里; 2.2 在程序的主题中将状态栏颜色指定成透明色; 在主题中将android:statusBarColor属性的值指定成@android:color...FloatingActionButton中, app:layou_anchor属性(anchor n.锚状物)指定了一个锚点,这里将锚点设置为AppBarLayout,这样悬浮按钮就会出现在水果标题栏的区域内...//mFruitList由new适配器的时候传进来的构造函数的参数提供, // get(position)将子项对应位置的水果对象从设置到适配器中的水果列表数据中取出来...我在水果详情界面的逻辑中,findViewbyid写错成了卡片水果列表界面的ImageView的id: ?

2.5K40

用 CodeBuddy 打造 UniApp 精品“设置”页:从 Profile 按钮到全分离工程化实践

Profile → Settings:按钮替换与跳转原本 Profile 顶栏使用的 iconfont 图标并不美观,且跳转逻辑只是 uni.showToast。...结构分离:settings.js 里的逻辑精华在 settings.js 中,CodeBuddy 把所有业务逻辑集中到一个对象里:data():初始化用户信息、主题设置、阅读偏好、通知设置、数据同步、关于信息...UI 细节:分块卡片与交互动效在 settings.vue 模板里,我和 CodeBuddy 将设置项分为:账号信息:头像 + 昵称 + 编辑按钮;主题切换:暗黑模式开关 + 主题色调选择轮;阅读偏好:...字体大小、行距滑块 + 护眼模式开关;消息推送:三类推送的拟物开关;数据同步:自动同步开关 + 手动同步 / 备份按钮;关于:版本号、检查更新、意见反馈、官网链接;退出登录:底部危险色玻璃按钮。...每块卡片都有渐入动画,开关切换时弹性缩放,按钮点击有微微回弹。这些细节都是 CodeBuddy 自动生成的模版 + 我后续微调,效果既统一又富有活力。

9520
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    02 HarmonyOS Next仪表盘案例详解(一):基础篇

    项目概述本文将详细分析 HarmonyOS 应用中的仪表盘(Dashboard)示例,该示例展示了一个业务数据概览页面,包含数据卡片和趋势图表区域。...数据结构设计3.1 接口定义案例中定义了DashboardCardItem接口,用于描述仪表盘数据卡片的数据结构:export interface DashboardCardItem { /**...4.2 页面参数传递onPageShow(): void { // 获取传递过来的参数对象 const params = router.getParams() as Record数据卡片网格)│ └── ForEach (循环渲染数据卡片)└── Column (图表区域) ├── Flex (图表标题栏...ForEach:循环渲染组件,用于批量创建数据卡片5.3 样式与主题ArkTS 支持链式调用设置组件样式,使 UI 代码更加简洁:Text(card.value) .fontSize(28)

    14400

    「Get智能写作」V1.4.11使用说明

    2、可以点击“…”按钮选择需要订阅的领域,AI会及时更新相关领域的热门话题。...订阅功能:主题事件追踪 1、订阅栏:主要是针对一些较为关注的特定主题,订阅后可以持续性关注某个有热度的话题、以及事件的发展动态,方便素材搜集。 2、点击订阅即可看见历史的订阅主题。...四、找素材,找主题,你就搜索 导航栏的搜索按钮是为了方便快速找到相关的主题。 1、输入需要搜索的主题,然后回车。 2、根据主题点击卡片,可以选择查看或者订阅。 3、点击卡片查看后进入写作模式。...2、点击每个素材右边的“引用”按钮,勾选需要的素材即可添加素材至右边的内容编辑页。 3、点击右边编辑页的某一个素材卡片,会自动展开整个段落。...4、点击右下角的“编辑”和“原文”按钮,即可打开编辑模式和素材原文。

    3.7K30

    喜大普奔 DevEco Studio 官方接 入 DeepSeek 了

    要求的软件版本 DevEco Studio CodeGenie 下载地址都可以在官网中获取 DevEco Studio https://developer.huawei.com/consumer/...万能卡片生成 智能问答 DeepSeek 重新打开 DevEco Studio后,点击侧边栏的 CodeGenie,进行华为账户登录后,便可以实用 CodeGenie了,可以在这里调用 DeepSeek...例如“电商购物卡片”、“娱乐类卡片”。 2 卡片功能 卡片包含的组件,如图标、标题、按钮等;组件的状态信息,如图标主题、标题内容、按钮显示的文字等。...3 卡片尺寸 HamonyOS 官网提供的四种卡片尺寸:12(微卡片)、22(小卡片)、24(中卡片)、44(大卡片);卡片尺寸非必选项,AI 会根据前两个维度描述的信息,智能选择效果最佳的尺寸。...万能卡片生成 等特色功能,进一步展现了 AI 在垂直场 景中的实用价值,为鸿蒙生态的多样化开发需求提供了高效解决方案。

    13410

    【Flutter】StatefulWidget 组件 ( 创建 StatefulWidget 组件 | MaterialApp 组件 | Scaffold 组件 )

    , 侧边栏 的组件 , 使用该组件可以很容易实现一个复杂的导航页面 ; AppBar : 顶部导航栏 ; BottomNavigationBar : 底部导航栏 ; RefreshIndicator...TextStyle textStyle 对象 Text('Container 中的 Text 文本组件示例', style: textStyle,),...; 通过 MaterialApp 组件很容易实现符合 Material Design 规范的应用 ; MaterialApp 组件中的 tittle 字段就是标题设置 , theme 字段设置的是主题..., 侧边栏组件 , 使用该组件可以很容易实现一个复杂的导航页面 ; Scaffold 组件常用设置选项 : 顶部标题栏设置 : appBar ; 界面主体子组件设置 : body ; 悬浮按钮设置 :...floatingActionButton ; 底部导航栏设置 : bottomNavigationBar ; 侧边栏设置 : drawer ; Scaffold 组件构造函数源码 : 构造函数中的可选参数就是组件的可设置选项

    2.2K01

    Butterfly布局调整———相关推荐版块侧栏卡片化

    出于我守财的习惯,我通常不会直接删除主题已有的一些功能,那么要怎么处理这个那么大一块的推荐版块呢? 我的做法就是,把它丢到可以自由控制显隐的侧栏里。...还能顺便沿用我之前写的SAO UI和手机端侧栏fixed卡片样式。...说干就干,首先,要定位这个侧栏卡片的源码位置,用F12确定了它的class为relatedPosts,然后在主题源码里全局搜索,发现这个居然不是在pug中生成,而是通过一个hexo的helper函数来处理的...,修改[Blogroot]\_config.butterfly.yml #侧栏悬浮卡片控制按钮 #https://akilar.top/posts/451ac5f8/ fixed_card_widget...: enable: true page: #页面显示按钮 - type: class #侧栏卡片选择器类型 name: card-info #侧栏卡片选择器名称

    1.1K50

    EmoBox:我与 CodeBuddy 共创的 Emoji 表情分类小工具

    index.vue 是主页面,emoji-card 和 emoji-detail 两个组件分别负责卡片和详情浮层展示,emoji 数据被单独抽出来放在 static 中。...每当点击一个 emoji 卡片,就会出现一个浮层,展示更大的 emoji、描述文字、复制按钮和一个星标收藏按钮。...数据结构与配置:简洁明了,便于维护数据方面,CodeBuddy 在 /static/emoji-data.js 中定义了完整的表情分类结构。...每个表情包含 id、char 和 description 三个字段,所有数据按分类整理好,读取起来很顺畅。添加新表情只需往对应类别中追加对象。...同时它还自动配置了 pages.json 路由,并在 uni.scss 中定义了全局变量(如主题色、圆角、阴影等),在多个组件中统一调用,样式可控性大大提升。

    8200

    使用 UniApp 开发设备信息展示界面

    目的:页面开头的这一部分清晰地向用户展示当前页面的主题是“设备信息”。采用中文和英文双语展示,提升用户体验。样式设计:标题和副标题的字体大小和颜色采用对比色,以确保信息醒目且易于阅读。2....动态更新数据为了确保页面展示的设备信息始终保持最新,页面提供了一个“刷新”按钮,通过点击按钮触发数据更新。...:通过 @click="getDeviceInfo" 绑定点击事件,在点击按钮时调用 getDeviceInfo 方法,获取最新的设备信息。...数据合并:将从不同来源获取的设备信息合并到 deviceInfo 对象中,方便在模板中进行渲染。...设备信息更新:当调用 getDeviceInfo 方法时,deviceInfo 对象中的数据会更新,从而触发页面的重新渲染,确保显示最新的数据。5.

    34200

    太卷了,Obsidian 和 Logseq 纷纷推出白板功能

    作为信息流处理中的一个环节,例如:heptabase ; 2、支持各种图形、图片、文本,通过箭头进行连接,注重协作、数据分享,例如:Excalidraw。...在左侧工具条中可以创建新的白板: Obsidian 白板有下面一些特点: 1、以卡片为基础,整个白板界面非常简洁; 底下的三个按钮分别是:添加现有笔记、添加其他媒体、添加新卡片。...、可以将多个卡片进行分组,选中多个卡片,点击右键: 分组后的效果如下图,如果某个卡片不想放到分组内,拖出分组框的即可,分组也可以设置自己的主题颜色: 7、除了卡片之外,白板中还能贴图片、视频、和网站链接...; 根据某个主题的白板进行最终的输出,形成文章。...使用边栏中的创建按钮,或从新的白板页面添加画布。 Logseq 的白板默认有一个示例白板: 在示例中介绍了白板的各种用法。

    2.2K20

    【JavaScript——函数编写】寻找小狼人(蓝桥杯真题-2456)【合集】

    按钮样式:设置按钮的背景颜色、边框、文字颜色、内边距等样式,并添加过渡效果和鼠标指针样式。 卡片编号样式:设置卡片编号的位置和字体大小。 游戏提示信息样式:设置游戏提示信息的居中显示。...cardList:定义一个包含多个角色对象的数组,每个对象包含角色的 id、category 和 name。...按钮点击事件处理: 获取 “寻找狼人” 按钮元素并添加点击事件监听器。 点击按钮时,调用 newHtml 函数筛选并渲染狼人卡片。...更新游戏提示信息,显示找到的狼人的数量。 3. 筛选并渲染狼人卡片: 用户点击 “寻找狼人” 按钮。 触发按钮的点击事件监听器,调用 newHtml 函数。 4....点击按钮: HTML 页面加载,引入 CSS 和 JavaScript 文件。 JavaScript 代码获取页面元素,定义角色数据。 初始渲染所有角色卡片。 测试结果

    15600

    niRvana · 轻拟物主题4.8完美版

    评论表情 本主题自带评论表情功能,无需插件在后台即可设置 瀑布流 文章列表可选择卡片或列表排序,其中卡片又可设置为普通或瀑布流形式 不刷新加载 全局提供ajax加载文章 打赏 允许通过多种途径打赏,如...方便的在文章中插入提示框,并允许选择蓝、绿、橙、红四种提示色彩 插入下载按钮 插入模态框 插入提示工具: 在段落中插入提示语,鼠标悬停即可显示,就像这样。...“文章Wiki模式”将自动把文章内的“二级”、“三级”标题显示为文章导航并展示在边栏中,点击边栏标题可导航到文章中的指定位置。...HTML标签错误 2、更新:内置的FontAwesome字体到5.10.2版本 3、修复:WP5.3版本中,“标签与链接”小工具无法添加数据的问题 4、新增:主题自带的小工具支持“无障碍模式”了 v3.5.0...文章分类页、全部文章时间排序页在一定尺寸的屏幕上出现边栏,且顶栏也有边栏按钮的BUG,如:小尺寸的iPad横屏状态 v1.5.1 1、增强:批量发送的垃圾评论再也不可能进入本站了!

    9.1K10

    GUI组件添加、布局设置

    准备好窗口后,就可以使用JLabel来new出一个标签对象,像构建窗口一样使用setBounds把标签显示的位置坐标设置好,再使用窗口对象访问add();方法把标签组件添加到窗口上: ?...窗口的状态: setState();写1就令窗口运行时就缩在任务栏,写0则无改变: ? 运行结果: ?...添加按钮:   使用JButton来new出一个按钮对象,像构建窗口一样使用setBounds把标签显示的位置坐标设置好,再使用窗口对象访问add();方法把按钮组件添加到窗口上: ?...流式布局里的组件会随着窗口的拉动而改变 卡片布局:   CardLayout是卡片布局对象,可以直接在setLayout();方法里new这个卡片布局对象,就可以实现流式布局了:  ?...卡片布局就是像卡片一样,一张张的卡片叠在一起,按下一步就会到下一个卡片界面

    1.3K20

    ​CODING 仪表盘功能正式推出,实现工作数据可视化!

    该功能旨在用一张张统计卡片的形式,统计并展示使用 CODING 中所产生的数据。这意味着无需额外的设置,就可以收集归纳宝贵的工作数据并予之量化分析。...这些海量的数据皆会以图表或列表的方式跃然纸上,方便团队成员随时查看各项目的进度、状态和指标,云端协作迎来真正意义上的工作数据可视化。...本文将介绍如何配置仪表盘,内容包括如何使用仪表盘中的统计卡片编辑、自由拖拽统计卡片,自定义仪表盘布局等自定义功能,并简要展示每张统计卡片的作用及统计范围,点击阅读原文可查阅各统计卡片详细说明。...如何配置 点击仪表盘「自定义」按钮进入编辑状态后,可以进行添加卡片、统计卡片编辑、统计卡片拖拽等仪表盘布局操作。 您的每次设置只会应用于个人视图,不会影响团队中其他成员的视图。...[20200806150903.png] 添加卡片 在编辑状态中点击「添加卡片」按钮,右侧会浮现菜单栏展示各统计卡片,可拖拽至仪表盘面板完成卡片的添加。

    73430

    Lattics:一款简单易用、好看强大的「类脑式」知识管理工具,笔记应用与写作软件二合一

    点击右上角的书页标志,可以快速对编辑器页面实现水平或者垂直拆分,方便用户进行内容对照。最右侧边栏提供了三个重要功能:上方是卡片库和图谱按钮,下方是页面样式设置按钮。卡片库示意图:见右侧面板。...编辑器支持多种内容块、支持图文多栏排版、支持样式设置。样式设置面板如图。此外,Lattics  的编辑器也支持多页面之间拖拽内容。比如,支持从项目大纲、卡片库、搜索结果中拖拽内容到正文或图谱。...在 Lattics 中,点击文档右侧边缘的图谱按钮,变可以快速将文档目录切换为图谱。具体而言,Lattics 的图谱包括三种视图:思维导图视图、情节视图、鸟瞰视图。...每个文档可以视为多个卡片。Lattics 提供了「切分文章」的功能,即卡片拆分功能。将光标放在需要拆分的地方,点击编辑器左下方的切分文章按钮即可。...新增卡片。在图谱中,创建新的独立卡片的时候,理论上是应该出现在卡片库。目前,在思维导图和情节视图中新增的卡片,在编辑器页面却不显示内容。建议优化。注释:Lattics 访问地址

    2.4K30

    69. 旅游景点网格布局(上)

    概述本教程将详细讲解如何使用HarmonyOS NEXT中的GridRow和GridCol组件实现旅游景点网格布局。...本教程将涵盖以下内容:旅游景点数据结构设计数据准备整体布局实现GridRow和GridCol组件配置景点卡片实现布局效果分析2....数据结构设计首先,我们需要定义旅游景点的数据结构,包含景点的基本信息:// 旅游景点数据类型export interface SpotType { id: number; // 景点ID...16像素y: 16:垂直间距为16像素5.2 GridCol配置在本案例中,我们使用了默认的GridCol配置,没有指定span属性,这意味着每个景点卡片占据一个网格单元。...6.3 景点卡片设计每个景点卡片包含以下元素:景点图片:展示景点的视觉效果价格标签:显示门票价格或免费标识景点名称:突出显示景点名称评分:使用星星图标和数字展示评分位置:显示景点所在地标签:展示景点的特点和分类这种设计使用户能够快速获取景点的关键信息

    10010

    TDesign 更新周报(2022年12月第1周)

    中导出替换 @honkinglin (#1845) FeaturesCalendar: 日历组件支持多个高亮单元格; @PsTiu (#1850)卡片样式菜单操作栏样式调整 @uyarn (#1863...@honkinglin (#1858)Table: @chaishi (#1849) 修复本地数据分页场景中,切换分页大小,onPageChange 事件参数返回的数据不正确问题序号列支持跨分页显示...: 修复本地数据分页场景中,切换分页大小,onPageChange 事件参数返回的数据不正确问题 @chaishi (#2074)序号列支持跨分页显示(issue#2072) @chaishi (#2074...仅选中当前页数据,切换分页时清空选中结果,全选仅选中当前页数据 @chaishi (#1755)Drawer: 默认不显示关闭按钮,有取消和确认按钮足矣,同其他框架保持一致 @chaishi (#1746...: 减少表格重渲染 #1688 @jsonz1993 (#1704)修复本地数据分页场景中,切换分页大小,onPageChange 事件参数返回的数据不正确问题 @chaishi (#1755)序号列支持跨分页显示

    2.4K30

    电商管理系统客户端原型分享

    接下来让我们一起来看看,在这款原型中,使用到了哪些原型设计技巧吧~ Mockplus原型设计实用技巧 1.使用快速格子完成卡片式设计 电商管理系统所包含的信息往往多而复杂,如果使用常规排版,则会造成信息堆积...3.使用按钮栏设计内容切换 在订单详情页面,我们使用了按钮栏组件,设计了“订单详情”和“收货与物流信息”的内容切换。 ?...操作技巧: ① 首先我们使用按钮栏组件和内容面板设计页面结构; ② 在子页面分别设计好订单页和物流页面的内容,并与内容面板相关联; ③ 拖拽链接点,将按钮栏对应的按钮与内容面板对应的内容进行连接,即可完成内容切换的设计...4.弹出面板的设计技巧 在财务管理等页面,我们使用了按钮和弹出面板组件,来呈现了弹窗等隐藏的交互效果。在弹出面板中,我们使用了输入框组件,并设置了占位符,来呈现更加真实的演示效果。 ?...② 在设计按钮样式时,可以点击属性面板中的“闪电”图标,来呈现更加丰富的组件交互效果。 ? ③ 使用相同风格的图标和文本组件,可以呈现统一的视觉效果。 ?

    2.1K30
    领券