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. Node.js使用child_process调用系统命令示例

    首先我们在D盘根目录下新建一个test.bat文件,他的内容如下: echo %date%%time% >> D:/test.txt 他的目的很简单,每次调用这个bat文件,都会在D:/t ...

  2. 【Leetcode_easy】705. Design HashSet

    problem 705. Design HashSet 题意: solution1: class MyHashSet { public: /** Initialize your data struct ...

  3. 【ARTS】01_33_左耳听风-201900624~201900630

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  4. Flutter FutureBuilder异步请求列表示例

    Flutter的FutureBuilder列表示例 import 'package:flutter/material.dart'; import '../service/service_method. ...

  5. 京东宙斯平台使用方法(accesstoken,appkey,appsecret参数和SDK的获取)

    1.注册成为开发者 链接:https://dev.jd.com/ 2.创建应用 3.获取appsrecet和appkey,SDK(获取) 新建应用之后在左边应用证书栏位可以查看到appkey,apps ...

  6. python线程事件Event(30)

    在python项目开发中,线程thread使用是比较常见的,在前面的文章中我们介绍了 python线程的创建 以及 线程互斥锁 ,今天还要额外介绍一个与线程相关的内容 – 事件Event. 一.pyt ...

  7. FutureWarning: Passing (type, 1) or '1type' as a synonym of type is deprecated;

    /Users/jerryqi/PycharmProjects/DeepLearning/venv/lib/python3.7/site-packages/tensorflow/python/frame ...

  8. Chrome 浏览器光标定位到地址栏

    Windows: Ctrl + L 或 Alt + D Mac: Command + L Linux: Ctrl + L

  9. centos 防火墙相关命令

    防火墙关闭: systemctl stop firewalld systemctl disable firewalld 重启防火墙: systemctl enable firewalld system ...

  10. [转帖]Nginx服务器的六种负载均衡策略详解

    Nginx服务器的六种负载均衡策略详解 咔咔侃技术 2019-09-11 17:40:12 一.关于Nginx的负载均衡 在服务器集群中,Nginx起到一个代理服务器的角色(即反向代理),为了避免单独 ...