关于flutter:Flutter中Contrainer-组件的宽高限制分析

题记
—— 执剑咫尺，从你的点滴积攒开始，所及之处，必精益求精，即是折腾每一天。

本文章首发于微信公众号（biglead）我的大前端生涯，同步登载各技术论坛。

1 Contrainer 组件

在 flutter 利用程序开发中，Contrainer 组件能够了解为容器，罕用用来设置背景、设置一个 Widget 的内外边距、以及边框款式等等。

2 Contrainer 组件的根本应用以及大小限定剖析

Contrainer 组件的大小限定能够形容为：

• 当 Contrainer 组件的父布局设置了大小，那么 Contrainer 将应用父布局的大小设置，
• 如果 父布局没有设置大小，本身设置了大小，那么 Contrainer 将应用本身设置的大小，
• 如果 本身没有设置大小，那么 Contrainer 将包裹子 Widget 或者说是将应用子 Widget 的大小设置

在这里 黄色的 Contrainer 与 灰色的 Contrainer 的大小齐全一至，而灰色的 Contrainer 的大小是由父黄色的 Contrainer 设置的大小（200，200）决定的，本身设置的（100，100），并没有起到影响，子 Widged SizedBox 设置的大小（50，50）也没有影响 父组件 灰色的 Contrainer 的大小。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ContainerHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {return ContainerHomePageState();
  }
}

class ContainerHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(title: Text("Container 配制"),
      ),
      body: Center(
        /// 内三组件
        child: Container(///Container 默认包裹子 widget (没任何内外大小的限度)
          ///Container 的背景色彩
          width: 200,
          height: 200,
          /// 黄色
          color: Colors.yellow,
          /// 当 Container 的外层有大小限度进 Container 取用的是外层设置的大小
          /// 内二组件
          child: Container(
              /// 灰色
            color: Colors.grey,
            width: 100,
            height: 100,
            /// 内一组件
            child: SizedBox(
              width: 50,
              height: 50,
              child: Text("这里是 body"),
            ),
          ),
        ),
      ),
    );
  }
}

Container 的大小由子 本身设置 的状况剖析

在这里 黄色的 Contrainer 与 灰色的 Contrainer 的大小齐全一至，而灰色的 Contrainer 的大小是由本身设置的大小（100，100）决定的，子 Widged SizedBox 设置的大小（50，50）将没有影响 父组件 灰色的 Contrainer 的大小。

class ContainerHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(title: Text("Container 配制"),
      ),
      body: Center(
        /// 内三组件
        child: Container(///Container 默认包裹子 widget (没任何内外大小的限度)
          ///Container 的背景色彩
//          width: 200,
//          height: 200,
          color: Colors.yellow,
          /// 当 Container 的外层有大小限度进 Container 取用的是外层设置的大小
          /// 内二组件
          child: Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            /// 内一组件
            child: SizedBox(
              width: 50,
              height: 50,
              child: Text("这里是 body"),
            ),
          ),
        ),
      ),
    );
  }
}

Container 的大小由子 Widget 决定 的状况剖析

如图所示

黄色的 Contrainer 与 灰色的 Contrainer 的大小齐全一至，而灰色的 Contrainer 的大小是由子 Widged SizedBox 设置的大小（50，50）决定的

class ContainerHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(title: Text("Container 配制"),
      ),
      body: Center(
        /// 内三组件
        child: Container(///Container 默认包裹子 widget (没任何内外大小的限度)
          ///Container 的背景色彩
//          width: 200,
//          height: 200,
          color: Colors.yellow,
          /// 当 Container 的外层有大小限度进 Container 取用的是外层设置的大小
          /// 内二组件
          child: Container(
            color: Colors.grey,
//            width: 100,
//            height: 100,
            /// 内一组件
            child: SizedBox(
              width: 50,
              height: 50,
              child: Text("这里是 body"),
            ),
          ),
        ),
      ),
    );
  }
}