flutter2：Container的简介与尺寸

1.Container简介

Container是一种Widget,同时Container就是用来包裹其他Widget然后给他们设置效果的，例如padding,margin,border,background这些东西（当然用的时候不是我这里直接说的这些属性名）

2.Container的尺寸

1.影响因素

目前我学到的是三项：约束、尺寸、子Widget

他们的作用效果也是：约束>尺寸>子Widget

总体影响效果：（下面涉及到了约束是什么这件事，在后文会有提及）

复制代码

默认情况下：只要没约束没尺寸就是尽可能小
有了子View: 尽可能小然后按照尺寸和约束调节
在约束眼中，子Widget和尺寸是一样的，如果有他们，就先按他们来，然后再给他们进行约束限制，如果没有他们，对于没有约束最大的属性就会matchParent

2.先说Constraint这个东西吧

他是个约束，简单来说就是表示minWidth,minHeight,maxWidth,maxHeight的一个类，对于Container这个小部件而言，约束在设置的时候是设置的它自身这个小部件的最大最小宽高。

1.约束方法

1.直接设置最大最小宽高

BoxConstraints(minHeight: 120,maxHeight: 120,minWidth: 120,maxWidth: 120)

2.用现有的BoxConstraints的方法简单设置

BoxConstraints.loose(Size size)

BoxConstraints.expand({double? width, double? height})

BoxConstraints.fromViewConstraints(ui.ViewConstraints constraints)

BoxConstraints.tight(Size size)

BoxConstraints.tightFor({double? width, double? height})

BoxConstraints.tightForFinite({ double width = double.infinity, double height = double.infinity, })

2.现成的这几个方法的作用

loose:仅约束最大尺寸
expand:未指定的维度必须填满父容器空间
fromViewConstraints:将平台原生视图约束转换为BoxConstraints
tight:严格固定为精确尺寸
tightFor:可选择性固定某些维度，未指定的维度自由
tightForFinite:只对有限数值严格固定，∞值视为未指定

3.demo代码

Dart 复制代码

// 无子无约束无尺寸不显示
class LearnContainers extends StatelessWidget {
  const LearnContainers({super.key});

  @override
  Widget build(BuildContext context) => Container(color: Colors.blue);
}
// 有子无约束无尺寸，wrapContent
class LearnChildContainers extends StatelessWidget {
  const LearnChildContainers({super.key});

  @override
  Widget build(BuildContext context) =>
      Container(color: Colors.blue, child: Text("有子Widget的Container"));
}
// 无子有约束，先mathParent,然后根据约束再更改尺寸
class LearnWithConstraintContainers extends StatelessWidget {
  const LearnWithConstraintContainers({super.key});

  @override
  Widget build(BuildContext context) => Container(
    color: Colors.blue,
    constraints: BoxConstraints(
      minWidth: 100,
      minHeight: 100,
      maxWidth: 100,
      maxHeight: 100,
    ),
  );
}
// 有子有约束，先wrapContent,然后根据约束再更改尺寸
class LearnChildWithConstraintContainers extends StatelessWidget {
  const LearnChildWithConstraintContainers({super.key});

  @override
  Widget build(BuildContext context) => Container(
    color: Colors.blue,
    constraints: BoxConstraints(minWidth: 100, minHeight: 100),
    child: Text("有子Widget有约束的Container"),
  );
}
// 有子有尺寸，按尺寸来
class LearnChildWithSizedContainers extends StatelessWidget {
  const LearnChildWithSizedContainers({super.key});

  @override
  Widget build(BuildContext context) => Container(
    color: Colors.blue,
    width: 100,
    height: 100,
    child: Text("有子Widget有尺寸的Container"),
  );
}
// 有子有尺寸有约束，先按尺寸来，然后根据约束更改尺寸
class LearnChildWithSizedAndConstraintContainers extends StatelessWidget {
  const LearnChildWithSizedAndConstraintContainers({super.key});
  @override
  Widget build(BuildContext context) => Container(
    color: Colors.blue,
    width: 100,
    height: 100,
    constraints: BoxConstraints(minWidth: 120, minHeight: 120),
    child: Text("有子有尺寸有约束的Container"),
  );
}
// 无子有尺寸有约束，先按尺寸来，然后根据约束更改尺寸
class LearnWithSizedAndConstraintNotContainers extends StatelessWidget {
  const LearnWithSizedAndConstraintNotContainers({super.key});
  @override
  Widget build(BuildContext context) => Container(
    color: Colors.blue,
    width: 100,
    height: 100,
    constraints: BoxConstraints(minWidth: 120, minHeight: 120),
  );
}