// 卡片练习布局
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
// 两张卡片组件 练习布局
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '卡片练习',
home: Scaffold(
appBar: AppBar(title: Text("卡片组件练习")),
body: Container(
padding: EdgeInsets.all(0),
child: ListView(
children: <Widget>[
getCardView1(),
getCardView2(),
getCardView3(),
getCardView4()
],
),
),
),
);
}
Widget getCardView1() {
return Card(
// 根据设置裁剪内容
clipBehavior: Clip.antiAlias,
color: Colors.lightBlue,
// 设置卡片的阴影
elevation: 20.0,
margin: EdgeInsets.all(20.0),
semanticContainer: true,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
child: Column(
// 默认值 是子组件 自适应父组件
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
// 标题
leading: Icon(
Icons.account_balance_wallet,
color: Colors.white,
),
title: Text(
"主题",
style: TextStyle(color: Colors.white, fontSize: 40.0),
),
subtitle: Text(
"这里是副标题的内容这里是副标题的内容",
style: TextStyle(color: Colors.white, fontSize: 16.0),
),
contentPadding: EdgeInsets.only(
left: 20.0, top: 10.0, bottom: 10.0, right: 20.0),
// 点击按钮的内容
),
ButtonBar(
children: <Widget>[
FlatButton(
onPressed: () {
print("点击了关于");
},
child: Text(
"关于",
style: TextStyle(color: Colors.white, fontSize: 14.0),
)),
FlatButton(
onPressed: () {
print("点击了设置");
},
child: Text(
"设置",
style: TextStyle(color: Colors.white, fontSize: 14.0),
))
],
)
],
),
);
}
Widget getCardView2() {
return Container(
width: 300,
height: 100,
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0), color: Colors.black38),
child: ListTile(
// leading: Icon(Icons.account_balance_wallet,color: Colors.blueAccent,),
leading: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
"https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=30238593be119313c743f8b65d036bea/c995d143ad4bd1131090fc6356afa40f4bfb0505.jpg",
width: 50.0,
height: 50.0,
fit: BoxFit.cover,
)
],
),
),
title: Text(
"我是中间标题",
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.white54,
fontSize: 20.0,
),
),
subtitle: Text(
"我是二级副标题我是二级副标题",
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
trailing: Icon(
Icons.account_box,
color: Colors.lightBlueAccent,
),
onTap: () {
print("点击了ListTile控件");
},
),
);
}
Widget getCardView3() {
return Container(
width: 300.0,
margin: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.deepOrangeAccent,
borderRadius: BorderRadius.circular(20.0)),
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(10, 5, 10, 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Align(
child: Text(
"左边",
style: TextStyle(fontSize: 25.0, color: Colors.deepPurple),
),
),
new Align(
child: Text("右边"),
)
],
),
),
getCardView2(),
],
),
);
}
Widget getCardView4() {
return Container(
width: 100.0,
height: 200.0,
margin: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.deepPurpleAccent,
borderRadius: BorderRadius.circular(20.0),
// border: Border(bottom:BorderSide(width: 1,color: Color(0xffe5e5e5)))
),
child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 第一个Container
Container(
height: 50,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 1, color: Color(0xffe5e5e5)))),
margin: EdgeInsets.fromLTRB(10, 5, 10, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Align(
child: Text(
"左边",
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
new Align(
child: Text(
"右边",
style: TextStyle(color: Colors.white, fontSize: 25.0),
),
)
],
),
),
// 第二个Container
Container(
height: 100.0,
margin: EdgeInsets.fromLTRB(10, 5, 10, 0),
decoration: BoxDecoration(
// 设置边框的角度
border: Border(
bottom: BorderSide(width: 1, color: Color(0xffe5e5e5)))),
child: ListTile(
leading: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Card(
elevation: 2.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0)
),
child: Image.network(
"https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=30238593be119313c743f8b65d036bea/c995d143ad4bd1131090fc6356afa40f4bfb0505.jpg",
width: 50,
height: 40,
//fit: BoxFit.fill,
),
)
],
),
),
title: Text(
"我是主标题我是主标题",
style: TextStyle(color: Colors.white30, fontSize: 20.0),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
subtitle: Text(
"我是二级标我是二级标题我是二级标题我是二级标题我是二级标题我是二级标题题",
style: TextStyle(color: Colors.white30, fontSize: 15.0),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
trailing: Icon(Icons.account_balance_wallet),
),
),
Container(
height: 40,
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Align(
child: Text(
"关于",
style: TextStyle(color: Colors.white30, fontSize: 15.0),
),
),
new Align(
child: Text(
"设置",
style: TextStyle(color: Colors.white30, fontSize: 15.0),
),
),
new Align(
child: Text(
"关闭",
style: TextStyle(color: Colors.white30, fontSize: 15.0),
),
)
],
),
)
],
),
);
}
}
Flutter 卡片练习
最新推荐文章于 2024-08-01 15:30:00 发布