Flutter中Contrainer 组件的宽高限制分析

原创

早起的年轻人

修改于 2020-09-03 10:02:44

2K0

修改于 2020-09-03 10:02:44

文章被收录于专栏：flutter开发中的点滴积累

题记

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

**	你可能需要
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 "),
            ),
          ),
        ),
      ),
    );
  }
}

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

flutter

android

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

flutter

android

登录后参与评论

0 条评论

热度