Flutter 布局（五）- LimitedBox、Offstage、OverflowBox、SizedBox详解

本文主要介绍Flutter布局中的LimitedBox、Offstage、OverflowBox、SizedBox四种控件，详细介绍了其布局行为以及使用场景，并对源码进行了分析。

1. LimitedBox

A box that limits its size only when it‘s unconstrained.

1.1 简介

LimitedBox，通过字面意思，也可以猜测出这个控件的作用，是限制类型的控件。这种类型的控件前面也介绍了不少了，这个是对最大宽高进行限制的控件。

1.2 布局行为

LimitedBox是将child限制在其设定的最大宽高中的，但是这个限定是有条件的。当LimitedBox最大宽度不受限制时，child的宽度就会受到这个最大宽度的限制，同理高度。

1.3 继承关系

Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > LimitedBox

1.4 示例代码

Row(
  children: <Widget>[
    Container(
      color: Colors.red,
      width: 100.0,
    ),
    LimitedBox(
      maxWidth: 150.0,
      child: Container(
        color: Colors.blue,
        width: 250.0,
      ),
    ),
  ],
)

1.5 源码解析

const LimitedBox({
  Key key,
  this.maxWidth = double.infinity,
  this.maxHeight = double.infinity,
  Widget child,
})

1.5.1 属性解析

maxWidth：限定的最大宽度，默认值是double.infinity，不能为负数。

maxHeight：同上。

1.5.2 源码

先不说其源码，单纯从其作用，前面介绍的SizedBox、ConstrainedBox都类似，都是通过强加到child的constraint，来达到相应的效果。

我们直接看其计算constraint的代码

minWidth: constraints.minWidth,
maxWidth: constraints.hasBoundedWidth ? constraints.maxWidth : constraints.constrainWidth(maxWidth),
minHeight: constraints.minHeight,
maxHeight: constraints.hasBoundedHeight ? constraints.maxHeight : constraints.constrainHeight(maxHeight)

LimitedBox只是改变最大宽高的限定。具体的布局代码如下：

if (child != null) {
  child.layout(_limitConstraints(constraints), parentUsesSize: true);
  size = constraints.constrain(child.size);
} else {
  size = _limitConstraints(constraints).constrain(Size.zero);
}

根据最大尺寸，限制child的布局，然后将自身调节到child的尺寸。

1.6 使用场景

使用场景是不可能清楚了，光是找例子，就花了不少时间。Flutter的一些冷门控件，真的是除了官方的文档，啥材料都木有。谷歌说这个很有用，还是一脸懵逼。这种控件，也有其他的替代解决方案，LimitedBox可以达到的效果，ConstrainedBox都可以实现。

2. Offstage

A widget that lays the child out as if it was in the tree, but without painting anything, without making the child available for hit testing, and without taking any room in the parent.

2.1 简介

Offstage的作用很简单，通过一个参数，来控制child是否显示，日常使用中也算是比较常用的控件。

2.2 布局行为

Offstage的布局行为完全取决于其offstage参数

  • 当offstage为true，当前控件不会被绘制在屏幕上，不会响应点击事件，也不会占用空间；
  • 当offstage为false，当前控件则跟平常用的控件一样渲染绘制；

另外，当Offstage不可见的时候，如果child有动画，应该手动停掉，Offstage并不会停掉动画。

2.3 继承关系

Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > Offstage

2.4 示例代码

Column(
  children: <Widget>[
    new Offstage(
      offstage: offstage,
      child: Container(color: Colors.blue, height: 100.0),
    ),
    new CupertinoButton(
      child: Text("点击切换显示"),
      onPressed: () {
        setState(() {
          offstage = !offstage;
        });
      },
    ),
  ],
)

当点击切换按钮的时候，可以看到Offstage显示消失。

2.5 源码解析

const Offstage({ Key key, this.offstage = true, Widget child })

2.5.1 属性解析

offstage：默认为true，也就是不显示，当为flase的时候，会显示该控件。

2.5.2 源码

我们先来看下Offstage的computeIntrinsicSize相关的方法：

@override
double computeMinIntrinsicWidth(double height) {
    if (offstage)
      return 0.0;
    return super.computeMinIntrinsicWidth(height);
  }

可以看到，当offstage为true的时候，自身的最小以及最大宽高都会被置为0.0。

接下来我们来看下其hitTest方法：

  @override
  bool hitTest(HitTestResult result, { Offset position }) {
    return !offstage && super.hitTest(result, position: position);
  }

当offstage为true的时候，也不会去执行。

最后我们来看下其paint方法：

@override
  void paint(PaintingContext context, Offset offset) {
    if (offstage)
      return;
    super.paint(context, offset);
  }

当offstage为true的时候直接返回，不绘制了。

