AspectRatio、Card 卡片组件
一、Flutter AspectRatio 组件
AspectRatio 的作用是根据设置调整子元素 child 的宽高比。
AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widget 的高度是由宽度和比率决定的,类似于 BoxFit 中的 contain,按照固定比率去尽量占满区域。
如果在满足所有限制条件过后无法找到一个可行的尺寸,AspectRatio 最终将会去优先适应布局限制条件,而忽略所设置的比率。
属性
|
说明 |
aspectRatio
|
宽高比,最终可能不会根据这个值去布局,
具体则要看综合因素,外层是否允许按照这
种比率进行布局,这只是一个参考值
|
child
|
子组件
|
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 200,
child: AspectRatio(
aspectRatio: 2.0 / 1.0,
child: Container(
color: Colors.red,
),
),
),
);
}
}
二、Flutter Card 组件
Card 是卡片组件块,内容可以由大多数类型的 Widget 构成,Card 具有圆角和阴影,这让它看起来有立体感。
属性 | 说明 |
margin
|
外边距 |
child
|
子组件
|
Shape
|
Card 的阴影效果,默认的阴影效果为圆角的
长方形边。
|
import 'package:flutter/material.dart'; class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(children: <Widget>[
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
title: Text("张三", style: TextStyle(fontSize: 28)),
subtitle: Text("高级软件工程师")),
Divider(),
ListTile(title: Text("电话:1213214142")),
ListTile(title: Text("地址:北京市海淀区"))
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
title: Text("李四", style: TextStyle(fontSize: 28)),
subtitle: Text("高级软件工程师"),
),
Divider(),
ListTile(
title: Text("电话:1213214142"),
),
ListTile(title: Text("地址:北京市海淀区"))
],
),
),
]);
}
}
三、Flutter Card 组件实现一个图文列表布局
import 'package:flutter/material.dart'; class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: listData.map((value) {
return Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
AspectRatio(
aspectRatio: 16 / 9,
child: Image.network(value["imageUrl"], fit: BoxFit.cover)),
ListTile(
title: Text(value["title"]),
subtitle: Text(value["description"], overflow: TextOverflow.ellipsis),
leading: CircleAvatar(
backgroundImage: NetworkImage(value["imageUrl"])
),
)
],
),
);
}).toList(),
);
}
}
AspectRatio、Card 卡片组件的更多相关文章
- Flutter学习笔记(21)--TextField文本框组件和Card卡片组件
如需转载,请注明出处:Flutter学习笔记(21)--TextField文本框组件和Card卡片组件 今天来学习下TextField文本框组件和Card卡片组件. 只要是应用程序就少不了交互,基本上 ...
- Flutter AspectRatio、Card 卡片组件
Flutter AspectRatio 组件 AspectRatio 的作用是根据设置调整子元素 child 的宽高比. AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widg ...
- AspectRatio图片的宽高比、Card 卡片组件
一.AspectRatio 组件 AspectRatio 的作用是根据设置调整子元素 child 的宽高比. AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widget 的高度 ...
- 12Flutter页面布局 AspectRatio和Cart卡片组件
/* Flutter AspectRatio.Cart卡片组件: AspectRatio的作用是根据设置调整子元素child的宽高比. AspectRatio首先会在布局限制条件允许的范围内尽可能的扩 ...
- Ionic 2 中的创建一个闪视卡片组件
闪视卡片是记忆信息的重要工具,它的使用可以追溯到19世纪.我们将要创建一个很酷的短暂动画来实现它.看起来像是这个样子的: 闪视卡片示例 Ionic 2 实例开发 新增章节将为你介绍如何在Ionic 2 ...
- flutter Card卡片列表组件
一个 Material Design 卡片.拥有一个圆角和阴影 import 'package:flutter/material.dart'; import './model/post.dart'; ...
- Card 卡片
将信息聚合在卡片容器中展示. 基础用法 包含标题,内容和操作. Card 组件包括header和body部分,header部分需要有显式具名 slot 分发,同时也是可选的. <el-card ...
- 3、card 卡片
1.基本用法的使用 /* --- htm l----*/ <ion-content> <ion-card> <ion-card-header> Header < ...
- iView Card 图文组件
<Card style="width:3.3rem" :dis-hover="false" > <div style="text-a ...
- Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解
如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 最近一段时间生病了,整天往医院跑,也没状态学东西了,现在是好了不少了,也该继续学习啦!!! ...
随机推荐
- EveryCircuit_v2.15汉化破解版apk下载
安卓手机扫码下载 大小 6.44M EveryCircuit(电子电路模拟器)是一个专为电子信息技术专业的人士所打造的软件,它能够让你轻松的了解到电子电路究竟是如何进行工作的. 下载地址:https ...
- Head First Python(第2版)书籍 重视大脑的学习指南
Head First Python(第2版)PDF高清版书籍免费下载地址 提取码:08eo 内容简介 · · · · · · 你想过可以通过一本书就学会Python吗?<Head First ...
- java poi技术基础案例
基础 HSSF - 提供读写Microsoft Excel格式档案的功能.(03版本,处理xls) XSSF - 提供读写Microsoft Excel OOXML格式档案的功能.(07版本,处理xl ...
- ubuntu下安装使用jupyter
sudo snap install jupyter安装,jupyter notebook使用,到浏览器访问服务URL这种使用方式不再赘述. 如何在服务端开启jupyter服务供客户端使用有待研究. 本 ...
- js-惰性函数
1. 需求:我们现在需要写一个 foo 函数,这个函数返回首次调用时的 Date 对象,注意是首次. 使用场景:当我们每次都需要进行条件判断,其实只需要判断一次,接下来的使用方式都不会发生改变的时候, ...
- jumpserver运行源码
本文运行流程介绍来自jumpserver版本号:v2.23.2 入口文件 run_server.py run_server中通过subprocess.call,用python3运行了同级目录下jms, ...
- HTML&CSS学习总结
目录 一. HTML学习总结 1.HTML是什么 2.HTML结构 1. 创建一个HTML实例 2. HTML结构解析 3. HTML标题 4. HTML段落 5. HTML链接 6. HTML图像 ...
- MAMP PRO 使用指南 (配置nginx 重写)
https://sawlove.com/mamp-pro-use-for-wp.html 1 location / { 2 if (!-e $request_filename) { 3 rewrite ...
- 安装MinGW-C++开发环境2--软件安装
下面以MinGW安装路径为C:\Local\MinGW64为例说明安装过程: 1.解压x86_64-8.1.0-release-posix-seh-rt_v6-rev0.7z到C:\Local\Min ...
- .NET Core基础:白话管道中间件
在Asp.Net Core中,管道往往伴随着请求一起出现.客户端发起Http请求,服务端去响应这个请求,之间的过程都在管道内进行. 举一个生活中比较常见的例子:旅游景区. 我们都知道,有些景区大门离景 ...