flutter 布局原理

最新推荐文章于 2024-05-12 19:15:27 发布
最新推荐文章于 2024-05-12 19:15:27 发布
阅读量535 收藏 4
点赞数 1
分类专栏： Android Android开发 文章标签： flutter android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YoungOne2333/article/details/128531940
版权

刚开始接触flutter的时候，Container组件是用得最多的。它就像HTML中的div一样普遍，专门用来布局页面的。

但是使用Container嵌套布局的时候，经常出现一些令人无法理解的问题。就如下面代码，在一个固定的容器中，子组件却铺满了全屏。

/// 例一
@override
Widget build(BuildContext context) {
   return Container(
     width: 300,
     height: 300,
     color: Colors.amber,
     child: Container(width: 50, height: 50, color: Colors.red,),
  );
}

然后要加上alignment属性，子组件正常显示了，但容器还是铺满全屏。

/// 例二
@override
Widget build(BuildContext context) {
   return Container(
     width: 300,
     height: 300,
     color: Colors.amber,
     alignment: Alignment.center,
     child: Container(width: 50, height: 50, color: Colors.red,),
  );
}

而在容器外层添加一个Scaffold组件，它就正常显示了。

/// 例三
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      width: 300,
      height: 300,
      color: Colors.amber,
      alignment: Alignment.center,
      child: Container(width: 50, height: 50, color: Colors.red,),
    ),
  );
}

这一切的怪异行为困扰了我很久，直到我深入了flutter布局的学习，才渐渐解开这些疑惑。

1、flutter的widget类型

flutter的widget可以分为三类，组合类ComponentWidget、代理类ProxyWidget和绘制类RenderObjectWidget

组合类：如Container、Scaffold、MaterialApp还有一系列通过继承StatelessWidget和StatefulWidget的类。组合类是我们开发过程中用得最多的组件。

代理类：InheritedWidget，功能型组件，它可以高效快捷的实现共享数据的跨组件传递。如常见的Theme、MediaQuery就是InheritedWidget的应用。

绘制类：屏幕上看到的UI几乎都会通过RenderObjectWidget实现。通过继承它，可以进行界面的布局和绘制。如Align、Padding、ConstrainedBox等都是通过继承RenderObjectWidget，并通过重写createRenderObject方法来创建RenderObject对象，实现最终的布局（layout）和绘制（paint）。

2、Container是个组合类

显而易见Container继承StatelessWidget，它是一个组合类，同时也是一个由DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的多功能容器。可以通过查看Container类，看出它实际就是通过不同的参数判断，再进行组件的层层嵌套来实现的。

@override
Widget build(BuildContext context) {
  Widget? current = child;

  if (child == null && (constraints == null || !constraints!.isTight)) {
    current = LimitedBox(
      maxWidth: 0.0,
      maxHeight: 0.0,
      child: ConstrainedBox(constraints: const BoxConstraints.expand()),
    );
  } else if (alignment != null) {
    current = Align(alignment: alignment!, child: current);
  }

  final EdgeInsetsGeometry? effectivePadding = _paddingIncludingDecoration;
  if (effectivePadding != null) {
    current = Padding(padding: effectivePadding, child: current);
  }

  if (color != null) {
    current = ColoredBox(color: color!, child: current);
  }

  if (clipBehavior != Clip.none) {
    assert(decoration != null);
    current = ClipPath(
      clipper: _DecorationClipper(
        textDirection: Directionality.maybeOf(context),
        decoration: decoration!,
      ),
      clipBehavior: clipBehavior,
      child: current,
    );
  }

  if (decoration != null) {
    current = DecoratedBox(decoration: decoration!, child: current);
  }

  if (foregroundDecoration != null) {
    current = DecoratedBox(
      decoration: foregroundDecoration!,
      position: DecorationPosition.foreground,
      child: current,
    );
  }

  if (constraints != null) {
    current = ConstrainedBox(constraints: constraints!, child: current);
  }

  if (margin != null) {
    current = Padding(padding: margin!, child: current);
  }

  if (transform != null) {
    current = Transform(transform: transform!, alignment: transformAlignment, child: current);
  }

  return current!;
}

组合类基本不参与ui的绘制，都是通过绘制类的组合来实现功能。

3、flutter布局约束

flutter中有两种布局约束BoxConstraints盒约束和SliverConstraints线性约束，如Align、Padding、ConstrainedBox使用的是盒约束。

BoxConstraints盒约束是指flutter框架在运行时遍历整个组件树，在这过程中 「向下传递约束，向上传递尺寸」，以此来确定每个组件的尺寸和大小。

BoxConstraints类由4个属性组成，最小宽度minWidth、最大宽度maxWidth、最小高度minHeight、最大高度maxHeight。

BoxConstraints({
    this.minWidth,
    this.maxWidth,
    this.minHeight,
    this.maxHeight,
});

根据这4个属性的变化，可以分为“紧约束（tight）”、“松约束（loose）”、“无界约束”、“有界约束”。

紧约束：最小宽（高）度和最大宽（高）度值相等，此时它是一个固定宽高的约束。

BoxConstraints.tight(Size size)
    : minWidth = size.width,
      maxWidth = size.width,
      minHeight = size.height,
      maxHeight = size.height;

松约束：最小宽（高）值为0，最大宽（高）大于0，此时它是一个约束范围。

BoxConstraints.loose(Size size)
    : minWidth = 0.0,
      maxWidth = size.width,
      minHeight = 0.0,
      maxHeight = size.height;

无界约束：最小宽（高）和最大宽（高）值存在double.infinity（无限）。

BoxConstraints.expand({double? width, double? height}) 
: minWidth = width ?? double.infinity,
     maxWidth = width ?? double.infinity,
     minHeight = height ?? double.infinity,
     maxHeight = height ?? double.infinity;

有界约束：最小宽（高）和最大宽（高）值均为固定值。

BoxConstraints(100, 300, 100, 300)

4、Container布局行为解惑

了解了BoxConstraints布局约束，回到本文最开始的问题。

/// 例一
@override
Widget build(BuildContext context) {
   return Container(
     width: 300,
     height: 300,
     color: Colors.amber,
     child: Container(width: 50, height: 50, color: Colors.red,),
  );
}

例一中，两个固定宽高的Container，为什么子容器铺满了全屏？

根据BoxConstraints布局约束，遍历整个组件树，最开始的root是树的起点，它向下传递的是一个紧约束。因为是移动设备，root即是屏幕的大小，假设屏幕宽414、高896。于是整个布局约束如下：

这里有个问题，就是Container分明已经设置了固定宽高，为什么无效？

因为父级向下传递的约束，子组件必须严格遵守。这里Container容器设置的宽高超出了父级的约束范围，就会自动被忽略，采用符合约束的值。

例一两上Container都被铺满屏幕，而最底下的红色Container叠到了最上层，所以最终显示红色。

/// 例二
@override
Widget build(BuildContext context) {
   return Container(
     width: 300,
     height: 300,
     color: Colors.amber,
     alignment: Alignment.center,
     child: Container(width: 50, height: 50, color: Colors.red,),
  );
}

例二也同样可以根据布局约束求证，如下图：

这里Container为什么是ConstrainedBox和Align组件？前面说过Container是一个组合组件，它是由多个原子组件组成的。根据例二，它是由ConstrainedBox和Align嵌套而成。

Align提供给子组件的是一个松约束，所以容器自身设置50宽高值是在合理范围的，因此生效，屏幕上显示的就是50像素的红色方块。ConstrainedBox受到的是紧约束，所以自身的300宽高被忽略，显示的是铺满屏幕的黄色块。

/// 例三
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      width: 300,
      height: 300,
      color: Colors.amber,
      alignment: Alignment.center,
      child: Container(width: 50, height: 50, color: Colors.red,),
    ),
  );
}

例三中Scaffold向下传递的是一个松约束，所以黄色Container的宽高根据自身设置的300，在合理的范围内，有效。Container再向下传递的也是松约束，最终红色Container宽高为50。

