当前位置: 首页 > article >正文

Flutter第五弹:Flutter布局

目标:

1)Flutter常用的布局容器小组件有哪些?

2)Flutter列表组件的小例子。

一、Flutter常用的容器组件

1.1 Container组件

Container 部件有许多可用的属性,以下是一些常用的属性:

属性说明
alignment设置子部件在 Container 内的对齐方式
padding设置 Container 的内边距
margin设置 Container 的外边距
color设置 Container 的背景颜色
width设置 Container 的宽度
height设置 Container 的高度
decoration设置 Container 的装饰,如边框、圆角、阴影等

通过灵活使用这些属性,你可以轻松地定制和调整 Container 的外观和布局。

1. alignment对齐属性

通过 alignment 属性,你可以指定 Container 内部子部件的对齐方式。

对齐方式说明
Alignment.topLeft将子部件对齐到 Container 的左上角
Alignment.center将子部件居中对齐到 Container
Alignment.bottomRight将子部件对齐到 Container 的右下角

2. Container 的边距和填充

通过 padding 属性,你可以设置 Container 的内边距,从而控制子部件与 Container 之间的间距。而 margin 属性则用于设置 Container 的外边距,控制 Container 与其它部件之间的间距。与View的边距类似。这些属性可以接受 EdgeInsets 类的实例,方便你灵活地调整边距和填充。

3. 装饰和样式

Container 的 decoration 属性可以让你为 Container 添加装饰,如边框、圆角和阴影等效果。你可以使用 BoxDecoration 类的实例来定义 Container 的装饰效果。

color定义容器的背景色。

4. 大小和调整

width定义宽度,height定义高度。


http://www.kler.cn/a/272438.html

相关文章:

  • LabVIEW电源纹波补偿
  • Java开发提速秘籍:巧用Apache Commons Lang工具库
  • 以租赁合同的例子讲清楚 开源协议原理和区别
  • Reactor 模式在 Edis、Nginx 和 Netty 中的应用与高性能网络模式解析
  • Rust Actix Web 项目实战教程 mysql redis swagger:构建用户管理系统
  • opencv3.4 ffmpeg3.4 arm-linux 交叉编译
  • 实验11-2-5 链表拼接(PTA)
  • 「Linux系列」Linux 文件与目录管理
  • web ui自动化测试--元素操作
  • rust 文件引用,父目录下的同级目录之间的引用
  • nginx介绍
  • Flutter 多语言自动化本地化生成器
  • 深度学习——微积分基础
  • Vue2(四):Vue监测数据的原理
  • Qt/C++监控推流设备推流/延迟极低/实时性极高/rtsp/rtmp推流/hls/flv/webrtc拉流/调整分辨率降低带宽
  • 【前端Vue】Vue3+Pinia小兔鲜电商项目第1篇:认识Vue3,1. Vue3组合式API体验【附代码文档】
  • 十四、GPT
  • 【GPT-SOVITS-05】SOVITS 模块-残差量化解析
  • 51单片机—DS18B20温度传感器
  • Linux TCP参数——tcp_abort_on_overflow
  • 完美解决 RabbitMQ可视化界面Overview不显示折线图和队列不显示Messages
  • html5cssjs代码 018颜色表
  • Go语言中的面向对象编程(OOP)
  • SpringCloudGateway之统一鉴权篇
  • BlenderGIS 快捷键E 报错问题 Report: Error
  • Spring MVC文件下载配置