一、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 卡片组件的更多相关文章

  1. Flutter学习笔记(21)--TextField文本框组件和Card卡片组件

    如需转载,请注明出处:Flutter学习笔记(21)--TextField文本框组件和Card卡片组件 今天来学习下TextField文本框组件和Card卡片组件. 只要是应用程序就少不了交互,基本上 ...

  2. Flutter AspectRatio、Card 卡片组件

    Flutter AspectRatio 组件 AspectRatio 的作用是根据设置调整子元素 child 的宽高比. AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widg ...

  3. AspectRatio图片的宽高比、Card 卡片组件

    一.AspectRatio 组件 AspectRatio 的作用是根据设置调整子元素 child 的宽高比. AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widget 的高度 ...

  4. 12Flutter页面布局 AspectRatio和Cart卡片组件

    /* Flutter AspectRatio.Cart卡片组件: AspectRatio的作用是根据设置调整子元素child的宽高比. AspectRatio首先会在布局限制条件允许的范围内尽可能的扩 ...

  5. Ionic 2 中的创建一个闪视卡片组件

    闪视卡片是记忆信息的重要工具,它的使用可以追溯到19世纪.我们将要创建一个很酷的短暂动画来实现它.看起来像是这个样子的: 闪视卡片示例 Ionic 2 实例开发 新增章节将为你介绍如何在Ionic 2 ...

  6. flutter Card卡片列表组件

    一个 Material Design 卡片.拥有一个圆角和阴影 import 'package:flutter/material.dart'; import './model/post.dart'; ...

  7. Card 卡片

    将信息聚合在卡片容器中展示. 基础用法 包含标题,内容和操作. Card 组件包括header和body部分,header部分需要有显式具名 slot 分发,同时也是可选的. <el-card ...

  8. 3、card 卡片

    1.基本用法的使用 /* --- htm l----*/ <ion-content> <ion-card> <ion-card-header> Header < ...

  9. iView Card 图文组件

    <Card style="width:3.3rem" :dis-hover="false" > <div style="text-a ...

  10. Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 最近一段时间生病了,整天往医院跑,也没状态学东西了,现在是好了不少了,也该继续学习啦!!! ...

随机推荐

  1. EveryCircuit_v2.15汉化破解版apk下载

    安卓手机扫码下载  大小 6.44M EveryCircuit(电子电路模拟器)是一个专为电子信息技术专业的人士所打造的软件,它能够让你轻松的了解到电子电路究竟是如何进行工作的. 下载地址:https ...

  2. Head First Python(第2版)书籍 重视大脑的学习指南

    Head First Python(第2版)PDF高清版书籍免费下载地址 提取码:08eo 内容简介  · · · · · · 你想过可以通过一本书就学会Python吗?<Head First ...

  3. java poi技术基础案例

    基础 HSSF - 提供读写Microsoft Excel格式档案的功能.(03版本,处理xls) XSSF - 提供读写Microsoft Excel OOXML格式档案的功能.(07版本,处理xl ...

  4. ubuntu下安装使用jupyter

    sudo snap install jupyter安装,jupyter notebook使用,到浏览器访问服务URL这种使用方式不再赘述. 如何在服务端开启jupyter服务供客户端使用有待研究. 本 ...

  5. js-惰性函数

    1. 需求:我们现在需要写一个 foo 函数,这个函数返回首次调用时的 Date 对象,注意是首次. 使用场景:当我们每次都需要进行条件判断,其实只需要判断一次,接下来的使用方式都不会发生改变的时候, ...

  6. jumpserver运行源码

    本文运行流程介绍来自jumpserver版本号:v2.23.2 入口文件 run_server.py run_server中通过subprocess.call,用python3运行了同级目录下jms, ...

  7. HTML&CSS学习总结

    目录 一. HTML学习总结 1.HTML是什么 2.HTML结构 1. 创建一个HTML实例 2. HTML结构解析 3. HTML标题 4. HTML段落 5. HTML链接 6. HTML图像 ...

  8. MAMP PRO 使用指南 (配置nginx 重写)

    https://sawlove.com/mamp-pro-use-for-wp.html 1 location / { 2 if (!-e $request_filename) { 3 rewrite ...

  9. 安装MinGW-C++开发环境2--软件安装

    下面以MinGW安装路径为C:\Local\MinGW64为例说明安装过程: 1.解压x86_64-8.1.0-release-posix-seh-rt_v6-rev0.7z到C:\Local\Min ...

  10. .NET Core基础:白话管道中间件

    在Asp.Net Core中,管道往往伴随着请求一起出现.客户端发起Http请求,服务端去响应这个请求,之间的过程都在管道内进行. 举一个生活中比较常见的例子:旅游景区. 我们都知道,有些景区大门离景 ...