这里还有个问题，怎么确定组件向下传递的是紧约束还是松约束？

这就涉及到组件的内部实现了，这里通过Align举个例。

Align是一个绘制组件，它能够进行界面的布局和绘制，这是因为Align的继承链为:

Align -> SingleChildRenderObjectWidget -> RenderObjectWidget

Align需要重写createRenderObject方法，返回RenderObject的实现，这里Align返回的是RenderPositionedBox，所以核心内容就在这个类中

class Align extends SingleChildRenderObjectWidget {
    /// ...
    @override
    RenderPositionedBox createRenderObject(BuildContext context) {
      return RenderPositionedBox(
        alignment: alignment,
        widthFactor: widthFactor,
        heightFactor: heightFactor,
        textDirection: Directionality.maybeOf(context),
      );
    }
    /// ...
}

而RenderPositionedBox类中，重写performLayout方法，该方法用于根据自身约束条件，计算出子组件的布局，再根据子组件的尺寸设置自身的尺寸，形成一个至下而上，由上到下的闭环，最终实现界面的整个绘制。

RenderPositionedBox -> RenderAligningShiftedBox -> RenderShiftedBox -> RenderBox

class RenderPositionedBox extends RenderAligningShiftedBox {
    /// ...
    @override
    void performLayout() {
      final BoxConstraints constraints = this.constraints; // 自身的约束大小
      final bool shrinkWrapWidth = _widthFactor != null || constraints.maxWidth == double.infinity;
      final bool shrinkWrapHeight = _heightFactor != null || constraints.maxHeight == double.infinity;
      /// 存在子组件
      if (child != null) {
        /// 开始布局子组件
        child!.layout(constraints.loosen(), parentUsesSize: true);
        /// 根据子组件的尺寸设置自身尺寸
        size = constraints.constrain(Size(
          shrinkWrapWidth ? child!.size.width * (_widthFactor ?? 1.0) : double.infinity,
          shrinkWrapHeight ? child!.size.height * (_heightFactor ?? 1.0) : double.infinity,
        ));
        /// 计算子组件的位置
        alignChild();
      } else {
        /// 不存在子组件
        size = constraints.constrain(Size(
          shrinkWrapWidth ? 0.0 : double.infinity,
          shrinkWrapHeight ? 0.0 : double.infinity,
        ));
      }
    }
    /// ...
}

根据Align中performLayout方法的实现，可以确定该组件最终会给子组件传递一个怎么样的约束。

/// constraints.loosen提供的是一个松约束
child!.layout(constraints.loosen(), parentUsesSize: true);

/// loosen方法
BoxConstraints loosen() {
  assert(debugAssertIsValid());
  /// BoxConstraints({double minWidth = 0.0, double maxWidth = double.infinity, double minHeight = 0.0, double maxHeight = double.infinity})
  return BoxConstraints(
    maxWidth: maxWidth,
    maxHeight: maxHeight,
  );
}

其它绘制类的组件基本跟Align大同小异，只要重点看performLayout方法的实现，即可判断出组件提供的约束条件。

总结

1、flutter的widget分为，组合类、代理类和绘制类。

2、Container是一个组合类，由DecoratedBox、ConstrainedBox、Transform、Padding、Align等绘制组件组合而成。

3、flutter中有两种布局约束BoxConstraints盒约束和SliverConstraints线性约束。

4、BoxConstraints的约束原理是： 「向下传递约束，向上传递尺寸」。

5、BoxConstraints的约束类型为：紧约束、松约束、无界约束、有界约束。

6、判断一个绘制组件的约束行为可以通过查看performLayout方法中layout传入的约束值。

最后，既然都看到这里了，就请您高抬贵手点个赞呗～。您的鼓励，是我创作的最大动力！

作者：半点橘色
链接：https://juejin.cn/post/7183549888406224955

最后

如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。

如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。

在这里插入图片描述
相对于我们平时看的碎片化内容，这份笔记的知识点更系统化，更容易理解和记忆，是严格按照知识体系编排的。

全套视频资料：

一、面试合集
在这里插入图片描述
二、源码解析合集

