首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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.3K40

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)

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

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

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

    3.6K30

    【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 组件构造函数源码 : 构造函数中的可选参数就是组件的可设置选项

    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 #侧栏卡片选择器名称

    1K50

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

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

    16800

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

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

    2.1K20

    niRvana · 轻拟物主题4.8完美版

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

    8.7K10

    GUI组件添加、布局设置

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

    1.2K20

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

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

    69730

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

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

    2.2K30

    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.2K30

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

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

    2.1K30

    1小时搞定卡片拖拽、自动排列交换位置、拖拽数据存取

    ,并且其他卡片根据拖动的位置自动顺移,位置数据实时更新 拖动的时候可使用鼠标滚动 卡片根据数据生成,所有参数和内容都是可以自定义的,方便应用于不同场景 不同操作的事件都可获取到,拖动后的位置数据会实时更新...Slot(插槽) 首先先介绍一下,卡片内容分为上下两部分: 上部分为卡片的标题栏,并且拖拽事件只有点击上部分才触发 下部分为卡片的内容 两个部分都是可以进行自定义内容及样式的。...若不添加的自定义内容的话,标题栏和内容都是默认背景为白色,显示data中的name。若添加了自定义内容则背景需要自己设置。...为从子组件返回的数据,及data数组里面的每一个对象数据--> <!...} itemData:{ 类型:Object, 功能:获取当前卡片的其他数据 } */ //在子组件中使用props即可使用 props:{ animationState:{

    4.1K21

    flutter主题设置

    Theme作用:可以设置Widget的主题,提高开发效率和速度,保持App主题统一性或某种一致性。 Theme Theme组件可以为material APP定义主题数据(ThemeData)。...Material组件库里很多组件都使用了主题数据, 如导航栏颜色、标题字体、Icon样式等。Theme内会使用InheritedWidget来为其子树共享样式数据。...focusColor - 焦点获取时的颜色,例如,一些按钮焦点、输入框焦点。 hoverColor - 点击之后徘徊中的颜色,例如,按钮长按,按住之后的颜色。...iconTheme - IconThemeData类型,与卡片和画布颜色形成对比的图标主题。...cardTheme - CardTheme类型,卡片的主题样式。 pageTransitionsTheme - PageTransitionsTheme类型,页面转场主题样式。

    4.5K20

    SAO-UI-PLAN-控制面板企划

    之前做的controlldot和顶栏修改就是一些想法的实践。 目前的打算就是取消顶栏的页面菜单按钮和侧栏小菜单按钮。把他们放进控制面板里。...相比起以前的按钮,新的控制面板中我准备通过新增一个自定义获取截图的API,获取对应页面的截图,就和友链一样,把原来的按钮换成类似友链卡片那样的预览卡片。然后套上swiper轮播图。...还有就是以前做的杂七杂八的各种小组件,比如天气啦、打赏榜单、自我介绍卡片之类的,这些功能直接放个单独的页面有点丑,但是做成小组件的话,那就是个彩蛋,我不说估计一年也就几个人会看到。...手机端样式适配的话,反正有flex,把中间窗口的宽度调整下就好了。 还有就是,以前写的fixed-card方案是在手机端把侧栏隐藏,然后再用自定义的按钮来显示嘛。现在方便了。我连侧栏也不要了。...目前比较头疼的就是性能问题。一堆版块都丢在控制面板里。它的dom量肯定爆炸,当前的想法是做懒加载和挂载。页面内容丢一个js里,点了按钮才insert。这样dom都是点了才新增的。

    1K30

    HarmonyOS Next 实战卡片开发 01

    - hml:当前卡片为JS卡片。 字符串 可缺省,缺省值为hml window 用于定义与显示窗口相关的配置。 对象 可缺省,缺省值见表2。...布尔值 否 colorMode 表示卡片的主题样式,取值范围如下:- auto:跟随系统的颜色模式值选取主题。- dark:深色主题。- light:浅色主题。...表2 window对象的内部结构说明 属性名称 含义 数据类型 是否可缺省 designWidth 标识页面设计基准宽度。以此为基准,根据实际设备宽度来缩放元素大小。...postCardAction接口触发message事件拉起FormExtensionAbility中的onUpdateForm onUpdateForm中通过updateForm来返回数据 卡片组件 记得要携带...== undefined) { // 获取卡片的formId const formId = want.parameters!

    7500

    PPT辅助Power BI:模拟知乎卡片图

    知乎后台有一组卡片,这组卡片有两个特点。首先,卡片对应的主题图标位于右下角。其次,图标做了一定程度的缺失处理,看上去和卡片融为一体。...Power BI的新卡片图视觉对象可以插入图标,但是当前方向只有上下左右四个,并没有右下角的选项。那么怎么办?PPT来相助。...模拟知乎 打开一个空白的PPT,插入选项卡下,选择图标可以找到丰富的内置图标,也可以插入外部图片。 调整PPT的背景色和你的Power BI报表色系保持一致。...用微信、QQ等截图工具对图标进行截图,截图长宽比大致和Power BI的卡片图保持一致,截图时把图标截在右下角并故意缺失部分。截图工具有下载保存按钮,将图片保存在本地。...使用新卡片图视觉对象新建卡片,对背景使用上方的截图,图像设置为匹配度。 完工

    4800
    领券