【Flutter】基础组件【02】Container
1. 写在前面
在上篇文章中介绍了【Flutter】基础组件中的Text，今天将继续学习【Flutter】基础组件Container。
- 【基础语法合集】
【Flutter】Dart中的var、final 和 const基本使用
【Flutter】Dart数据类型之num
【Flutter】Dart数据类型之String
【Flutter】Dart的数据类型list&Map(数组和字典)
【Flutter】Dart的方法与箭头函数
【Flutter】Dart的方法中的可选参数、方法作为参数传递
【Flutter】Dart中的匿名函数、闭包
【Flutter】Dart中的类和对象
【Flutter】Dart中的构造函数
【Flutter】Dart的工厂构造方法&单例对象&初始化列表
【Flutter】Dart的类方法和对象操作符
【Flutter】Dart中的继承
【Flutter】Dart中的抽象类和接口
【Flutter】Dart中的Mixins混入你知道是什么吗？
- 【基础组件合集】
【Flutter】基础组件【01】Text
2. 什么是Container？
Container是一个容器类，一个拥有绘制、定位、调整大小的 widget，在Flutter中万物皆widget，widget是小部件的意思。
2.1 Container组成
Container的最里层的是child元素，child元素首先会被padding包着，然后添加额外的constraints限制，最后添加margin。
Container自身尺寸的调节分两种情况：
Container在没有子节点（children）的时候，会试图去变得足够大。除非constraints是unbounded限制，在这种情况下，Container会试图去变得足够小。
带子节点的Container，会根据子节点尺寸调节自身尺寸，但是Container构造器中如果包含了width、height以及constraints，则会按照构造器中的参数来进行尺寸的调节。
2.2 Container布局
Container会遵循如下顺序去尝试布局：
对齐（
alignment），调节自身尺寸适合子节点，采用width、height以及constraints布局，扩展自身去适应父节点，调节自身到足够小。进一步说：如果没有子节点、没有设置
width、height以及constraints，并且父节点没有设置unbounded的限制，Container会将自身调整到足够小。如果没有子节点、对齐方式（
alignment），但是提供了width、height或者constraints，那么Container会根据自身以及父节点的限制，将自身调节到足够小。
2.3 Container属性
- key：
Container唯一标识符，用于查找更新。 - alignment：控制
child的对齐方式，如果container或者container父节点尺寸大于child的尺寸，这个属性设置会起作用，有很多种对齐方式。 - padding：
decoration内部的空白区域，如果有child的话，child位于padding内部。padding与margin的不同之处在于，padding是包含在content内，而margin则是外部边界，设置点击事件的话，padding区域会响应，而margin区域不会响应。 - color：用来设置
container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果。
2.4 举例
void main(){runApp(Container(margin: EdgeInsets.all(10),color: Colors.red,alignment: Alignment(0,0),child: Container(margin: EdgeInsets.all(10),color: Colors.brown,width: 250,height: 250,child: Text('Hello World',textDirection: TextDirection.ltr,style: TextStyle(fontSize: 26,color: Colors.blue,backgroundColor: Colors.white),),),),);}
- 代码运行效果
更多内容去这里https://api.flutter.dev/flutter/widgets/Container-class.html
3. 写在后面
关注我，更多内容持续输出
- CSDN
- 掘金
- 简书
【Flutter】基础组件【02】Container相关推荐
- Flutter 基础组件之 Container
官方简介中,说 Container 组件是一个方便绘制.定位和调整子组件大小的组件. 首先 Container 会在 child 子组件周围填充 padding(包括 decoration 中存在的 ...
- 一份超级详细的Flutter基础组件练习示例，请查收！
学习B站技术胖的flutter基础课程整理的示例,为了平时方便查阅,同时希望能和大家一同进步~ Flutter基础组件 Hello world import 'package:flutter/mate ...
- Flutter 基础组件之 Text
终于安装好了 Flutter 的环境,既然入了坑,就一点一点学吧,Flutter 可以说一切皆组件吧,所以要熟练掌握各个基础组件的 API,然后才能在面对复杂需求的时候才能得心应手的将各个组件组合起来 ...
- 【Flutter -- 基础组件】Flutter 导航栏
文章目录 1. TabBar 1.1 代码 1.2 效果图 2. BottomNavigationBar 2.1 构建底部标签 2.2 创建导航栏 2.3 效果图 1. TabBar Flutter ...
- 抖音小程序Tiktok开发教程之 基础组件 02 rich-text 富文本组件
什么是rich-text组件? rich-text富文本组可以支持显示html和css等复杂标签效果 rich-text 富文本组件运行效果 text组件如何使用呢? 首先,在ttml界面中添加下面代 ...
- Flutter 基础目录结构介绍、入口自定义widget、等相关组件使用
提示:此文章为前端学习flutter过程,如有歧义期望各位大大的宝贵意见 学习Dart 基础知识 移步这里 安装flutter环境相关 移步这里 flutter基础组件使用相关 移步这里 文章目录 一 ...
- Flutter基础布局组件及实现
https://www.cnblogs.com/lxlx1798/p/11084904.html 一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Paddi ...
- Flutter(四)——基础组件
本文目录 前言 基础组件 Text 常用属性使用 Icon Image Button FlutterLogo 前言 你如果做过Android开发,那一定熟悉里面各种官方提供的布局,比如LinearLa ...
- 微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
- 围观窗体与组件02 - 零基础入门学习Delphi24
围观窗体与组件02 让编程改变世界 Change the world by program 围观文本型组件 Label.StaticText 和 TabControl. PageControl Lab ...
最新文章
- 卷积神经网络新手指南之二
- ‘numpy.float64‘ object cannot be interpreted as an integer
- 0330 第九次课：软件包安装及卸载
- python2与python3代码互相转化时注意事项
- Nginx出现403 forbidden
- xpath 简单用法小记
- 校验码(海明校验，CRC冗余校验，奇偶校验)
- bootstratp图标的使用
- 使用order by排序判断返回结果的列数，order by排序判断字段数原理详解
- 智能升级新阶段，新云原生企业如何加速出圈？
- 利用MEGA做序列比对
- ISG2014 Writeups
- python3基础教程pdf下载-《Python基础教程》(第3版)pdf电子书百度网盘下载
- Decoupled Sparial-Temporal Attention Network forSkeleton-Based Action Recognition
- 【分布式】psutil cpu_percent如何使用；python如何测试cpu的使用率
- 3DMAX渲染慢技巧分享，建模初学者必看
- 量化交易之vn.py篇 - 同步持仓发单逻辑（非净头寸 净头寸）
- 什么是Ajax 和 json
- ArcGIS插件 - 易至天工影像加载插件
- ubuntu18.04卸载cuda11.3安装cuda10.2
热门文章
- [BZOJ3297][USACO2011 Open]forgot
- Spring-data-redis操作redis知识总结
- Node.js的集群功能以及在Express的配置
- BZOJ 1717: [Usaco2006 Dec]Milk Patterns 产奶的模式( 二分答案 + 后缀数组 )
- c#的内存管理(托管及未托管对象管理)
- 关于嵌入式学习随笔-1《STM32简介》
- kuangbin带你飞dp专题-基础dp
- JQuery datatables - column ordering, searching with multi header lines
- 利用 SendInput 和INPUT结构 模拟鼠标移动
- 2. 知识图谱-命名实体识别（NER）详解