当前位置:网站首页>Flutter FittedBox组件
Flutter FittedBox组件
2022-06-25 03:44:00 【xiangxiongfly915】
Flutter FittedBox组件
简述
当子组件的宽高比和父组件的宽高比不一样时,可以FittedBox组件操作子组件拉伸或填充父组件的空间。
基本属性
fit:子元素的填充方式。
- fill:填充父组件。
- contain:等比拉伸。
- cover:等比拉伸充满父组件,尽可能小。
- fitWidth:等比拉伸,宽度充满父组件。
- fitHeight:等比拉伸,高度充满父组件。
- none:默认子组件居中,不做处理。
- scaleDown:缩放至contain,否则和none一样。
使用



const Text("原图"),
Container(
width: 100,
height: 100,
color: Colors.red,
child: const Image(image: AssetImage("images/bird.jpg")),
),
const Text("BoxFit.fill"),
Container(
width: 100,
height: 100,
color: Colors.red,
child: const FittedBox(
fit: BoxFit.fill,
child: Image(image: AssetImage("images/bird.jpg")),
),
),
const SizedBox(height: 20),
const Text("BoxFit.contain"),
Container(
width: 100,
height: 100,
color: Colors.red,
child: const FittedBox(
fit: BoxFit.contain,
child: Image(image: AssetImage("images/bird.jpg")),
),
),
const SizedBox(height: 20),
const Text("BoxFit.cover"),
Container(
width: 100,
height: 100,
color: Colors.red,
child: const FittedBox(
fit: BoxFit.cover,
child: Image(image: AssetImage("images/bird.jpg")),
),
),
const SizedBox(height: 20),
const Text("BoxFit.fitWidth"),
Container(
width: 100,
height: 100,
color: Colors.red,
child: const FittedBox(
fit: BoxFit.fitWidth,
child: Image(image: AssetImage("images/bird.jpg")),
),
),
const SizedBox(height: 20),
const Text("BoxFit.fitHeight"),
Container(
width: 100,
height: 100,
color: Colors.red,
child: const FittedBox(
fit: BoxFit.fitHeight,
child: Image(image: AssetImage("images/bird.jpg")),
),
),
const SizedBox(height: 20),
// const Text("BoxFit.none"),
// Container(
// width: 100,
// height: 100,
// color: Colors.red,
// child: const FittedBox(
// fit: BoxFit.none,
// child: Image(image: AssetImage("images/bird.jpg")),
// ),
// ),
const SizedBox(height: 20),
const Text("BoxFit.scaleDown"),
Container(
width: 100,
height: 100,
color: Colors.red,
child: const FittedBox(
fit: BoxFit.scaleDown,
child: Image(image: AssetImage("images/bird.jpg")),
),
)
边栏推荐
- Jilin University 22 spring March "career design" assignment assessment-00072
- Deveco studio 3.0 editor configuration tips
- Preparedstatement principle of preventing SQL injection
- Tensorflow, danger! Google itself is the one who abandoned it
- 俄罗斯AIRI研究院等 | SEMA:利用深度迁移学习进行抗原B细胞构象表征预测
- @RequestBody解决获取参数为null
- Wuenda, the new course of machine learning is coming again! Free auditing, Xiaobai friendly
- Maybe it's the wrong reason
- Intel 13代酷睿首次露出真面目:68MB缓存提升明显
- PHP代码审计1—PHP.ini的那些事
猜你喜欢

《Missing Parts》NFT 作品集第 5 系列上线 The Sandbox 市场平台

数学分析_笔记_第3章:极限

opencv 红色区域在哪里?

Development of trading system (VI) -- HFT high frequency trading

How far is the memory computing integrated chip from popularization? Listen to what practitioners say | collision school x post friction intelligence

China's SkyEye found suspicious signals of extraterrestrial civilization. Musk said that the Starship began its orbital test flight in July. Netinfo office: app should not force users to agree to proc

Trading system development (IV) - trading counter system

Hello CTP (IV) - CTP transaction API

Amazon's other side in China

Does it count as staying up late to sleep at 2:00 and get up at 10:00? Unless you can do it every day
随机推荐
Create SQLite table with shell script and add SQL statement -- General
Internet Explorer died, and netizens started to build a true tombstone
Crawler grabs the idea of reading on wechat
Sun Wu plays Warcraft? There is a picture and a truth
Work assessment of pharmacotherapeutics of Jilin University in March of the 22nd spring -00064
Development of trading system (II) -- market data
论一个优秀红队人员的自我修养
Hello CTP (II) -- Introduction to CTP
Now, the ear is going into the metauniverse
web3.eth. Getpendingtransactions() returns null?
AI quantitative transaction (I) -- Introduction to quantitative transaction
Russian Airi Research Institute, etc. | SEMA: prediction of antigen B cell conformation characterization using deep transfer learning
opencv最大能打开多少图像?
Teach you how to install win11 system in winpe
冷热酸甜、想成就成?冷酸灵母公司登康口腔欲在深交所主板上市
MySQL根据表前缀批量修改、删除表
老叶的祝福
2022-06-21-flink-49 (I. SQL manual)
Cesium 加载显示热力图
[rust submission] review impl trail and dyn trail in rust