小常识，大应战！本文正在参加“程序员必备小常识”创造活动。

本文一起参加「掘力星方案」，赢取创造大礼包，应战创造激励金。

【Flutter】学习养成记，【程序员必备小常识】

今天小常识——【Flutter】根底组件【02】Container！

1. 写在前面

在上篇文章中介绍了Flutter中的根底组件Text，今天持续来学习下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作用。

【Flutter】基础组件【02】Container

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),
              ),
      ),
    ),
  );
}
  • 代码运转作用

【Flutter】基础组件【02】Container

更多内容去这里api.flutter.dev/flutter/wid…

3. 写在后边

重视我，更多内容持续输出

  • CSDN
  • 简书

喜爱就点个赞吧

觉得有收成的，可以来一波 保藏+重视，以免你下次找不到我

欢迎我们留言沟通，批评指正，转发请注明出处，谢谢支撑！