如何根据卡片中的文字动态扩展卡片widget的高度？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

滑动卡组件

用户可以轻松地将任何内容添加到卡中以使用Flutter应用程序。该演示视频展示了如何在Flutter中创建滑动卡。...它显示了如何在flutter应用程序中使用「slide_card」软件包来使用滑动卡。它显示了一张纸牌的弹跳动画，该动画分成两个打开的不同纸牌。它会显示在您的设备上。...**backCardWidget：**此属性用于要在背面显示的小部件。其高度应小于或等于正面卡的高度。 **animateOpacity：**此属性用于提供良好的视觉效果。...，「controller」，「slideCardCardWidth」是整个卡的宽度，「visibleCardHeight」是前卡的高度，「hiddenCardHeight」是后卡的高度，不能大于正面卡的高度...在此卡片中，我们将添加标题，内容和电话图标。当用户点击信息图标时，将显示后卡，否则将不显示。

2.8K6 0

Material Design —卡片（Cards）

例如，将主要内容放置在卡的顶部，或使用排版来强调最重要的内容。图像可以强化卡片中的其他内容。但是，它们在卡内的大小和位置取决于图像是主要内容还是用于补充卡片上的其他内容。...背景图像当文字放置在纯色背景上时，文字清晰度最高，且文字对比度足够高。放置在图像背景上的文本应该保留文本的易读性。 ? 左：不同布局的卡片右：排版方式能突出重点内容 ?...超过最大卡片高度的卡片内容会被省略，内部不会滚动，但可以扩展卡片。一旦展开，卡片可能会超过视图的最大高度。在这种情况下，卡片将随卡片集合一起滚动。 ? ?...扩展的补充文本变得可见，然后聚焦放在补充的行动上 ---- 操作卡中的主要动作通常是卡本身。在集合中，根据内容类型和预期结果的不同，补充操作可能因卡片而异。例如，播放视频相对于打开一本书。...在集合中的卡片中，始终展示操作。补充操作使用图标，文本和UI控件（通常放置在卡的底部）明确调出卡内的补充操作。除了溢出菜单之外，补充操作限制为两个操作。 ? ?

4.3K10 0

您找到你想要的搜索结果了吗？

是的

没有找到

Flutter 卡片选择器

卡片的边角和阴影有些调整。卡片是用于表示某些关联数据，例如集合，地理区域，膳食，联系方式等。卡片包含有关单个对象的内容和动作。在本文中，我们将探讨Flutter中的**Card Selector。...**我们将看到如何在flutter应用程序中使用card_selector包来实现带有动画和堆叠卡的卡选择器的演示程序。...选择器是完全可配置的，动画时间，卡之间的间隙，堆叠卡的尺寸因子。用户可以从左向右或从右向左滑动卡。特定卡上的信息将有所不同。该演示视频展示了如何在颤动中创建卡选择器。...它显示了flutter应用程序中使用card_selector软件包的卡选择器的工作方式。它显示了堆叠的卡片，动画，从左到右或从右到左刷卡。内容将根据卡而改变。...另外，我们将添加mainCardWidth表示列表中第一个元素的宽度，mainCardHeight表示列表中第一个元素的高度，onChanged表示要在更改后的卡片上执行的回调。

7.3K2 0

Android 手表应用开发设计规范【译】

如何退出　　当用户做出选择后，应用应该自动退出二维选择卡界面。用户也可以向下滑动第一张卡片来退出，或者从左向右横滑处每个层级最左侧的卡片来退出。...根据不同卡片设计，一般需要提供的主要标准设计素材包括：应用图标、单张或多张背景图片、动作按钮图标、动作确认动画等。当然，根据具体设计方案的不同，也可能需要提供其他设计素材。...尽可能使用图标与数值配合，来代替文字。文字应尽量简洁，长文会被应截断以便在一张卡片中显示。保持必要的谨慎　　智能穿戴设备具有天然的个人属性，但也并非是完全隐私的。...提示卡（peek card）是卡片信息流中的首张卡片，它会部分显示在主屏幕的底部。提示卡片的高度根据通知文字的数量而变化。高度较小的提示卡片会显示出更多的表盘设计区域。...例如，不要将一款天气主题的表盘简单地设计成：时钟加上当前气温，也许可以把它设计成一款：描述全天气温将如何变化的表盘。保持信息高度整合 ?

3.9K7 0

ps怎么使用单行选框工具设计一张会员卡?

