Flutter 学习随笔
Card
Card 是卡片组件块,内容可以由大多数类型的 Widget 构成,Card 具有圆角和阴影,这让它看起来有立体感。
属性预览:
const Card({
Key key,
this.color,//颜色
this.elevation,//设置阴影
this.shape,//设置圆角
this.borderOnForeground = true,
this.margin,//边距
this.clipBehavior,//裁剪
this.child,
this.semanticContainer = true,
}) : assert(elevation == null || elevation >= 0.0),
assert(borderOnForeground != null),
super(key: key);
clipBehavior属性值 | 说明 |
---|---|
clipBehavior: Clip.none, | 不裁剪 |
clipBehavior: Clip.hardEdge, | 裁剪但不应用抗锯齿,裁剪速度比none模式慢一点,但比其他方式快。 |
clipBehavior: Clip.antiAlias, | 裁剪而且抗锯齿,以实现更平滑的外观。裁剪速度比antiAliasWithSaveLayer快,比hardEdge慢。 |
clipBehavior: Clip.antiAliasWithSaveLayer, | 带有抗锯齿的剪辑,并在剪辑之后立即保存saveLayer。 |
代码示例:
var card = new SizedBox(
child: new Card(
elevation: 15.0,//设置阴影,即card在z轴的距离,数字越大阴影越重
color: Colors.grey[100],//设置颜色,数字为颜色饱和度
//设置margin边距
//margin: const EdgeInsets.all(20),//可.all进行全部设置
margin: const EdgeInsets.only(top: 8,left: 10,right: 10),//可.only进行单独设置
//设定Card的圆角
shape: RoundedRectangleBorder(
// borderRadius: BorderRadius.all(Radius.circular(20.0)), //可.all进行全部设置
borderRadius: BorderRadius.only( //可.only进行单独设置
topLeft: Radius.circular(20.0),
topRight: Radius.zero,
bottomLeft: Radius.zero,
bottomRight: Radius.circular(20.0)),
),
//设置裁剪
clipBehavior: Clip.none,//不裁剪
child: new Column(
children: [
new Container(
decoration: BoxDecoration (
color: Colors.grey[200]
),
child: new ListTile(
title: new Text('评审工作',
style: new TextStyle(fontWeight: FontWeight.w500)),
),
),
new Container(
constraints: new BoxConstraints.expand(
height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 100,