到此，跟上面所说的布局行为对应上了。我们一定要清楚一件事情，Offstage并不是通过插入或者删除自己在widget tree中的节点，来达到显示以及隐藏的效果，而是通过设置自身尺寸、不响应hitTest以及不绘制，来达到展示与隐藏的效果。

2.6 使用场景

当我们需要控制一个区域显示或者隐藏的时候，可以使用这个场景。其实也有其他代替的方法，但是成本会高很多，例如直接在tree上插入删除，但是不建议这么做。

3. OverflowBox

A widget that imposes different constraints on its child than it gets from its parent, possibly allowing the child to overflow the parent.

3.1 简介

OverflowBox这个控件，允许child超出parent的范围显示，当然不用这个控件，也有很多种方式实现类似的效果。

3.2 布局行为

当OverflowBox的最大尺寸大于child的时候，child可以完整显示，当其小于child的时候，则以最大尺寸为基准，当然，这个尺寸都是可以突破父节点的。最后加上对齐方式，完成布局。

3.3 继承关系

Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > OverflowBox

3.4 示例代码

Container(
  color: Colors.green,
  width: 200.0,
  height: 200.0,
  padding: const EdgeInsets.all(5.0),
  child: OverflowBox(
    alignment: Alignment.topLeft,
    maxWidth: 300.0,
    maxHeight: 500.0,
    child: Container(
      color: Color(0x33FF00FF),
      width: 400.0,
      height: 400.0,
    ),
  ),
)

当maxHeight大于height的时候，可以完全显示下来，当maxHeight小于height的时候，则不会会被隐藏掉

3.5 源码解析

构造函数如下：

const OverflowBox({
    Key key,
    this.alignment = Alignment.center,
    this.minWidth,
    this.maxWidth,
    this.minHeight,
    this.maxHeight,
    Widget child,
  })

3.5.1 属性解析

alignment：对齐方式。

minWidth：允许child的最小宽度。如果child宽度小于这个值，则按照最小宽度进行显示。

maxWidth：允许child的最大宽度。如果child宽度大于这个值，则按照最大宽度进行展示。

minHeight：允许child的最小高度。如果child高度小于这个值，则按照最小高度进行显示。

maxHeight：允许child的最大高度。如果child高度大于这个值，则按照最大高度进行展示。

其中，最小以及最大宽高度，如果为null的时候，就取父节点的constraint代替。

3.5.2 源码

OverflowBox的源码很简单，我们先来看一下布局代码：

if (child != null) {
  child.layout(_getInnerConstraints(constraints), parentUsesSize: true);
  alignChild();
}

如果child不为null，child则会按照计算出的constraints进行尺寸的调整，然后对齐。

至于constraints的计算，则还是上面的逻辑，如果设置的有的话，就取这个值，如果没有的话，就拿父节点的。

3.6 使用场景

有时候设计图上出现的角标，会超出整个模块，可以使用OverflowBox控件。但我们应该知道，不使用这种控件，也可以完成布局，在最外面包一层，也能达到一样的效果。具体实施起来哪个比较方便，同学们自行取舍。

4. SizedBox

A box with a specified size.

4.1 简介

比较常用的一个控件，设置具体尺寸。

4.2 布局行为

SizedBox布局行为相对较简单：

  • child不为null时，如果设置了宽高，则会强制把child尺寸调到此宽高；如果没有设置宽高，则会根据child尺寸进行调整；
  • child为null时，如果设置了宽高，则自身尺寸调整到此宽高值，如果没设置，则尺寸为0；

4.3 继承关系

Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > SizedBox

4.4 示例代码

Container(
  color: Colors.green,
  padding: const EdgeInsets.all(5.0),
  child: SizedBox(
    width: 200.0,
    height: 200.0,
    child: Container(
      color: Colors.red,
      width: 100.0,
      height: 300.0,
    ),
  ),
)

4.5 源码解析

构造函数

const SizedBox({ Key key, this.width, this.height, Widget child })

4.5.1 属性解析

width：宽度值，如果具体设置了，则强制child宽度为此值，如果没设置，则根据child宽度调整自身宽度。

height：同上。

4.5.2 源码

SizedBox内部是通过RenderConstrainedBox来实现的。具体的源码就不解析了，总体思路是，根据宽高值算好一个constraints，然后强制应用到child上。

4.6 使用场景

这个控件，很多场景可以使用。但是，可以替代它的控件也有不少，例如Container、ConstrainedBox等。而且SizedBox就是ConstrainedBox的一个特例。还是那句话，精简啊，多提供一些常用的，不要提供一大堆重复的，场景很少的控件。

5. 后话

笔者建了一个Flutter学习相关的项目，Github地址，里面包含了笔者写的关于Flutter学习相关的一些文章，会定期更新，文章中的代码也在这个项目中，欢迎大家关注。

