相对布局怎么修改组件定位_Flutter—布局系统概述

老孟导读&＃xff1a;此篇文章非常详细的讲解了 Flutter 布局系统的工作原理。

翻译自&＃xff1a;https://itnext.io/flutter-layout-system-overview-c70bbe9ba909?source&＃61;bookmarks---------17------------------

最近&＃xff0c;我决定专注于Flutter基础知识。这次&＃xff0c;我试图更好地理解“布局系统的工作原理”&＃xff0c;并回答以下问题&＃xff1a;

• 我的小部件的尺寸看起来不合适&＃xff0c;怎么回事&＃xff1f;
• 我只想将Widget放置在特定位置&＃xff0c;但是没有任何属性可以控制它&＃xff0c;为什么呢&＃xff1f;
• 我一直看到诸如BoxConstraints&＃xff0c;RenderBox和Size之类的术语。它们之间有什么关系&＃xff1f;
• 对布局系统如何工作有一个大概的了解&＃xff1f;

本文并不意味着对以上所有内容进行深入而详细的描述。但是&＃xff0c;我们将对最重要的内容进行很好的概述&＃xff0c;力图将一切可视化。

“两个阶段” 布局系统和约束

首先&＃xff0c;小部件是Flutter SDK的构建块&＃xff0c;但它们不负责将其自身绘制到屏幕中。每个小部件都与负责此操作的RenderBox对象相关联。这些框是2D直角坐标系&＃xff0c;其大小表示为距原点的偏移。每个RenderBox还将与一个BoxConstraints对象相关联&＃xff0c;该对象包含四个值&＃xff1a;最大|最小宽度和最大|最小高度。RenderBox可以选择具有所需的任何大小&＃xff0c;但它必须遵守这些值/约束。小部件的大小/位置完全取决于这些RenderBox的属性。

原文&＃xff1a;The same way Widgets build a Widget three, RenderBoxes make a render three.

我觉得three可能写错了&＃xff0c;应该是tree&＃xff0c;译文&＃xff1a;以同样的方式小部件生成 组件树&＃xff0c;RenderBoxes生成渲染树。

我们可以将Flutter的布局系统视为两阶段系统。在第一个阶段中&＃xff0c;framework 以递归地方式沿着渲染树 把BoxConstraints传递给子组件。它为父组件提供了一种方式来调节/增强子组件的尺寸&＃xff0c;并根据需要更新这些限制。换句话说&＃xff0c;这是负责传播约束信息的阶段&＃xff0c;让每个人知道其最大/最小值。

完成后&＃xff0c;第二阶段开始。这次&＃xff0c;每个RenderBox都将其选择的大小传递回其父对象。父级收集所有子级的大小&＃xff0c;然后使用此几何信息将每个子级正确定位在自己的笛卡尔系统中。这个阶段负责确定大小和位置&＃xff0c;在此阶段&＃xff0c;父组件知道每个子组件的大小以及他们的位置。

那么&＃xff0c;这到底意味着什么&＃xff1f;

这意味着父组件有责任定义/限制/约束子组件的尺寸&＃xff0c;并相对于其坐标系进行定位。换句话说&＃xff0c;小部件可以选择其大小&＃xff0c;但是它必须始终遵守从其父级收到的约束。此外&＃xff0c;小部件不知道其在屏幕上的位置&＃xff0c;但其父级知道。

如果您对小部件的大小或位置有疑问&＃xff0c;请尝试查看(更新)其父组件。

Example

好的&＃xff0c;让我们将所有内容可视化&＃xff0c;尝试通过示例了解正在发生的事情。但是在此之前&＃xff0c;以下是一些在调试约束时可能有用的术语&＃xff0c;

下面的术语未翻译&＃xff0c;因为这些术语本身比译文更好理解&＃xff1a;

• If *max(w|h) &＃61; min (w|h)*, that is *tightly* constrained.
• If *min(w|h) &＃61; 0*, we have a *loose* constraint.
• If *max(w|h) !&＃61; infinite*, the constraint is *bounded.*
• If *max(w|h) &＃61; infinite*, the constraint is *unbounded.*
• If *min(w|h) &＃61; infinite*, is just said to be *infinite*

我们将使用的是初始应用模板的修改版本。通常&＃xff0c;您可以通过两种简单的方法来检查窗口小部件RenderBox及其属性&＃xff1a;

1. 通过代码执行&＃xff1a;我们可以使用LayoutBuilder在布局系统第一阶段拦截BoxConstraints传播&＃xff0c;并检查约束。然后&＃xff0c;在第二阶段完成后&＃xff0c;我们使用键来获取小部件的RenderBox并能够检查Size&＃xff0c;Position。

