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. LeetCode_121. Best Time to Buy and Sell Stock

    121. Best Time to Buy and Sell Stock Easy Say you have an array for which the ith element is the pri ...

  2. Java API操作Hadoop可能会遇到的问题以及解决办法

    https://www.zifangsky.cn/1292.html Could not locate Hadoop executable: xxx\bin\winutils.exe   1 2 3 ...

  3. jQuery调用WCF

    jQuery要调用WCF,首先要创建service.svc服务文件,这里边需要注意: [ServiceContract(Namespace = "")] [AspNetCompat ...

  4. Python3之类和实例访问限制

    在Class内部,可以有属性和方法,而外部代码可以通过直接调用实例变量的方法来操作数据,这样,就隐藏了内部的复杂逻辑. 但是,从前面的Student类定义来看,外部代码还是可以自由地修改一个实例的na ...

  5. webpack官网demo起步中遇到的问题

    在webpack官网demo一开始搭建中 

  6. SpringBoot(三)手写starter pom自动配置

    思想:主要是EnableAutoConfiguration在启动的时候会扫描spring.factories并加载 1在resource下面新建META-INF/spring.factories 2在 ...

  7. selenium之定位详篇

    一.Web定位方法(find_elements返回元素list) 1.id: find_element_by_id()  # find_element_by_id("id") fi ...

  8. Windows用Eclipse来开发hadoop的WordCount的helloworld

    [学习笔记] 2.Win7用Eclipse来开发hadoop的WordCount的helloworld网上下载hadoop-eclipse-plugin-2.7.4.jar,将该jar包拷贝到Ecli ...

  9. sql复合索引使用和注意事项

    1.定义: 单一索引: 单一索引是指索引列为一列的情况,即新建索引的语句只实施在一列上; 复合索引: 复合索引也叫组合索引: 用户可以在多个列上建立索引,这种索引叫做复合索引(组合索引). 复合索引在 ...

  10. vscode配置phpxdebug

    打debug还是很有必要的,以前嫌麻烦,现在觉得,通过debug可以看自己写的代码的执行的逻辑,更容易理清别人代码的逻辑. 步骤: 下载phpdebug插件 查看自己的php版本信息,下载对应的deb ...