首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Flutter中Contrainer 组件的宽高限制分析

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

原创
作者头像
早起的年轻人
修改于 2020-09-03 02:02:44
修改于 2020-09-03 02:02:44
2K0
举报

题记

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

本文章首发于微信公众号(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 的大小。

代码语言:txt
AI代码解释
复制
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 的大小。

代码语言:txt
AI代码解释
复制
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)决定的

代码语言:txt
AI代码解释
复制
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 删除。

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )
Wrap 组件 : 该组件是可换行的水平线性布局组件 , 与 Row 组件间类似 , 但是可以换行 ;
韩曙亮
2023/03/28
9.6K0
【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )
Flutter 的按钮,看这篇文章就够了
我在之前的文章文本、图片和按钮在Flutter中怎么用中,简单介绍过按钮组件,本篇文章来详细聊聊Flutter中的各种按钮组件的各种应用场景。
拉维
2019/08/28
10.3K0
Flutter 的按钮,看这篇文章就够了
【Flutter】Flutter 布局组件 ( FractionallySizedBox 组件 | Stack 布局组件 | Positioned 组件 )
FractionallySizedBox 组件 : 可控制组件在水平/垂直方向上填充满父容器 ;
韩曙亮
2023/03/28
3.1K0
【Flutter】Flutter 布局组件 ( FractionallySizedBox 组件 | Stack 布局组件 | Positioned 组件 )
Flutter 布局备忘录 -- 多图警告,干货建议收藏
这里我将展示我在使用 Flutter 布局的代码片段。我将通过精美的代码片段结合可视化的图形来举例。
Jimmy_is_jimmy
2022/08/30
3K0
Flutter 布局备忘录 -- 多图警告,干货建议收藏
【Flutter】Flutter 布局组件 ( PhysicalModel 组件 )
代码示例 : PhysicalModel 组件裁剪 PageView 组件 , 将 PageView 组件裁剪成圆角矩形样式 ;
韩曙亮
2023/03/28
1.6K0
【Flutter】Flutter 布局组件 ( PhysicalModel 组件 )
Flutter组件随笔练习
Container组件 import 'package:flutter/material.dart'; //快捷方式:fim void main() { runApp(MyApp()); } //自定义组件 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp(
明知山
2020/09/02
1K0
《Flutter》-- 5.Flutter页面布局
盒约束是指组件可以按照指定限制条件来决定如何布局自身位置。Flutter提供的尺寸限制类容器可以用于限制容器的大小,并提供了多种约束容器组件,常见的有ConstrainedBox、SizedBox和UnconstrainedBox。
爱学习的程序媛
2022/04/07
1.1K0
《Flutter》-- 5.Flutter页面布局
Flutter 中 Padding、Row 、Column 、Expanded 组件详解
在 html 中常见的布局标签都可以使用 padding 属性,但是 Flutter 中很多 Widget 是没有 padding 属 性,这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。
越陌度阡
2020/12/22
1.9K0
Flutter 中 Padding、Row 、Column 、Expanded 组件详解
Flutter | 容器组件
EdgeInsetsGeometry 是一个抽象类,开发中,我们一般都使用 EdgeInsets 类,他是 EdgeInsetsGeometry 的子类,定义了一下设置填充的方法
345
2022/02/11
5.8K0
Flutter | 容器组件
【Flutter实战】定位装饰权重组件及柱状图案例
第一次鸦片战争,是1840年至1842年英国对中国发动的一场战争,也是中国近代史的开端。闭关锁国后的清朝逐步落后于世界大潮,但在外贸中,一直处于贸易顺差地位。 为了扭转对华贸易逆差,英国开始向中国走私毒品鸦片。1838年冬,道光帝派湖广总督林则徐为钦差大臣,赴广东查禁鸦片。英国政府以此为借口,决定派出远征军侵华,英国国会也通过对华战争的拨款案。
老孟Flutter
2020/09/11
1.5K0
【Flutter实战】定位装饰权重组件及柱状图案例
《Flutter》-- 4.Flutter组件基础
Flutter开发中有一个非常重要的理念,即一切皆为组件。Flutter中Widget不仅可以表示UI元素,也可以布局元素、动画、装饰效果。
爱学习的程序媛
2022/04/07
13.2K0
《Flutter》-- 4.Flutter组件基础
Flutter 中 image 图片组件
1. alignment 对齐方式 。值为Alignment类型,如:Alignment.topCenter;
越陌度阡
2020/12/18
1.7K0
Flutter 中 image 图片组件
【Flutter实战】六大布局组件
老孟导读:Flutter中布局组件有水平 / 垂直布局组件( Row 和 Column )、叠加布局组件( Stack 和 IndexedStack )、流式布局组件( Wrap )和 自定义布局组件(Flow)。
老孟Flutter
2020/09/11
2K0
【Flutter实战】六大布局组件
Flutter容器类组件
⚠️注意, Flutter官方并没有对Widget进行如此划分。中文版《Flutter实战》对其分类主要是方便讨论和对Widget功能区分记忆。
白白白小艾
2022/03/24
4.1K0
Flutter | 常用组件分类、概述、实战
AppBar(title属性,Text组件; action:动作响应;!!!! titleSpacing:标题文字间距; toolbarOpacity:标题透明度;)
凌川江雪
2020/06/16
4.5K0
Flutter 中的按钮组件
1. onPressed 按下按钮时触发的回调方法,为必填参数,如果值为 null 表示禁用按钮,会显示禁用相关样式;
越陌度阡
2020/12/31
3.7K0
Flutter | 布局组件
布局类组件都会包含一个或多个组件,不同的布局类组件对子组件(layout)方式不同。在 Flutter 中 Element 树才是最终的绘制树,Element 树是通过 Widget 树来创建的 (通 Widget.createElement()) ,Widget 其实就是 Element 的配置数据。
345
2022/02/11
2.9K0
Flutter | 布局组件
【Flutter】Flutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 )
Row 组件相关参数 : Row 组件相当于线性布局 , 水平方向布局 , 组件从左到右 ;
韩曙亮
2023/03/28
2.6K0
【Flutter】Flutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 )
Flutter中GridView网格列表组件的使用
当数据量很大的时候用矩阵方式排列比较清晰,此时我们可以用网格列表组件 GridView 实现布局。
越陌度阡
2022/05/06
4K0
Flutter中GridView网格列表组件的使用
Flutter开发-容器类组件
Padding可以给其子节点添加填充(留白),和边距效果类似。我们在前面很多示例中都已经使用过它了,现在来看看它的定义:
码客说
2020/05/14
4K0
推荐阅读
相关推荐
【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档