PS单行选框工具可以制作一张会员卡，该怎么制作会员卡呢？下面我们就来看看详细的教程。 ? 1、新建画布，填充背景色，如图。 ?...2、新建图层，命名为“卡片”，用圆角矩形工具画一张卡片，填充颜色（dc768b），如图。 ? 3、为卡片设置一个简单的投影效果，如图。 ?...4、新建图层，命名为“卡片中间部分”，用矩形选框工具绘制一个矩形，填充颜色（f4f5f0），如图。 ? 5、新建图层，命名为“效果1”，然后，选择“单行选框工具”。...（单行选框工具，它是指截取宽为1像素的选区，单列选框工具也是如此。在单行单列选框工具中，是不可以设置高度和宽度的，不能使用消除锯齿和羽化功能的。）...14、输入文字，调整不同图层文字的字体、颜色、位置，完成最终效果。 ?

9053 1

如何给网站添加Web Bookmark

前言在查看阮一峰老师最新的周刊时，发现了一个很好玩的工具https://bookmark.style/[1]，作用就是输入网站，会根据网站上的信息生成精美的分享卡片，可以保存成图片并进行分享。...顾名思义，这里就是根据网站的URL来生成一个卡片或者书签，只不过这里的卡片和书签是存在于web上的。目的是方便分享某些URL时，会自动生成该网站的一些关键信息。...常见的场景有：比如说发推特时，输入一个链接，就会自动生成一个卡片。使用Notion写文章时，粘贴一个URL就会提示是否创建bookmark。在即刻上面发送动态时，粘贴的URL也会生成一个卡片。...四个必须的配置分别是： og:title - 在卡片中显示的网站的标题。 og:type - 网站的类型，可以进行指定。 og:image - 图像的URL，用来在卡片中展示。...同时还可以根据指定的文字来生成图片，这里我输入了一些markdown语法的文字，也可以进行解析。感兴趣的可以试试。

1.4K1 0

【Flutter】StatelessWidget 组件 ( Divider 组件 | Card 组件 | AlertDialog 组件 )

文章目录一、Divider 组件二、Card 卡片组件三、AlertDialog 对话框组件四、相关资源一、Divider 组件 ---- Divider 组件是分割线组件 , 可以设置高度...// 设置边距 10 padding: EdgeInsets.all(10), // 设置卡片文字..., 设置卡片文字样式 child: Text("卡片文字", style: textStyle,), ),..., 设置卡片文字样式 child: Text("卡片文字", style: textStyle,), ),..., 设置卡片文字样式 child: Text("卡片文字", style: textStyle,), ),

1.9K0 0

为自己的鸿蒙应用增加卡片【鸿蒙专题08】

Java卡片开发在开始之前可以先看下这张图，我们不仅陷入思索，这种卡片是如何制作的，接下来我们就一探究竟，当然，由于我是刚开始做，所以布局这方面如果做的不好，还是希望大家见谅。...image-20220120213441454 在此之前，我们先来了解一下什么是服务卡片服务卡片是FA的一种主要信息呈现形式，开发者可以在卡片中展示用户最关心的FA数据，并可以通过点击卡片内容直接打开...例如，支付类FA，可以在服务卡片中展示付钱，收钱功能，点击就可以直接启动，支付类FA, 天气类FA，可以在服务卡片中展示当前的基本天气信息，点击卡片启动天气FA，支持的尺寸包括：12、22、24和44...服务卡片提供了多种类型的模板，开发者可以根据需要展示的信息类型灵活选择模板，快速构建服务卡片。...为卡片名，即在onCreateForm中根据AbilitySlice.PARAM_FORM_NAME_KEY可取到的值。

1.3K2 0

【Flutter】顶部导航栏实现 ( Scaffold | DefaultTabController | TabBar | Tab | TabBarView )

a widget for the currently selected tab. ( 显示当前选中的标签对应的组件 ) [TabController], which coordinates tab..., 每个 TabBar 组件需要设置若干个 Tab 组件 ( 至少一个 ) ; Tab 构造函数 : /// 创建一个材料设计风格的选项卡. /// /// 至少设置一个 text 文本和...icon: Icons.animation), const TabData(title: '变换', icon: Icons.transform), const TabData(title: '高度...}) : super(key: key); /// 根据该数据条目生成组件 final TabData data; @override Widget build(BuildContext...color: Colors.black, /// 卡片中的元素居中显示 child: Center( /// 垂直方向的线性布局

2.5K4 0

干货 | 玩转社交裂变，携程小程序营销实现方案

在实际绘制时，首先定义一个canvas容器，然后根据海报图各元素宽高和定位，叠加背景底图、文字、二维码等信息，无需关注内部绘制方法。...如果需要多行显示文字，并动态调整字体大小，则需要将文字进行拆行，切分为数组， let that =thislettextLen = text.lengthlettopHeight = textLen <...，并将返回的widgetData加密返回微信 4）客户端将卡片数据push到小程序widget中进行展示 ?...模板this.setWidgetRender() //渲染widget数据this.setWidgetData() //设置卡片自适应高度 WidgetDom.useDynamicHeight()...因此我们尝试使用一个通用H5链接二维码，根据扫码工具的区分，完成不同小程序的跳转。

