Card 是卡片组件块,内容可以由大多数类型的 Widget 构成,Card 具有圆角和阴影,这让它看起来有立体感。
 
Card组件的常用属性:
属性 说明
margin 外边距
child 子组件
shape Card的阴影效果,默认的阴影效果为圆角的长方形边

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
title: "CardWidget",
home: MyApp(),
));
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
title: Text("张三",style: TextStyle(fontSize: 28)),
subtitle: Text("董事长"),
),
Divider(),
ListTile(
title: Text("电话:123456789"),
),
ListTile(title: Text("地址:xxxxxxxxxxxxxxxxx"))
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
title: Text("李四",style: TextStyle(fontSize: 28)),
subtitle: Text("CEO"),
),
Divider(),
ListTile(
title: Text("电话:123456789"),
),
ListTile(title: Text("地址:xxxxxxxxxxxxxxxxx"))
],
),
),
],
),
);
}
}

Flutter——Card组件的更多相关文章

  1. Flutter 父子组件传值

    Flutter 父子组件传值 一父传子: 父中: void onButtonChange(val1,val2,val3){ print('============================子向父 ...

  2. flutter Container组件和Text组件

    在开始之前,我们先写一个最简单的入口文件:     后面,都是在这个结构的基础上面完成的. 由于Container组件和Text组件都是写在body里面的,所以下面,先将body抽离成一个组件的形式. ...

  3. Vant Weapp小程序蹲坑之使用card组件显示价格

    问题 在基于mpvue+Vant Weapp组件库实战过程中,问题越来越多.网络上所谓的"坑"总结,仅仅不过是其开发中所遭所遇之"坑"而已--估计后面的&quo ...

  4. Flutter InkWell - Flutter每周一组件

    Flutter Inkwell使用详解 该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://gi ...

  5. Flutter ListTile - Flutter每周一组件

    该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://github.com/xj124456/fl ...

  6. 11 - Vue3 UI Framework - Card 组件

    卡片是非常常用也是非常重要的组件,特别是在移动端的众多应用场景中,随便打开一个手机 App ,您会发现充斥着各种各样的卡片. 所以,我们也来制作一个简易的 Card 组件 返回阅读列表点击 这里 需求 ...

  7. Jx.Cms开发笔记(四)-改造Card组件

    在Blazor 组件库 BootstrapBlazor 中Card组件介绍中我们说过,如果我们使用了Card组件的IsCollapsible属性设置了可伸缩的话,就只能使用Text属性来设置标题文本, ...

  8. flutter Card卡片列表组件

    一个 Material Design 卡片.拥有一个圆角和阴影 import 'package:flutter/material.dart'; import './model/post.dart'; ...

  9. Flutter常用组件(Widget)解析-ListView

    一个可滚动的列表组件 不管在哪,列表组件都尤为重要和常用. 首先来看个例子: import 'package:flutter/material.dart'; void main () => ru ...

随机推荐

  1. Jsoup-简单爬取知乎推荐页面(附:get_agent())

    总览 今天我们就来小用一下Jsoup,从一个整体的角度来看一看爬虫 一个基本的爬虫框架包括: [x] 解析网页 [x] 失败重试 [x] 抓取内容保存至本地 [x] 多线程抓取 *** 分模块讲解 将 ...

  2. (十二)会话跟踪技术之servlet通信(forward和include)

    一.servlet通信方法 二.具体应用 scopeServlet.java protected void doPost(HttpServletRequest request, HttpServlet ...

  3. JS时间转换,url编码,jquery返回类型等问题

    1.当时间被转换为json格式后会被转换成 /Date(...)/ 这种格式,其中...为时间转换成妙后的一串整数 function changeDateFormat(cellval) { )); v ...

  4. iOS——数据安全

    在移动互联网快速发展的今天,iOS应用直接运行在用户的手机上,与运行在服务器后台服务相比,更有可能被黑客攻击. a.网络安全: 1.1 安全地传输用户密码 事先生成一对用于加密的公私钥,客户端登录的时 ...

  5. C#RSA加密解密(对接PHP)

    上篇文章中写的RSA加密是针对C#的,现在外部调用的是PHP,我们平常见到的RSA无论公钥和私钥都是一长串数字,很显然C#生成的XML不是通用的加密.如果外部调用需要处理一下. 一.首先可以去网上找一 ...

  6. PHP实现无限极分类的两种方式,递归和引用

    面试的时候被问到无限极分类的设计和实现,比较常见的做法是在建表的时候,增加一个PID字段用来区别自己所属的分类 $array = array( array('id' => 1, 'pid' =& ...

  7. Burpsuite—渗透测试神器

    Google浏览器插件---SwitchyOmega Firefox浏览器插件---SwitchyOmega hosts代理工具---SwitchHosts[右击使用管理员权限打开] 双击burp-l ...

  8. mysql每次update数据,自动更新对应表中时间字段

    mysql 已经创建完成表的情况下, 使得其中的时间字段 在每次 uodate 数据的时候 自动更新事件, 运行如下sql ALTER TABLE tab_name MODIFY COLUMN upd ...

  9. [CF788B]Weird journey_欧拉回路

    Weird journey 题目链接:http://codeforces.com/contest/788/problem/B 数据范围:略. 题解: 我们发现就是要求,把每条无向边拆成两条无向边,其中 ...

  10. Jenkins+maven+gitlab自动化部署之基础环境部署(一)

    从一个二线城市,来到上海,刚入职,老大就给任务,为了减少开发打包部署时间,需要搭建一套自动化部署环境.接到任务后,赶紧上网查找资料,以及了解jenkins作用等等,用了一周时间,了解了个大概,由于都是 ...