AspectRatio、Card 卡片组件
2024-10-21 09:13:10
一、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(),
);
}
}
最新文章
- poj 2251 Dungeon Master
- 【转】Key/Value之王Memcached初探：一、掀起Memcached的盖头来
- nyoj202_红黑树_中序遍历
- 关于分布式事务、两阶段提交、一阶段提交、Best Efforts 1PC模式和事务补偿机制的研究 转载
- Linux/Unix中的#!和!#
- Working with Data » Getting started with ASP.NET Core and Entity Framework Core using Visual Studio » 增、查、改、删操作
- 正则表达式 之 C#后台应用
- oracle 12g sqlplus安装
- BZOJ 1269: [AHOI2006]文本编辑器editor( splay )
- HTML&JS笔记(1)
- Akka（27）： Stream：Use case-Connecting Slick-dbStream & Scalaz-stream-fs2
- head first python菜鸟学习笔记（第四章）
- AHB/APB简介
- 使用原生 JS 复制文本兼容移动端 iOS & android
- 全局css控制<td>标签属性
- Spring Boot 线程池
- Dynamic CRM插件调试与单元测试
- 解决git: 'subtree' is not a git command. See 'git --help'.
- html-prepend
- 第一篇:打造专属开发工具Eclipse篇