Flutter组件之Card控件

Card 属性介绍

Card 就是个容器&＃xff0c;用途和 Container 很像&＃xff0c;这里就不多赘述了&＃xff0c;直接上代码。


import &＃39;package:flutter/material.dart&＃39;;void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return MaterialApp(home: FMCardVC());}
}class FMCardVC extends StatelessWidget{&＃64;overrideWidget build(BuildContext context) {// TODO: implement buildreturn 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&＃xff0c;默认为 truemargin: 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&＃xff0c;默认为 truemargin: 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),),),);}
}