📜  Flutter容器

📅  最后修改于: 2021-01-02 04:52:55             🧑  作者: Mango

颤振容器

Flutter中的容器是一个父窗口小部件,可以包含多个子窗口小部件,并通过宽度,高度,填充,背景颜色等有效地对其进行管理。它是一个结合了子窗口小部件的常见绘画,定位和大小的窗口小部件。这也是一类,用于存储一个或多个小部件并根据我们的需要将它们放置在屏幕上。通常,它类似于用于存储内容的盒子。它允许用户使用许多属性来装饰其子窗口小部件,例如使用margin ,它将容器与其他内容分开。

容器小部件与html中的

标签相同。如果此窗口小部件不包含任何子窗口小部件,它将自动填充屏幕上的整个区域。否则,它将根据指定的高度和宽度包装子窗口小部件。请注意,没有任何父窗口小部件,该窗口小部件无法直接渲染。我们可以使用脚手架小部件,中心小部件,填充小部件,行小部件或列小部件作为其父小部件。

为什么我们在Flutter中需要一个容器小部件?

如果我们有一个需要某种背景样式的窗口小部件,可能是颜色,形状或大小限制,则可以尝试将其包装在容器窗口小部件中。此小部件可帮助我们组成,装饰和定位其子小部件。如果将小部件包装在容器中,则不使用任何参数,就不会发现外观上的任何差异。但是,如果我们在容器中添加任何属性,例如颜色,边距,填充等,则可以根据需要在屏幕上设置小部件的样式。

基本容器的子控件周围具有边距,边框和填充属性,如下图所示:

容器类的构造函数

以下是容器类构造函数的语法:

Container({Key key,
           AlignmentGeometry alignment, 
           EdgeInsetsGeometry padding, 
           Color color, 
           double width, 
           double height,
           Decoration decoration, 
           Decoration foregroundDecoration, 
           BoxConstraints constraints, 
           Widget child, 
           Clip clipBehavior: Clip.none
});

容器小部件的属性

让我们详细了解容器小部件的一些基本属性。

1. child:此属性用于存储容器的子窗口小部件。假设我们将“文本”小部件作为其子小部件,可以在以下示例中显示:

Container(
    child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),
)

2. color:此属性用于设置文本的背景颜色。它还会更改整个容器的背景颜色。请参见以下示例:

Container(
    color: Colors.green, 
    child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),
)

3. height and width:此属性用于根据我们的需要设置容器的高度和宽度。默认情况下,容器始终根据其子窗口小部件占用空间。请参见以下代码:

Container(
    width: 200.0,
    height: 100.0,
    color: Colors.green, 
    child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),
)

4. margin:此属性用于包围容器周围的有效空间。我们可以通过查看容器周围的空白来观察此情况。假设我们使用了EdgeInsets.all(25) ,它在所有四个方向上设置了相等的边距,如下例所示:

Container(
    width: 200.0,
    height: 100.0,
    color: Colors.green, 
    margin: EdgeInsets.all(20),
    child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),
)

5. padding:此属性用于设置容器的边框(所有四个方向)与其子控件之间的距离。我们可以通过查看容器和子窗口小部件之间的空间来观察这一点。在这里,我们使用了EdgeInsets.all(35)来设置文本和所有四个容器方向之间的间距:

Container(
    width: 200.0,
    height: 100.0,
    color: Colors.green, 
    padding: EdgeInsets.all(35),
    margin: EdgeInsets.all(20),
    child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),
)

6.对齐:此属性用于设置子项在容器中的位置。 Flutter允许用户以各种方式对齐其元素,例如中心,底部,底部中心,topLeft,centerRight,左侧,右侧等。在下面的示例中,我们将其子项对齐到右下角的位置。

Container(
    width: 200.0,
    height: 100.0,
    color: Colors.green, 
    padding: EdgeInsets.all(35),
    margin: EdgeInsets.all(20),
    alignment: Alignment.bottomRight,
    child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),
)

7.装饰:此属性允许开发人员在小部件上添加装饰。它装饰或绘制孩子后面的小部件。如果要在孩子面前装饰或绘画,则需要使用forgroundDecoration参数。下图说明了两者之间的区别,其中,前台装饰覆盖子项和子项后的装饰涂料。

装饰属性支持许多参数,例如颜色,渐变,背景图像,边框,阴影等。这是确保我们可以在容器或装饰中使用color属性,但不能同时在两者中使用。请参阅下面的代码,其中我们添加了border和shadow属性来装饰盒子:

import 'package:flutter/material.dart';

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

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Container Example"),
        ),
        body: Container(
          padding: EdgeInsets.all(35),
          margin: EdgeInsets.all(20),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black, width: 4),
            borderRadius: BorderRadius.circular(8),
            boxShadow: [
              new BoxShadow(color: Colors.green, offset: new Offset(6.0, 6.0),),
            ],
          ),
          child: Text("Hello! I am in the container widget decoration box!!",
              style: TextStyle(fontSize: 30)),
        ),
      ),
    );
  }
}

我们将在屏幕截图中看到以下输出:

8. transform: transform属性允许开发人员旋转容器。它可以沿任何方向旋转容器,即在父窗口小部件中更改容器坐标。在下面的示例中,我们将沿z轴旋转容器。

Container(
    width: 200.0,
    height: 100.0,
    color: Colors.green, 
    padding: EdgeInsets.all(35),
    margin: EdgeInsets.all(20),
    alignment: Alignment.bottomRight,
    transform: Matrix4.rotationZ(0.1), 
    child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),
)

9.约束:当我们要向子级添加其他约束时,使用此属性。它包含各种构造函数,例如紧密,松散,扩展等。让我们看看如何在我们的应用程序中使用这些构造函数:

紧:如果在此使用size属性,它将为子级赋予固定值。

Container(
    color: Colors.green, 
    constraints: BoxConstraints.tight(Size size)
        : minWidth = size.width, maxWidth = size.width,
          minHeight = size.height, maxHeight = size.height; 
    child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),
)

expand:在这里,我们可以选择子项的高度,宽度或两者。

Container(
    color: Colors.green, 
    constraints: BoxConstraints.expand(height: 60.0), 
    child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),
)

让我们通过一个示例来了解它,在该示例中,我们将尝试覆盖大多数容器属性。打开main.dart文件,并将其替换为以下代码:

import 'package:flutter/material.dart';

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

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyContainerWidget(),
    );
  }
}

class MyContainerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Container Example"),
        ),
        body: Container(
          width: double.infinity,
          height: 150.0,
          color: Colors.green,
          margin: EdgeInsets.all(25),
          padding: EdgeInsets.all(35),
          alignment: Alignment.center,
          transform: Matrix4.rotationZ(0.1),
          child: Text("Hello! I am in the container widget!!",
              style: TextStyle(fontSize: 25)),
        ),
      ),
    );
  }
}

输出量

当我们运行该应用程序时,它将给出以下屏幕截图: