Flutter - Container

terry 2年前 (2023-09-22) 阅读数 82 #移动小程序

中的 div 不适合将 Container 与 Flutter 进行比较。 Container用作学习flutter的起点。 Flutter官方文档读起来不是很直观，对于习惯看文档有前端类直观例子的同学不太友好，所以我就简单的从中删除了容器总结 从基本用法开始。

容器的基本使用

使用color属性生成黄色容器。通过 margin 属性设置此。容器

Container(
    color: Colors.yellow,
    margin: EdgeInsets.fromLTRB(100, 300, 100, 300),
)
复制代码

的边缘将这个容器穿过装饰放置在一个圆圈中。注意容器属性的颜色和装饰存储可以同时存在。

Container(
    margin: EdgeInsets.fromLTRB(100, 300, 100, 300),
    decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.yellow,
    ),
)
复制代码

为Container添加绿色子Container。此时，子组件填充父组件

Container(
    color: Colors.yellow,
    child: Container( 
        color: Colors.green,
    ),
);
复制代码

的空间，为子组件容器设置宽度和高度，并通过对齐❀♺❀ ♺将其居中margin

Container(
    color: Colors.yellow,
    child: Container(
        color: Colors.green,
        margin: EdgeInsets.fromLTRB(100, 300, 100, 300),
    ),
);
复制代码

添加一个文本作为其子项，你能看到左上角的文本吗？

Container(
    color: Colors.yellow,
    child: Text(
        "快狗打车",
        textDirection: TextDirection.ltr,
        style: TextStyle(color: Colors.black),
    ),
);
复制代码

使用 alignment 属性设置 child 小部件的对齐方式，通常通过另一个对象在 Alignment 类上使用 alignment 容器包裹此文本，并使用 padding♿♿♿ 属性设置居中

Container(
    color: Colors.yellow,
    alignment: Alignment.center,
    child: Container(
        color: Colors.green,
        child: Text(
            "快狗打车",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.black),
        ),
    ),
);
复制代码

用法属性 Transform 可用于通过矩阵变换进行设置。通常我们用它来旋转

Container(
    color: Colors.yellow,
    child: Container(
        color: Colors.green,
        margin: EdgeInsets.fromLTRB(100, 200, 100, 300),
        transform: Matrix4.rotationZ(0.2),
    ),      
);
复制代码

。通过属性装饰还可以设置容器的内边距、圆角、背景图片、边框和阴影等，主要用于装饰❙和 ForegroundDecoration 有点像css中的::before和❀ ForegroundDecoration可以用来装饰前景效果对比：

Container(
    color: Colors.yellow,
    child: Container(
        color: Colors.green,
        margin: EdgeInsets.fromLTRB(100, 200, 100, 300),
        transform: Matrix4.rotationZ(0.2),
    ),      
);
复制代码

可以看到如果您使用 ForegroundDecoration 来覆盖背景图像和文本。使用装饰相反

使用约束设置近似值包用于界定自身并描述当前小部件允许占用的空间量。通常使用BoxConstraint来设置约束条件。这会限制子 container

的最大和最小宽度和高度。如果子容器没有子容器，则子 container 最大宽度将使用限制。如果

Container(
    color: Colors.yellow,
    alignment: Alignment.centerLeft,    
    child: Container(
        color: Colors.green,
        constraints: BoxConstraints(
            maxHeight: 300,
            maxWidth: 300,
            minHeight: 100,
            minWidth: 100
        ),
    ),      
);
复制代码

子容器有一个子容器，则子容器使用约束允许的最大高度和宽度。根据尺寸和限制进行布局。本例中，由于Text文本小部件占用的空间没有达到约束指定的最小空间，即最小宽度和高度，因此布局立即为约束中的最小宽度和高度

Container(
    color: Colors.yellow,
    alignment: Alignment.centerLeft,    
    child: Container(
        color: Colors.green,
        constraints: BoxConstraints(
            maxHeight: 300,
            maxWidth: 300,
            minHeight: 50,
            minWidth: 100
        ),
        child: Text(
            "快狗打车",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.black),
        ),
    ),      
);
复制代码

如果上例中的TextWidget 所需的空间增加，例如字体放大，则父❓ t 根据最大限制space Layout

Container(
    color: Colors.yellow,
    alignment: Alignment.centerLeft,    
    child: Container(
        color: Colors.green,
        constraints: BoxConstraints(
            maxHeight: 300,
            maxWidth: 300,
            minHeight: 50,
            minWidth: 100
        ),
        child: Text(
            "快狗打车",
            textDirection: TextDirection.ltr,
            fontSize: 300,
            style: TextStyle(color: Colors.black),
        ),
    ),      
);
复制代码