一、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. 前端有关请求的相关内容axios

    在请求头中常见的类型有 类型一 查看消息体 此时的请求拦截器中不需要对数据( 对象的形式 ) 进行修饰,默认会将数据修复为json的格式 类型二,当我们使用qs库对数据进行转换后(qs库的存在旨在是将 ...

  3. 3.2 删除XxxControler中各方法中的response

    3.2.1 EmpController代码 package com.hy.controller; import javax.servlet.http.HttpServletRequest; impor ...

  4. 【C学习笔记】day5-2 写代码可以在整型有序数组中查找想要的数字, 找到了返回下标,找不到返回-1.(折半查找)

    #include <stdio.h> #include <stdlib.h> int find(int s) { int n = 0; scanf_s("%d&quo ...

  5. spring-boot logback 日志

    一.引入依赖 二.配置日志文件 三.完事啦!

  6. 解决linux conda 命令行环境提示消失的方法

    之前不知道这么搞的,一不小心改了conda的默认设置,后面再登录的时候发现环境名字看不见了,用着很难受,为了解决这个问题,后面发现,应该是我改了changeps1这个设置,他默认是开着的,可以用下面的 ...

  7. NSAttributedString 多格式字符串

    NSString *aString = @"哈哈标题(必填)"; NSRange range = NSMakeRange(4, 4); //当然也可以查找NSRange range ...

  8. tomcat不生成日志文件

    1.不生成 catalina.out 将 /bin/catalina.sh 文件中的: if [ -z "$CATALINA_OUT" ] ; then CATALINA_OUT= ...

  9. .net core解决时间格式转换问题或日期取当前时间

    一.时间格式转换 1.新建一个格式化类DatetimeJsonConverter,继承自JsonConverter,然后重写里面的方法 public class DatetimeJsonConvert ...

  10. C++中map用法详解(转)

    Map是c++的一个标准容器,她提供了很好一对一的关系,在一些程序中建立一个map可以起到事半功倍的效果,总结了一些map基本简单实用的操作!1. map最基本的构造函数:   map<stri ...