2. 或使用DevTools窗口小部件检查器

   

import &＃39;package:flutter/material.dart&＃39;;GlobalKey _keyMyApp &＃61; GlobalKey();GlobalKey _keyMaterialApp &＃61; GlobalKey();GlobalKey _keyHomePage &＃61; GlobalKey();GlobalKey _keyScaffold &＃61; GlobalKey();GlobalKey _keyAppbar &＃61; GlobalKey();GlobalKey _keyCenter &＃61; GlobalKey();GlobalKey _keyFAB &＃61; GlobalKey();GlobalKey _keyText &＃61; GlobalKey();void printConstraint(String name, BoxConstraints c) { print( &＃39;CONSTRAINT of $name: min(w&＃61;${c.minWidth.toInt()},h&＃61;${c.minHeight.toInt()}) max(w&＃61;${c.maxWidth.toInt()},h&＃61;${c.maxHeight.toInt()})&＃39;, );}void printSizes() { printSize(&＃39;MyApp&＃39;, _keyMyApp); printSize(&＃39;MaterialApp&＃39;, _keyMaterialApp); printSize(&＃39;HomePage&＃39;, _keyHomePage); printSize(&＃39;Scaffold&＃39;, _keyScaffold); printSize(&＃39;Appbar&＃39;, _keyAppbar); printSize(&＃39;Center&＃39;, _keyCenter); printSize(&＃39;Text&＃39;, _keyText); printSize(&＃39;FAB&＃39;, _keyFAB);}void printSize(String name, GlobalKey key) { final RenderBox renderBox &＃61; key.currentContext.findRenderObject(); final size &＃61; renderBox.size; print("SIZE of $name: w&＃61;${size.width.toInt()},h&＃61;${size.height.toInt()}");}void printPositions() { printPosition(&＃39;MyApp&＃39;, _keyMyApp); printPosition(&＃39;MaterialApp&＃39;, _keyMaterialApp); printPosition(&＃39;HomePage&＃39;, _keyHomePage); printPosition(&＃39;Scaffold&＃39;, _keyScaffold); printPosition(&＃39;Appbar&＃39;, _keyAppbar); printPosition(&＃39;Center&＃39;, _keyCenter); printPosition(&＃39;Text&＃39;, _keyText); printPosition(&＃39;FAB&＃39;, _keyFAB);}void printPosition(String name, GlobalKey key) { final RenderBox renderBox &＃61; key.currentContext.findRenderObject(); final position &＃61; renderBox.localToGlobal(Offset.zero); print("POSITION of $name: $position ");}void main() { runApp(LayoutBuilder( builder: (context, constraints) { printConstraint(&＃39;MyApp&＃39;, constraints); return MyApp(); }, ));}class MyApp extends StatelessWidget { &＃64;override Widget build(BuildContext context) { return LayoutBuilder( key: _keyMyApp, builder: (context, constraints) { printConstraint(&＃39;MaterialApp&＃39;, constraints); return MaterialApp( key: _keyMaterialApp, title: &＃39;Flutter Demo&＃39;, theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: LayoutBuilder( builder: (context, constraints) { printConstraint(&＃39;HomePage&＃39;, constraints); return HomePage( key: _keyHomePage, title: &＃39;Flutter Demo Home Page&＃39;, ); }, ), ); }, ); }}class HomePage extends StatefulWidget { HomePage({Key key, this.title}) : super(key: key); final String title; &＃64;override _HomePageState createState() &＃61;> _HomePageState();}class _HomePageState extends State { int _counter &＃61; 0; void _incrementCounter() { setState(() { _counter&＃43;&＃43;; }); } &＃64;override void initState() { WidgetsBinding.instance.addPostFrameCallback(_afterLayout); super.initState(); } void _afterLayout(_) { printSizes(); printPositions(); } &＃64;override Widget build(BuildContext context) { return LayoutBuilder(builder: (context, constraints) { printConstraint(&＃39;Scaffold&＃39;, constraints); return Scaffold( backgroundColor: Colors.purple, key: _keyScaffold, appBar: AppBar( key: _keyAppbar, title: Text(widget.title), ), body: LayoutBuilder( builder: (context, constraints) { printConstraint(&＃39;Center&＃39;, constraints); return Center( key: _keyCenter, child: LayoutBuilder(builder: (context, constraints) { printConstraint(&＃39;Text&＃39;, constraints); return Text( &＃39;You have pushed the button this many times:&＃39;, key: _keyText, style: TextStyle(color: Colors.white), ); }), ); }, ), floatingActionButton: LayoutBuilder( builder: (context, constraints) { printConstraint(&＃39;FAB&＃39;, constraints); return FloatingActionButton( key: _keyFAB, onPressed: printSizes, tooltip: &＃39;Increment&＃39;, child: Icon(Icons.add), ); }, ), ); }); }}