2K2 0

iOS开发常用之网络

文字及图片可扩展输入栏，汽泡效果等聊天核心特性，分页及自动布局完善。 DLSlideView - DLSlideView对常见的顶部Tab页点击，滑动分页做了封装。...JXT_iOS_Demos - AboutNavigationBar：一些关于navigationBar的非常规的但是较为实用的操作，包括利用毛玻璃，动态透明，动态隐藏，以及头视图的动态缩放，并同时涉及了...ASDayPicker - 适用于iOS（iPhone）的日期选择器（时间选择器），类似于Calendar app的周视图。今天扩展 - 用纯代码构建一个Widget（今天扩展）。...* WZLBadge - Badge，支持横屏支持iOS5〜iOS8允许高度定制化，包括“红点”的背景颜色，文字（字体大小，颜色），位置等。说明。...VJDeviceSpecificMedia - 如何根据设备选择不同尺寸的图片可以通过设置不同尺寸的设备的LaunchImage，来使用App适配这些设备，要在不同尺寸设备上使用不同大小的图片，则需要在代码中一一判断

23.5K1 0

【Flutter】侧拉导航栏实现 ( Drawer 组件 | PageView 组件 )

controller List children PageController 用于控制 PageView 的跳转 , PageController 主要作用是调用 void jumpToPage...), const TabData(index: 3, title: '变换', icon: Icons.transform), const TabData(index: 4, title: '高度...}) : super(key: key); /// 根据该数据条目生成组件 final TabData data; @override Widget build(BuildContext...color: Colors.black, /// 卡片中的元素居中显示 child: Center( /// 垂直方向的线性布局.../// 设置图标 Icon(data.icon, size: 128.0, color: Colors.green), /// 设置文字

1.8K2 0

【Flutter】堆叠式卡轮播

作为移动应用程序开发人员，我们有时需要制作滑动的，动画的背景图像轮播。但是，有时候，我们需要制作一张滑动卡片传送带，其中包含一些具有各种背景颜色，图像或渐变的信息。...下面的演示视频显示了如何在Flutter中创建带有垂直旋转木马的堆叠卡。它显示了在您的flutter应用程序中如何使用「stacked_card_carousel」软件包来使用堆叠式卡轮播。...它显示了垂直圆盘传送带滑动卡的列表，所有卡向上滑动并堆叠，称为堆叠式卡传送带。它会显示在您的设备上。堆叠式卡轮播的一些属性： **items：**这些属性表示卡小部件的列表。...**applyTextScaleFactor：**这些属性表示如果设置为true，则根据文本比例因子线性扩展空间和位置。缩小比例被省略。...", ), ]; 我们将创建八种样式的卡片，并在其中添加图片，标题和说明。将所有数据添加到**StackedCardCarousel（）上。**当该代码运行，你会看到卡的列表。

3.8K3 0

分享文字转卡片代码

之前分享过 python 文件代码转图片（2）内容，改了一下，可以生成卡片似的图片，主要模拟微信读书笔记。提供文字内容即可, 颜色，背景图片，什么都可以配置，修改配置文件内容即可。...改改代码，也可以做个日历，单词卡片或者爬取网页内容直接生成图片等。...请关注叶子陪你玩' TEXT = """问题描述：有n个人围成一圈，从1开始按顺序编号，从第一个人开始从1到k（假设k=3）报数，报到k的人退出圈子，然后圈子缩小，从下一个人继续游戏，问最后留下的是原来的第几号...else: count = 0 new_text += "\n" return new_text '''计算文本对象的宽度和高度...,config.FONT_SIZE) # 计算文本对象的宽度和高度 text_w,text_h = cal_textobj_w_h(new_text,config.FONT_PATH,config.FONT_SIZE

3.4K3 0

Flutter中构建布局顶

Flutter的布局机制如何工作。如何垂直和水平布局小部件。如何构建一个Flutter布局。这是在Flutter中构建布局的指南。您将构建以下屏幕截图的布局： ?...它的第一个孩子，列，包含2行文字。第一列占用大量空间，所以它必须包装在扩展小部件中。 ? ? 第二行称为按钮部分，也有3个子项：每个子项都是一个包含图标和文本的列。 ?...扩展小部件的默认弹性因子是1。...卡片有一个孩子，但其孩子可以是支持多个孩子的列，行，列表，网格或其他小部件。默认情况下，卡片将其大小缩小为0像素0。您可以使用SizedBox来限制卡的大小。...包含图像和文字的卡片。

43K1 0

Flutter第3天--基础控件(上)

