当前位置：首页 > news >正文

【Flutter学习】基本组件之容器组件Container

news 来源：原创 2024/5/7 19:07:04

一，前言　

　Flutter控件本身通常由许多小型、单用途的控件组成，结合起来产生强大的效果，例如，Container是一种常用的控件，由负责布局、绘画、定位和大小调整的几个控件组成，具体来说，Container是由LimitedBox、ConstrainedBox、 Align、Padding、DecoratedBox和Transform控件组成，而不是将Container子类化来产生自定义效果，您可以用这种新颖的方式组合这些以及其他简单的控件。

二，基本组件 -- Container

　　容器，一个常用的控件，由基本的绘制、位置和大小控件组成。负责创建矩形的可视元素，可以用BoxDecoration来设计样式，比如背景、边框和阴影，Container也有边距、填充和大小限制，另外，还可以在三维空间利用矩阵进行变换。

没有子控件的容器尽可能大，除非传入的大小约束是无限的，在这种情况下，它们尽可能小。有子控件的容器将自己的尺寸给他们的孩子。我们可以通过width、height和 constraints属性控制size。

继承关系

Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container

行为

由于Container结合了许多其他Widget，每个Widget都有自己的布局行为，因此Container的布局行为有点复杂。

依次是：

1.采用alignment
2.以child调整自身大小
3.采用了width，height和constraints
4.扩大以适应父Widget
5.要尽可能小

具体情况来说：

1· 如果Container没有子Widget，没有height，没有width，没有constraints，并且父窗口提供无限制约束，则Container尝试尽可能小。
2· 如果Container没有子Widget，没有alignment，而是一个height，width或 constraints提供，Container试图给出这些限制和父Widget的约束相结合，以尽可能小。
3· 如果Container没有子Widget，没有height，没有width，没有constraints，没有alignment，但是父窗口提供了有界约束，那么Container会扩展以适应父窗口提供 的约束。
4· 如果Container具有alignment，并且父窗口提供无限制约束，则constraints会尝试围绕子Widget的alignment自身大小。
5· 如果Container具有alignment，并且父窗口提供有界约束，则constraints会尝试展开以适合父窗口，然后根据alignment将子项置于其自身内。
6· Container具有子Widget，但没有height，没有width，没有constraints，没有alignment，将父级constraints传递给子级，自身调整大小。

构造方法讲解

Container({
    Key key,
    this.alignment,//控制child的对齐方式
    this.padding, //设置内边距
    Color color, //设置背景颜色
    Decoration decoration,//绘制在child下层的装饰，不能与color同时使用
    this.foregroundDecoration,//绘制在child上层的装饰
    double width, //宽
    double height, //高
    BoxConstraints constraints,添加到child上额外的约束条件
    this.margin,//外边距
    this.transform,//设置container的变换矩阵，类型为Matrix4
    this.child, //子组件
  }) : assert(margin == null || margin.isNonNegative),
       assert(padding == null || padding.isNonNegative),
       assert(decoration == null || decoration.debugAssertIsValid()),
       assert(constraints == null || constraints.debugAssertIsValid()),
       assert(color == null || decoration == null,
         'Cannot provide both a color and a decoration\n'
         'The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".'）

/**
    const BoxDecoration({
    this.color,
    this.image,
    this.border,
    this.borderRadius,
    this.boxShadow,//border四周添加阴影效果
    this.gradient,//装饰器的过度效果，比如可以用来给组件添加一个蒙层
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,
    })
 */

参数详解
- alignment（这个属性是针对容器中的child的对其方式）
  - topCenter：顶部居中对齐
  - topLeft：顶部左对齐
  - topRight：顶部右对齐
  - center：水平垂直居中对齐
  - centerLeft：垂直居中水平居左对齐
  - centerRight：垂直居中水平居右对齐
  - bottomCenter底部居中对齐
  - bottomLeft：底部居左对齐
  - bottomRight：底部居右对齐

- decoration（容器的修饰器，用于背景或者border）
  如果在decoration中用了color，就把容器中设置的color去掉，不要重复设置color，设置的边框样式是让四条边框的宽度为8px，颜色为黑色

- margin（margin属性是表示Container与外部其他组件的距离）
- padding（指Container边缘与Child之间的距离）
```
padding: EdgeInsets.all(20.0),
```
- transform（可以根据自己的需要调整旋转的角度）
```
transform: Matrix4.rotationZ(0.2)
```

三，示例demo　　

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container组件demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new CenterDemoPage() ,
    );
  }
}

class CenterDemoPage extends StatefulWidget{
   @override
   createState() => new CenterDemoPageState();
}

class CenterDemoPageState extends State<CenterDemoPage>{
   @override
   Widget build(BuildContext context) {
    return new Scaffold(
       appBar: new AppBar(
         title: new Text('Container Widget Demo'),
       ),
       body:_buildDemo() ,
    );
  }

  Widget _buildDemo(){
    return new Center(
      child: Container(
        child: new Text('Hello Wolrd !'),
        alignment: Alignment.center, //设置对齐方式
        width: 300, //宽
        height:300, //高
        // color: Colors.redAccent,
        //设置边框
        decoration: new BoxDecoration(
          gradient: new LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment(0.8, 0),
            colors: [const Color(0xFFFFFFEE), const Color(0xFF999999)]
          ),
          color: Colors.blue,
          border: Border.all(
            color: Colors.black,
            width: 8.0,
          ),
        ),
        //内边距
        padding: EdgeInsets.all(20.0),
        margin: EdgeInsets.all(10.0),
        //旋转
        transform: Matrix4.rotationZ(0.4),
      ),
    );
  }
}