6. 参考

  1. LimitedBox class
  2. Offstage class
  3. OverflowBox class
  4. SizedBox class

原文地址：https://www.cnblogs.com/holy-loki/p/9735059.html

时间： 2024-11-08 21:43:38

Flutter 布局（五）- LimitedBox、Offstage、OverflowBox、SizedBox详解的相关文章

一步一步学会puppet(五)--配置文件和常用命令详解

这篇博文主要解析了puppet的配置文件和常用命令,以备以后查阅: =================================================================== 1 配置文件 1.1 组织结构 2 常用命令 2.1 常用命令 2.2 各类命令详解 2.3 帮助类命令 =================================================================== 1 配置文件 1.1 组织结构 配置文件位于/etc/

第五章 MVC之Bundle详解

一.简述 Bundle,英文原意就是捆.收集.归拢.在MVC中的Bundle技术,也就是一个对css和js文件的捆绑压缩的技术. 它的用处: 将多个请求捆绑为一个请求,减少服务器请求数 压缩javascript,css等资源文件,减小网络带宽,提升性能 使用Bundle技术,并且拥有缓存功能,同时也可以对资源文件进行一定的模块化管理,可使用正则对需要的文件进行过滤匹配,也可以使用cdn文件 二.技术详解 1.怎么开启bundle 在项目的App_Start文件夹中,会有一个BundleConfi

第五章 全局大喇叭，详解广播机制

我们晓得的是网络通信中一个IP地址段最大的IP地址为广播地址.例如,某个网路的IP地址为192.168.0.XXX,他的子网掩码为255.255.255.0,那么这个网络的IP地址为192.168.0.255. Android也有相应的广播机制,本章将详细介绍相关细节. 1.广播机制简介 Android的广播机制由广播.广播接收器(Broadcast Receiver)和广播发送的内容组成: 每个应用程序都可以对自己感兴趣的广播进行注册,这意味着该程序只会接受自己"感兴趣"的广播内容:

hibernate(五) hibernate一对一关系映射详解

序言 之前讲解了一对多(单向.双向).多对多(双向),今天就讲解一下最后一个关系,一对一. 心情不错.状态也挺好的,赶紧写一篇博文造福一下大家把. --WZY 一.一对一关系的概述 一对一关系看起来简单,其实也挺复杂的.其中关系就包含了四种,单向双向和主键关联外键关联. 什么意思呢,也就是包含了单向一对一主键关联.双向一对一主键关联,单向一对一外键关联,双向一对一外键关联, 这四种中,单双向就不用在说了把,就是看你业务需求来去设置是否是单双向,而外键关联也很简单,前面的一对多和多对多度是依靠外键

Storm 系列（五）—— Storm 编程模型详解

一.简介 下图为 Strom 的运行流程图,在开发 Storm 流处理程序时,我们需要采用内置或自定义实现 spout(数据源) 和 bolt(处理单元),并通过 TopologyBuilder 将它们之间进行关联,形成 Topology. 二.IComponent接口 IComponent 接口定义了 Topology 中所有组件 (spout/bolt) 的公共方法,自定义的 spout 或 bolt 必须直接或间接实现这个接口. public interface IComponent ex

【Redis】Redis学习（五） Redis cluster模式详解

一般情况下,使用主从模式加Sentinal监控就可以满足基本需求了,但是当数据量过大一个主机放不下的时候,就需要对数据进行分区,将key按照一定的规则进行计算,并将key对应的value分配到指定的Redis实例上,这样的模式简称Redis集群. Redis分区也称作Redis分片,或者Redis集群,这都是一个意思. 一.Redis集群 1.1 Redis集群的搭建 集群方面的教程也是有很多的,找了几个觉得还不错的,有需要的可以去看看: 有个入门教程挺不错的,可以看一看:http://doc.

五 mybatis的SqlMapConfig.xml详解

SqlMapConfig.xml 1 <?xml version="1.0" encoding="UTF-8" ?> 2 <!DOCTYPE configuration 3 PUBLIC "-//mybatis.org//DTD Config 3.0//EN" 4 "http://mybatis.org/dtd/mybatis-3-config.dtd"> 5 <configuration>

文件和目录详解(五)---chmod和fchmod函数详解

chmod和fchmod函数分别可以用来修改文件和一个已经打开的文件的文件权限位. ======================================================= 函数原型: 函数参数: path:要操作的文件路径名 fd:要操作的文件描述符 mode:要修改的文件权限 返回值: 调用成功时返回 0 调用失败时返回 -1 ======================================================= 参数mode可以为下列宏的组合

Handler详解系列(五)——Handler的post()方法详解

MainActivity如下: package cc.testui1; import android.os.Bundle; import android.os.Handler; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.TextView; import android.app.Activity; /*