，而且至少有title，theme，home三个属性而且home传入的是一个Widget ---- 4.恭喜达成成就：Widget源码偷窥者, 成就奖励：三张卡片：卡片初始属性：见白框(PS:属性会随着你的阅历变多哦...> children = const [], ---- 触发新手任务3，并触发局部Widget树，系统赠送卡牌： ?...flow.png 代码实现：从网上找了一个FlowDelegate的实现类核心就是根据位置可以自己绘制孩子的位置(吐槽:源码了竟然没有实现类,给一个也好啊...)...未精炼的传说级卡片，更多属性加成，战士们，去精炼吧 - - - ---- 四、容器扫个尾： 1.Baseline 将文字按照基线对齐(因为比较好看)--baseline越大，距离顶端越远...- - - 还剩几个Box，明天写几个布局例子顺带讲一下，反正每个新控件都会发张卡最后把卡片总结起来，看看能不能凑够两幅扑克牌...打印出来当扑克牌打，还怕Flutter控件学不会?

2.9K3 0

Material Design 实战之第四弹 —— 卡片布局

卡片式布局也是MaterialsDesign中提出的一个新的概念，它可以让页面中的元素看起来就像在卡片中一样，并且还能拥有圆角和投影，下面我们就开始具体学习一下。...； 1.2 app：cardCornerRadius属性指定卡片圆角的弧度，数值越大，圆角的弧度也越大； app:elevation属性指定卡片的高度，高度值越大...> 其中： app：cardCornerRadius属性指定卡片圆角的弧度，数值越大，圆角的弧度也越大； app:elevation属性指定卡片的高度，高度值越大，投影范围也越大，但是投影效果越淡...然后我们在CardView布局中放置了一个TextView，这个TextView就会显示在一张卡片中了。...当AppBarLayout接收到滚动事件的时候，它内部的子控件是可以指定如何去影响这些事件的，通过app:layout_scrollFlags属性就能实现。

2.1K1 0

CardView的那点事儿

↳ android.widget.FrameLayout ↳ android.support.v7.widget.CardView ---- 从官方的文档中我们可以看出： CardView：有圆角的背景和阴影的...CardView 扩展 FrameLayout 类别并让您能够显示卡片内的信息，这些信息在整个平台中拥有一致的呈现方式。CardView 小组件可拥有阴影和圆角。...CardView 在 Android 5.0（API 级别 21）及更高版本中使用真实高度与动态阴影，而在早期的 Android 版本中则返回编程阴影实现。...常用属性： card_view:cardElevation 阴影的大小 card_view:cardMaxElevation 阴影最大高度 card_view:cardBackgroundColor 卡片的背景色...-- 如何使用添加依赖项 RecyclerView 与 CardView 小组件为 v7 支持内容库的一部分将这些 Gradle 依赖项添加至您的应用模块 dependencies { ..

9612 0

flutter系列之:Material中的3D组件Card

简介除了通用的组件之外，flutter还提供了两种风格的特殊组件，其中在Material风格中，有一个Card组件，可以很方便的绘制出卡片风格的界面，并且还带有圆角和阴影，非常的好用，我们一起来看看吧...一提到Card大家第一印象就是名片，在名片中描述了一个人的相关信息，比如姓名，电话和邮箱等。而Card就是将一组相关的信息放在一起呈现的组件。...Card的使用通过上面的讲解，我们对Card的使用也有了基本的了解，接下来我们可以通过一个具体的例子，来看看Card具体是如何使用的。...Column中有一个children的属性，可以包含多个子元素，我们可以在每一行中放上图片或者文字，如果要想进行复杂的布局，还可以自由进行复杂的组合。...ListTile是一个固定高度的Row，并且可以包含一个leading icon或者trailing icon。还可以包含title，subtitle还有一些点击的交互，非常的方便。

5761 0

UED专栏 | 携程机票订后服务“航班助手”的三大设计秘籍

合并可以实现“合璧”，但处理好“双剑”之间的关系才是重中之重。由于「航班助手」主要是以众多卡片的形式提供服务，在合并后如何避免服务信息的堆叠，就成了本次改版的设计挑战点。...处理方案：我们将原航班动态内的所有信息聚合在一张卡片中（如何处理大量的信息聚合会在第三招中详细解说），运用深色背景来反衬航班卡片的优先层级，就如同蓝天下的白云一样。...同时在卡片的头部配以场景化文案，与用户产生时间空间上的共鸣。 ? 1）首推展示航班信息后，多行程时如何处理？我们关注到不同用户群体的使用习惯不尽相同。...如果说航班卡片中的信息是云，时间是风，那我们要做的就是让信息呈现智能起来，如云般随风云卷云舒，时刻变化。处理方案：为了做好这一变化，我们引入了「关注度」作为线索。 ?...至此，“万剑归宗”“白云出岫”“风伴流云”三招打完，航班助手页面焕然一新，无论从易读性，统一性，扩展性上都得到了极大地提升。虽然场景变多了，但动态的信息体现更游刃有余了。

8633 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