Flutter中的Container小部件介绍与使用_container flutter

Flutter中的Container是一个强大而灵活的小部件，用于布局和装饰。它可以包含子部件，并具有多种属性，使得它成为构建用户界面的常见选择之一。

什么是Container？

Container是一个用于包装和定位子部件的小部件。它允许您指定宽度、高度、边距、填充和装饰，从而提供了对布局和外观的细粒度控制。

Container的基本结构

Container(
  // 在此设置Container的属性
  child: YourChildWidget(),
)
1
2
3
4

常用属性

1. width和height

Container(
  width: 100.0,
  height: 100.0,
  child: YourChildWidget(),
)
1
2
3
4
5

2. margin和padding

Container(
  margin: EdgeInsets.all(10.0),
  padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
  child: YourChildWidget(),
)
1
2
3
4
5

3. color

Container(
  color: Colors.blue,
  child: YourChildWidget(),
)
1
2
3
4

4. decoration

Container(
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black, width: 2.0),
    borderRadius: BorderRadius.circular(10.0),
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.green],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.grey,
        offset: Offset(2.0, 2.0),
        blurRadius: 5.0,
      ),
    ],
    image: DecorationImage(
      image: AssetImage('assets/background.jpg'),
      fit: BoxFit.cover,
    ),
  ),
  child: YourChildWidget(),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

属性说明

1. color

• 描述： 定义容器的背景颜色。
• 使用示例：

  color: Colors.blue,
  1

2. border

• 描述： 定义容器的边框样式，包括颜色和宽度。
• 使用示例：

  border: Border.all(color: Colors.black, width: 2.0),
  1

3. borderRadius

• 描述： 定义容器的边角半径，实现圆角效果。
• 使用示例：

  borderRadius: BorderRadius.circular(10.0),
  1

4. gradient

• 描述： 定义容器的渐变背景色。
• 使用示例：

  gradient: LinearGradient(
    colors: [Colors.blue, Colors.green],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  1
  2
  3
  4
  5

5. boxShadow

• 描述： 定义容器的阴影效果，包括颜色、偏移和模糊半径。
• 使用示例：

  boxShadow: [
    BoxShadow(
      color: Colors.grey,
      offset: Offset(2.0, 2.0),
      blurRadius: 5.0,
    ),
  ],
  1
  2
  3
  4
  5
  6
  7

6. image

• 描述： 定义容器的背景图像。
• 使用示例：

  image: DecorationImage(
    image: AssetImage('assets/background.jpg'),
    fit: BoxFit.cover,
  ),
  1
  2
  3
  4

7. shape

• 描述： 定义容器的形状，如矩形或圆形。
• 使用示例：

  shape: BoxShape.circle,
  1

8. backgroundBlendMode

• 描述： 定义容器背景颜色与其子部件的混合模式。
• 使用示例：

  backgroundBlendMode: BlendMode.difference,
  1

这些属性的组合可以创建丰富多彩、有层次感的容器装饰。根据具体的设计需求，您可以选择使用适当的属性来达到预期的效果。