【flutter】Expanded组件
Expanded组件是flutter中使用率很高的一个组件,它可以动态调整child组件沿主轴的尺寸,比如填充剩余空间,比如设置尺寸比例。它常常和Row或Column组合起来使用。
构造函数
const Expanded(
{Key key,
int flex: 1,
@required Widget child}
)
它除了child之外,有一个flex属性比较常用。flex表示弹性系数,默认是1。
下面结合Row来实验Expanded的用法。
示例一:当Row中的组件不使用Expanded的时候
import 'package:flutter/material.dart';void main() => runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: Text("Row demo")),body: Container(color: Colors.green,child: Row(children: <Widget>[Image.asset("graphyics/face.jpg",width: 100,height: 100,fit: BoxFit.cover,),Image.asset("graphyics/face.jpg",width: 100,height: 100,fit: BoxFit.cover,),Image.asset("graphyics/face.jpg",width: 100,height: 100,fit: BoxFit.cover,)])))));
运行效果:
如果不明白为什么会这样,请参阅我的另一篇文章 flutter Row和Column组件
示例二:将Row中的第一个组件使用Expanded包裹
import 'package:flutter/material.dart';void main() => runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: Text("Row demo")),body: Container(color: Colors.green,child: Row(children: <Widget>[Expanded(child: Image.asset("graphyics/face.jpg",width: 100,height: 100,fit: BoxFit.cover,)),Image.asset("graphyics/face.jpg",width: 100,height: 100,fit: BoxFit.cover,),Image.asset("graphyics/face.jpg",width: 100,height: 100,fit: BoxFit.cover,)])))));
运行效果:
可以看到,将第一个组件使用Expanded包裹后,第一个组件设置的width会无效,并且它在主轴方向变大,直到填充剩余空间,但在纵轴方向上并没有变大,依然维持自身的height。
第一个图像因为设置了 fit: BoxFit.cover,所以会被裁剪。BoxFit.cover表示图像填充组件,多余的进行裁剪处理。
示例三:使用Expanded实现Row中所有组件平均分配剩余空间
import 'package:flutter/material.dart';void main() => runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: Text("Row demo")),body: Container(color: Colors.green,child: Row(children: <Widget>[Expanded(child: Image.asset("graphyics/face.jpg",width: 100,height: 100,fit: BoxFit.cover,)),Expanded(child: Image.asset("graphyics/face.jpg",width: 100,height: 100,fit: BoxFit.cover,)),Expanded(child: Image.asset("graphyics/face.jpg",width: 100,height: 100,fit: BoxFit.cover,))])))));
运行效果:
有人会问,这样跟将Row设置mainAxisAlignment:MainAxisAlignment.spaceEvenly
有什么区别呢?MainAxisAlignment.spaceEvenly 并不会改变子组件的尺寸,大家可以参阅我的另一篇文章
flutter Row和Column组件 示例六
示例四:将一个组件设置成其它组件的两倍大小
import 'package:flutter/material.dart';void main() => runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: Text("Row demo")),body: Container(color: Colors.red,child: Row(children: <Widget>[Expanded(child: Image.asset("graphyics/face.jpg",width: 100,height: 100,fit: BoxFit.cover,)),Expanded(flex: 2,child: Image.asset("graphyics/face.jpg",width: 100,height: 100,fit: BoxFit.cover,)),Expanded(child: Image.asset("graphyics/face.jpg",width: 100,height: 100,fit: BoxFit.cover,))])))));
运行效果:
由于其它组件弹性系数默认是1,中间组件设置了弹性系数2,因此宽度是其它组件的两倍。
Expanded组件的属性比较少,用途广泛,用法也很简单。关于它的介绍就到这里,不知道你有没有学会?学会了点个赞呗~
【flutter】Expanded组件相关推荐
- 【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )
文章目录 一.Wrap 组件 二.Expanded 组件 三.完整代码示例 四.相关资源 一.Wrap 组件 Wrap 组件 : 该组件是可换行的水平线性布局组件 , 与 Row 组件间类似 , 但是 ...
- Flutter中Padding、Row 、Column 、Expanded 组件详解
1. Paddiing 组件 在 html 中常见的布局标签都可以使用 padding 属性,但是 Flutter 中很多 Widget 是没有 padding 属 性,这个时候我们可以用 Paddi ...
- Flutter 笔记 | Flutter 布局组件
布局类组件都会包含一个或多个子组件,布局类组件都是直接或间接继承SingleChildRenderObjectWidget 和MultiChildRenderObjectWidget的Widget,它 ...
- 一份超级详细的Flutter基础组件练习示例,请查收!
学习B站技术胖的flutter基础课程整理的示例,为了平时方便查阅,同时希望能和大家一同进步~ Flutter基础组件 Hello world import 'package:flutter/mate ...
- 一个优秀的可定制化Flutter相册组件,看这一篇就够了
背景 在做图片.视频相关功能的时候,相册是一个绕不开的话题,因为大家基本都有从相册获取图片或者视频的需求.最直接的方式是调用系统相册接口,基本功能是满足的,一些高级功能就不行了,例如自定义UI.多选图 ...
- Flutter文本组件Text
Flutter 文本组件Text 在android中,一个页面,一般是用 Activity 或者是一个Fragement 来加载显示出来的,而其中的 一个View 或者 一个布局文件(layout.x ...
- Flutter 自定义组件实战之Cupertino(iOS)风格的复选框
继上一篇Flutter自定义组件的视频短课(视频地址: https://www.bilibili.com/video/BV1ap4y1U7UB/ )后,我们继续来聊自定义组件.视频中我为大家详解了Cu ...
- Flutter 自定义组件实战
Flutter 自定义组件实战
- Flutter Container 组件
目录 参数详解 代码示例 效果图 完整代码 Container 官网简介:一个便利的小部件,结合了常见的绘画,定位和大小调整小部件. 其实就是一个容器组件,既然是容器,那么,就一定可以装很多东西,而C ...
最新文章
- iReport 4.1 报表、子报表、主从报表、合计、实例解析
- 抗炎饮食与混合坚果粉
- 关于 Node.js 应用里使用 winston 进行日志记录的最佳实践
- 区块链技术怎么构架落地应用?
- WSS 3.0 和 sharepoint 2007 中文SDK
- 拖拽批量上传图片如何保证 顺序_新手指南︱shopee店铺上架产品该如何操作?...
- 高通msm8953 Android7.1支持Audio设备列表(十二)
- 《Google Go: A Primer》学习笔记
- pkg-php,node打包工具Pkg(详细教程)
- 用Java写PTA 7-11 设计一个能处理异常的Loan类
- 渗透学习日记day20
- 闭关修炼(二十二)session和cookie原理
- 如何用python写一个答题程序_如何使用Python写一个百万英雄的答题辅助程序 (0) 简介...
- 解决If you see valid patterns in the file then the issue is probably caused by a circular import
- QT qrand()随机函数不随机?
- 【Jira数据自动化】Jira接口请求(一)
- 汉字转换成NCR编码的字符
- 百度文档破解下载方法
- 2013,GECCO,Running programs backwards: instruction inversion for effective search in semantic spaces
- MySql8.0.22数据库安装教程
热门文章
- Spring MVC 笔记
- 【动力节点】springmvc框架入门教程-从入门到精通
- org\wltea\analyzer\2012_u6\analyzer-2012_u6.jar时出错; error in opening zip file
- Codeup墓地-2337
- 好男人为什么找不到女友
- html中rgba灰色怎么写,rgba中的a是什么意思 CSS之RGBA颜色指南
- What!吴恩达要参加美国大选?带你一起用人脸识别技术看看真的是吴恩达吗?
- 真香预警!B站上的美食文化:治愈您的心和胃!
- 易语言调用API(FindWindowExA)获取窗口取句柄
- JSP基础知识总结二