让我们一步一步来看看发生了什么(在这里我们将忽略LayoutBuilders)。

在我们的示例中发生的第一件事是执行runApp(..)。此函数检查屏幕当前大小(在我们的示例中为392&＃xff1a;759)&＃xff0c;然后创建一个BoxConstraints对象&＃xff0c;其中包含将发送到我们的第一个小部件(MyApp)的约束。注意&＃xff0c;max | min的宽度和高度都相等&＃xff1b;因此&＃xff0c;runApp使用了严格的约束-通过这样做&＃xff0c;MyApp除了选择屏幕上的可用空间外&＃xff0c;在选择其大小时将别无选择。

然后将约束向下传播到Widget树。MyApp&＃xff0c;MaterialApp&＃xff0c;HomePage和Scaffold都被告知相同的严格约束。因此&＃xff0c;所有人将被迫填满整个屏幕。每个小部件都有机会向其子项通知不同的BoxConstraints(仍然尊重已收到的子项)。但是&＃xff0c;在这种情况下&＃xff0c;他们选择不这样做。

现在事情开始变得越来越有趣。Scaffold告知AppBar有关必须使用的BoxConstraints的信息&＃xff0c;但是&＃xff0c;这一次&＃xff0c;它使用了宽松的约束(min h &＃61; 0)。它使AppBar有机会选择所需的任何高度&＃xff0c;但仍必须使用width &＃61; 390。

AppBar是一种特殊的小部件&＃xff0c;称为PreferredSizeWidget。这种类型的小部件不会对其子级施加任何约束。如果尝试使用LayoutBuilder获取Title的约束&＃xff0c;则会出现错误。而是&＃xff0c;AppBar以首选/默认大小响应Scaffold&＃xff1a;高度&＃61; 80&＃xff0c;宽度&＃61; 392(受接收到的约束的约束)

获得AppBar的大小后&＃xff0c;Scaffold继续下一个子项&＃xff1a;Center

好的&＃xff0c;这里发生了很多事情。让我们尝试了解&＃xff1a;

1. Scaffold告知Center其约束&＃xff0c;让其选择在 0
2. Center转到其子组件“Text”&＃xff0c;转发相同的约束。
3. Text选择一个足以显示其数据的大小(279&＃xff1a;16)&＃xff0c;然后回复Center。
4. 借助手上的几何信息(大小)&＃xff0c;Center可以在其笛卡尔系统内正确定位文本。作为父母&＃xff0c;Center有权选择其子组件位置&＃xff0c;在这种情况下&＃xff0c;它决定将其居中。

流程继续&＃xff1a;

1. 然后&＃xff0c;Center为自己选择一个大小&＃xff0c;而不是仅选择一个“足够”的大小(如“Text”一样)&＃xff0c;而是决定尽可能大&＃xff0c;因此受到了限制。
2. Scaffold收到Center所需的尺寸&＃xff0c;并且流程继续向其最后一个孩子&＃xff1a;FAB
3. FAB收到约束&＃xff0c;然后将其首选大小返回给Scaffold(56:56)
4. 最后&＃xff0c;Scaffold还具有将每个孩子都放置在其笛卡尔系统内所需的所有几何信息。

最后&＃xff0c;对Scaffold以上的所有小部件重复该过程&＃xff1a;

1. Size信息继续沿渲染树传播。
2. 每个小部件都使用此信息将每个孩子放置在笛卡尔系统内。
3. Scaffold回复HomePage&＃xff0c;HomePage回复MaterialApp&＃xff0c;MaterialApp回复MyApp。直到最后再次到达Main。
4. Main获取此“最终”窗口小部件&＃xff0c;并将其最终绑定到屏幕中。

RenderBox树最终绑定在屏幕上。我们有一个正在运行的应用程序。

有趣的事情要记住

• 小部件不知道其在屏幕上的位置&＃xff1b;它的父组件才知道。
• 小部件可以选择想要的大小&＃xff0c;但必须根据其父级的限制。
• 约束向下传播&＃xff0c;而大小向上传播。
• 尝试了解约束条件&＃xff0c;它们可能在以后有用。

我希望所有这些都可以帮助您更好地了解Flutter布局系统的工作方式。

• 【Flutter组件终结篇】332个组件 658页PDF

• 【Flutter 实战】17篇动画系列文章带你走进自定义动画

• 2020年20个Flutter最漂亮的UI库和项目

• Flutter 中渐变的高级用法