flutter之Card控件

最新推荐文章于 2024-08-01 15:30:00 发布
最新推荐文章于 2024-08-01 15:30:00 发布
阅读量8.9k 收藏 3
点赞数 1
分类专栏： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chunchun1230/article/details/82350593
版权

Material Components 库中的Card包含相关内容块，可以由大多数类型的widget构成，但通常与ListTile一起使用。Card有一个孩子， 但它可以是支持多个孩子的列，行，列表，网格或其他小部件。默认情况下，Card将其大小缩小为0像素。您可以使用SizedBox来限制Card的大小。

在Flutter中，Card具有圆角和阴影，这使它有一个3D效果。更改Card的eelevation属性允许您控制投影效果。 例如，将elevation设置为24.0，将会使Card从视觉上抬离表面并使阴影变得更加分散。 有关支持的elevation值的列表，请参见Material guidelines中的Elevation and Shadows。 如果指定不支持的值将会完全禁用投影 。

Card 摘要:

  • 实现了一个 Material Design card
  • 接受单个孩子，但该孩子可以是Row，Column或其他包含子级列表的widget
  • 显示圆角和阴影
  • Card内容不能滚动
  • Material Components 库的一个widget

 

 

 

 

chunchun1230
关注
专栏目录
Flutter基本控件介绍
学无止境
01-07 1万+
Flutter控件本身通常由许多小型、单用途的控件组成，结合起来产生强大的效果，例如，Container是一种常用的控件，由负责布局、绘画、定位和大小调整的几个控件组成，具体来说，Container是由LimitedBox、ConstrainedBox、 Align、Padding、DecoratedBox和Transform控件组成，而不是将Container子类化来产生自定义效果，您可以用这种新...
Flutter 控件 Card
weixin_38107457的博客
05-18 239
import 'package:flutter/material.dart'; import 'package:flutter/src/foundation/key.dart'; import 'package:flutter/src/widgets/framework.dart'; import 'package:flutter/widgets.dart'; class CardDemo extends StatefulWidget { const CardDemo({Key? key}) : s.
Flutter Card使用
yechaoa
05-23 4821
效果： 代码： Card( elevation: 5,//阴影 shape: const RoundedRectangleBorder(//形状 //修改圆角 borderRadius: BorderRadius.all(Radius.circular(10)), ), colo...
Flutter 初识：数据表格和卡片
最新发布
yang_6799的博客
08-01 1605
DataCell 是 Flutter 中用于定义 DataRow 中单元格的小部件。TableCell 是 Flutter 中用于定义 TableRow 中单元格的小部件。Table 是 Flutter 中用于显示表格布局的小部件。TableRow 是 Flutter 中用于定义 Table 的行的小部件。DataTable 是 Flutter 中用于展示数据表格的小部件，通常用于显示大量结构化的数据。Card 是 Flutter 中用于创建卡片样式小部件的容器，它通常用于在应用中展示信息块。
Flutter开发之——Card
我的博客
04-20 743
一 概述 Card是Material风格的卡片控件，Card有较小的圆角和阴影。 Card通常用于展示一组信息 二 Card 2.1 构造方法 const Card({ Key? key, this.color, this.shadowColor, this.elevation, this.shape, this.borderOnForeground = true, this.margin, this.clipBehavior,
flutter系列之:Material中的3D组件Card
程序那些事
09-23 864
除了通用的组件之外，flutter还提供了两种风格的特殊组件，其中在Material风格中，有一个Card组件，可以很方便的绘制出卡片风格的界面，并且还带有圆角和阴影，非常的好用，我们一起来看看吧。以上就是flutter中Card的使用了，大家可以结合ListTile一起构建更加美观和复杂的系统。更多内容请参考最通俗的解读，最深刻的干货，最简洁的教程，众多你不知道的小技巧等你来发现！欢迎关注我的公众号:「程序那些事」,懂技术，更懂你！
Flutter组件--卡片效果(card组件)
eastWind1101的博客
10-14 1834
card组件,卡片效果
Flutter 实现控件圆角的方式
qq_30005223的博客
01-25 583
Flutter笔记
Flutter-Credit-Card-Input-Form.zip
07-08
【标题】"Flutter-Credit-Card-Input-Form.zip" 提供的是一个使用 Flutter 开发的信用卡输入表单，适用于移动应用开发，特别是在处理金融交易或支付相关功能时。Flutter 是 Google 推出的开源 UI 工具包，用于构建高...
flutter toast 自定义控件
仰望星空
03-10 1225
虽然fluttertoast很好用,还是决定自定义一个,毕竟产品经常需要,黑点,亮点,大点小店,带点图片的…需求,如果需要图片等特殊效果,该下UI即可 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class ToastUtils { static OverlayEntry _...
《Flutter 控件大全》第二十一个：Card
老孟Flutter
04-04 552
如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。 同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。 Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。 Card是material风格的卡片控件，Card有较小的圆角和阴影。Card通常用于展示一...
Android代码-Flutter实现的swipe card效果。
08-06
Tinder cards Hi! After showcasing Focus for Reddit, the app I am working on, people asked me how did I do the tinder like cards swipe (posts media are shown as a stack of 3 swipable cards) and if I could make tutorial or open-source it: And I did it! Here it is. I've created a Tinder like user interface (not working, that's not the point). I've found 2 ways of doing this (there may be way more ways) Using Draggable Using GestureDetector and Alignment (what I use for my app) P.S: Use the appB
Flutter中AspectRatio组件、Card卡片组件
01-08
AspectRatio组件 AspectRatio组件可以设置子元素child的宽高比 //导入了Material UI组件库 ,快捷操作fim import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } //自定义组件 //StatelessWidget:无状态组件，状态不可变的widget //StatefulWidget:有状态组件，状态可以改变 //fluter中一切都是组件 //使用MaterialApp和Scaffold 两个组件装饰App //MaterialApp一般作为根组件----h
Flutter开发：Card使用
一个程序员-二白的博客
07-12 865
模拟数据： 在工程目录下添加一个ListDart文件模拟存放我们的数据源，然后在Main.dart文件中引入该文件 List listData=[ { "title": 'Candy Shop', "author": 'Mohamed Chahin', "imageUrl": 'https://www.itying.com/images/flutter/1.png', "description":...
flutter card使用
鱼忘七秒的博客
08-05 1783
//关键代码 new Card( elevation: 15.0, //设置阴影 shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(14.0))), //设置圆角 child: new Column( // card只能...
Flutter Card示例
u013788239的专栏
04-26 308
import 'package:flutter/material.dart'; void main() => runApp(new MainAPP()); enum Department { treasury, state } class MainAPP extends StatelessWidget { @override Widget build(BuildContex...
Flutter中常用的组件-Card
不二菜菜子的博客
02-01 1009
Flutter中常用的组件-Card
Flutter 分页表格控件详解及实例
在Flutter开发中，实现分页功能的表格控件是非常实用的特性，尤其是在处理大量数据展示时。本文将详细介绍如何在Flutter中利用`PaginatedDataTable`组件来构建一个具备分页功能的表格，以便用户能够有效地浏览和管理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值