在这里插入图片描述
三、开源框架合集

在这里插入图片描述
欢迎大家一键三连支持，若需要文中资料，直接点击文末CSDN官方认证微信卡片免费领取↓↓↓

嘴巴吃糖了
关注
专栏目录
6、Flutter布局原理：自定义布局
qq_31556299的博客
09-03 221
允许你自定义多个子部件的布局。可以实现高度定制化的布局，其中每个子部件的位置和大小可以根据自定义算法来确定。以下是使用CustomMultiChildLayout构造函数Key?key,})delegate参数是一个必需的参数，它接受一个自定义的布局委托对象，该委托对象负责计算子部件的位置和大小。children参数是一个可选的子部件列表，你可以在其中放置需要进行自定义布局的子部件。创建自定义布局委托要使用，你需要创建一个继承自的自定义布局委托类。
5、Flutter布局原理 ：为什么我的部件不听话
qq_31556299的博客
09-03 151
1. 位置、大小飘忽不定？ 为什么我的Widget位置/大小跟我想象的不一样？一会儿在这，加个child就跑到另外一个地方，或父Widget突然变大或变小了？这TMD该怎么布局啊。 2. 想改变一个Widget的大小，不知如何下手？ 我是从iOS平台转过来的，之前用数字精确定位视图的位置，现在它不给我设置数字的机会。或者使用约束，方便的很... 3. 面对一个页面无从下手？ 本章将从Flutter框架设计者的角度，分析Flutter布局原理
Flutter关于布局
m0_65503310的博客
05-13 1634
简介：布局类组件都会包含一个或多个子组件，不同的布局类组件对子组件排列（layout）方式不同。 线性布局（Row和Column） 所谓线性布局，即指沿水平或垂直方向排列子组件。Flutter 中通过Row和Column来实现线性布局。Row和Column都继承自Flex，我们将在弹性布局一节中详细介绍Flex。 主轴与纵轴 如果布局是沿水平方向，那么主轴就是指水平方向，而纵轴即垂直方向；如果布局沿垂直方向，那么主轴就是指垂直方向，而纵轴就是水平方向。在线性布局中，有两个定义对齐方式的枚举类Main
Flutter进阶篇-布局（Layout）原理
大圣归来圣骑士清欢的博客
06-01 1429
Flutter-布局（Layout）原理
通过例子掌握Flutter的布局原理
Dream It Possible
08-29 951
1、Widget大概可以分为三类组合类、代理类、绘制类2、所有我们在屏幕上看到的UI最终几乎都会通过实现。而中有个方法生成对象，实际负责实际的layout()和paint()。3、Container组件其实只是一个组合类的控件，在其中封装了多个负责绘制的原子组件。4、layout()职能主要是计算控件自身的尺寸和位置偏移5、整个布局过程就是向下约束向上传值的过程tight（紧约束）：当max和min值相等时，这时传递给子类的是一个确定的宽高值。...
Flutter 笔记 | Flutter 核心原理（三）布局（Layout ）过程
川峰的博客
05-30 2782
Layout（布局）过程主要是确定每一个组件的布局信息（大小和位置），Flutter 的布局过程如下： 父节点向子节点传递约束（constraints）信息，限制子节点的最大和最小宽高。 子节点根据约束信息确定自己的大小（size）。 父节点根据特定布局规则（不同布局组件会有不同的布局算法）确定每一个子节点在父节点布局空间中的位置，用偏移 offset 表示。 递归整个过程，确定出每一个节点的大小和位置。 可以看到，组件的大小是由自身决定的，而组件的位置是由父组件决定的。
Flutter 核心原理 - UI 框架（UI Framework）
csdn_aiyang的博客
03-14 2546
Flutter 它提供了一套Dart API，然后在底层通过OpenGL这种跨平台的绘制库（内部会调用操作系统API）实现了一套代码跨多端。由于Dart API也是调用操作系统API，所以它的性能接近原生。
Flutter完整开发实战详解(七、 深入布局原理)
weixin_33775582的博客
03-16 277
作为系列文章的第七篇，本篇主要在前文的基础上，再深入了解 Widget 和布局中的一些常识性问题。 前文： 一、Dart语言和Flutter基础 二、 快速开发实战篇 三、 打包与填坑篇 四、 Redux、主题、国际化 五、 深入探索 六、 深入Widget原理 在第六篇中我们知道了 Widget、Element、RenderObject 三者之间的关系，其中我们最为熟知的 Widget ...
Flutter 基本布局
01-20
本篇博客大致介绍了通过 Flutter 实现一些简单的页面布局，官方的参考文档： https://flutter.cn/docs/get-started/flutter-for/web-devs 首先，项目的入口如下，后面的所有操作都是对 container 变量进行更改 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @
Flutter BoxShadow(绘制阴影)+Container+BoxDecoration
最新发布
2401_84149635的博客
05-12 561
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Flutter 布局详解
weixin_33834075的博客
05-27 377
本文主要介绍了Flutter布局相关的内容，对相关知识点进行了梳理，并从实际例子触发，进一步讲解该如何去进行布局。 1. 简介 在介绍Flutter布局之前，我们得先了解Flutter中的一些布局相关的特性。 1.1 边界约束（box constraints） box constraints有人也翻译为盒约束、箱约束，我个人还是觉得边界约束可能更直观一些。 Flutter中的边界约束，是指wi...
Flutter盒模型布局原理
David糖的博客
10-20 1127
flutter中布局（layout）和绘制（paint）的控制主要在`RenderObject`类中完成。所有flutter中涉及渲染的组件，都通过`RenderObject`完成最终的绘制。我们想要做一些高度自定义的组件（例如ios中的可折叠通知栏），就必须深入了解Flutter的布局和绘制，也就是要读懂这两个类。在理解他们之后，你就会理解大多数Flutter布局组件的原理，例如`Center`、`Row`、`Stack`。下面我们来具体分析一下这两个宝宝。
总结了30个例子之后，我悟到了Flutter的布局原理
2401_83817392的博客
05-10 853
对程序员来说，很多技术的学习都是“防御性”的。也就是说，我们是在为未来学习。我们学习新技术的目的，或是为了在新项目中应用，或仅仅是为了将来的面试。但不管怎样，一定不能“止步不前”，不能荒废掉。!文章以下内容会给出阿里与美团的面试题（答案+解析）、面试题库、Java核心知识点梳理等《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》点击传送门，即可获取！[外链图片转存中…(img-qJ37kklm-1715306443117)]
flutter笔记7：flutter页面布局基础，看完这篇就可以用flutter写APP了
weixin_33910434的博客
03-13 408
不知不觉已经到了第7篇，然而很多萌新玩家可能还是不知道如何堆砌控件，像用CSS一样搭出漂亮的APP界面，我也一样，红红火火恍恍惚惚，直到今天含泪读完Flutter布局基础，仿佛打开了一个全新的世界。 ##基本概念 在flutter中，**一切皆控件！一切皆控件！一切皆控件！**牢牢记住这个概念。Text是控件，Image是控件，Icon是控件，布局脚手架也Scaffold也是控件，甚至整个APP也...
Flutter 布局
08-19 891
Flutter 布局遵循的原则： 深度优先遍历渲染对象树原则 不同的视图实现不同的布局逻辑，布局逻辑决定其子视图的位置 父视图的约束决定子视图的大小 子视图的尺寸也会影响父视图 自己总结，以下是论证： 1、深度优先遍历。我们写Flutter的视图树代码就可以看的出来。也无需赘叙。 2、应用官方文档的的图片 Row和Column 为不同的组件。其内部则实现了对子视图的不同的布...
flutter 布局
XixiziMeng的博客
09-22 627
flutter 布局
Flutter深度解析：Container布局详解
"Flutter布局分析1" 在Flutter开发中，布局是构建用户界面的关键部分。本篇主要关注Flutter中的Container布局，这是一种高度可定制且在日常开发中最常用的布局方式。Container布局因其在小单元布局细节调整上的灵活...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值