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 ...
- 前端有关请求的相关内容axios
在请求头中常见的类型有 类型一 查看消息体 此时的请求拦截器中不需要对数据( 对象的形式 ) 进行修饰,默认会将数据修复为json的格式 类型二,当我们使用qs库对数据进行转换后(qs库的存在旨在是将 ...
- 3.2 删除XxxControler中各方法中的response
3.2.1 EmpController代码 package com.hy.controller; import javax.servlet.http.HttpServletRequest; impor ...
- 【C学习笔记】day5-2 写代码可以在整型有序数组中查找想要的数字, 找到了返回下标,找不到返回-1.(折半查找)
#include <stdio.h> #include <stdlib.h> int find(int s) { int n = 0; scanf_s("%d&quo ...
- spring-boot logback 日志
一.引入依赖 二.配置日志文件 三.完事啦!
- 解决linux conda 命令行环境提示消失的方法
之前不知道这么搞的,一不小心改了conda的默认设置,后面再登录的时候发现环境名字看不见了,用着很难受,为了解决这个问题,后面发现,应该是我改了changeps1这个设置,他默认是开着的,可以用下面的 ...
- NSAttributedString 多格式字符串
NSString *aString = @"哈哈标题(必填)"; NSRange range = NSMakeRange(4, 4); //当然也可以查找NSRange range ...
- tomcat不生成日志文件
1.不生成 catalina.out 将 /bin/catalina.sh 文件中的: if [ -z "$CATALINA_OUT" ] ; then CATALINA_OUT= ...
- .net core解决时间格式转换问题或日期取当前时间
一.时间格式转换 1.新建一个格式化类DatetimeJsonConverter,继承自JsonConverter,然后重写里面的方法 public class DatetimeJsonConvert ...
- C++中map用法详解(转)
Map是c++的一个标准容器,她提供了很好一对一的关系,在一些程序中建立一个map可以起到事半功倍的效果,总结了一些map基本简单实用的操作!1. map最基本的构造函数: map<stri ...