1. 基本介紹
Card 是 flutter 提供的一個(gè)卡片組件助泽，提供了圓角和陰影顾瞻，實(shí)際用途其實(shí)和 Container 差不多膊存。Flutter 組件之 Container 詳解
2. 示例代碼
代碼下載地址判哥。如果對(duì)你有幫助的話記得給個(gè)關(guān)注，代碼會(huì)根據(jù)我的 Flutter 專題不斷更新谤绳。
3. Card 屬性介紹
| Card 屬性 | 介紹 |
|---|---|
| color | 卡片背景色 |
| shadowColor | 陰影顏色 |
| elevation | 陰影高度 |
| shape | 形狀 BorderShape |
| borderOnForeground | 是否在 child 前繪制 border良风，默認(rèn)為 true |
| margin | 外邊距 |
| clipBehavior | 裁剪方式 |
| child | 子控件 |
| semanticContainer | 是否使用新的語(yǔ)義節(jié)點(diǎn)，默認(rèn)為 true闷供。語(yǔ)義這個(gè)東西用途沒(méi)有那么大烟央，不用太過(guò)在意，在看頁(yè)面層級(jí)的Debug 模式下組件展示方式會(huì)按照設(shè)置的語(yǔ)義標(biāo)簽展示歪脏。 |
4. Card 詳解
Card 就是個(gè)容器疑俭，用途和 Container 很像，這里就不多贅述了婿失，直接上代碼钞艇。
import 'package:flutter/material.dart';
class FMCardVC extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text("Card"),),
body: _listView(),
);
}
ListView _listView(){
return ListView(
padding: EdgeInsets.all(30),
children: [
_normalCard(),
Padding(padding: EdgeInsets.all(30)),
_shapeCard()
],
);
}
Card _normalCard(){
return Card(
color: Colors.red, // 背景色
shadowColor: Colors.yellow, // 陰影顏色
elevation: 20, // 陰影高度
borderOnForeground: false, // 是否在 child 前繪制 border，默認(rèn)為 true
margin: EdgeInsets.fromLTRB(0, 50, 0, 30), // 外邊距
child: Container(
width: 100,
height: 100,
alignment: Alignment.center,
child: Text("Noraml Card", style: TextStyle(color: Colors.white),),
),
);
}
Card _shapeCard(){
return Card(
color: Colors.red, // 背景色
shadowColor: Colors.yellow, // 陰影顏色
elevation: 20, // 陰影高度
borderOnForeground: false, // 是否在 child 前繪制 border豪硅，默認(rèn)為 true
margin: EdgeInsets.fromLTRB(0, 50, 0, 30), // 外邊距
// 邊框
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40),
side: BorderSide(
color: Colors.yellow,
width: 3,
),
),
child: Container(
width: 100,
height: 100,
alignment: Alignment.center,
child: Text("Shape Card", style: TextStyle(color: Colors.white),),
),
);
}
}
Card.png
5. 技術(shù)小結(jié)
Card 其實(shí)就是 Container 帶了一個(gè)默認(rèn)的圓角和陰影哩照，沒(méi)有太多屬性。
