Flutter 卡片练习
发布日期：2021-10-10 05:31:03
浏览次数：7
分类：技术文章
本文共 6213 字，大约阅读时间需要 20 分钟。
// 卡片练习布局import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatefulWidget {
@override _MyAppState createState() => _MyAppState();}// 两张卡片组件 练习布局class _MyAppState extends State
{
@override Widget build(BuildContext context) {
return MaterialApp(
title: '卡片练习',
home: Scaffold(
appBar: AppBar(title: Text("卡片组件练习")),
body: Container(
padding: EdgeInsets.all(0),
child: ListView(
children:
[
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:
[
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:
[
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:
[
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:
[
Container(
margin: EdgeInsets.fromLTRB(10, 5, 10, 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:
[
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:
[
// 第一个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:
[
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:
[
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:
[
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),
),
)
],
),
)
],
),
); }}
转载地址：https://blog.csdn.net/qq_22049619/article/details/104210986 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
逛到本站，mark一下
[***.191.171.36]2022年12月08日 07时56分07秒
关于作者
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！
最新文章
Java基础测试问题
2019-04-24 12:55:42
查找某个定义长度为10的整型数组，循环输入10个整数，然后输入一个整数，查找此整数。找到输出下标，没找到给出提示
2019-04-24 12:55:38
流程控制
2019-04-24 12:55:37
JAVA基础语法
2019-04-24 12:55:37
JAVA基础特征
2019-04-24 12:55:36
Spring aop源码浅析（一）
2019-04-24 12:55:36
浅析SOA、分布式和微服务
2019-04-24 12:55:35
知识小指南：前后端分离
2019-04-24 12:55:35
JDK16安装教程，尝鲜开始咯
2019-04-24 12:55:34
Java参数传递机制：by value Or by reference?
2019-04-24 12:55:34
Top k算法模式，你值得拥有！！！
2019-04-24 12:55:30
2018年蓝桥杯软件类省赛（软件类）C/C++大学A组第6题 ——“航班时间”
2019-04-24 12:55:29
来，一起创建你的第一个区块链吧！！
2019-04-24 12:55:29
你好啊，Spring ！！！
2019-04-24 12:55:28
好家伙，我又被Tomcat干掉了！！！
2019-04-24 12:55:27
Springboot注解，你知道这些就够了！！！
2019-04-24 12:55:27
第九章：装饰模式（Graphic Design patterns）
2019-04-24 12:55:26
SSO，这篇文章就够了！！
2019-04-24 12:55:26
10分钟看懂动态代理设计模式
2019-04-24 12:55:25
LeetCode | 290. 单词规律
2019-04-24 12:55:24
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 62163186 位访客
访问时间: 2023-01-27 18:26:24
访问IP: 3.235.195.196
Copyright © 2020 - 2022 blog.css8.cn 京ICP备2021015314号-1
手机版
