Flutter中Contrainer 元件的寬高限制分析

題記

—— 執劍天涯，從你的點滴積累開始，所及之處，必精益求精，即是折騰每一天。

**	你可能需要
CSDN	網易雲課堂教程
掘金	EDU學院教程
知乎	Flutter系列文章
頭條同步	百度同步

本文章首發于微信公衆号（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 "),
            ),
          ),
        ),
      ),
    );
  }
}