本文对Flutter的29种布局控件进行了总结分类,讲解一些布局上的优化策略,以及面对具体的布局时,如何去选择控件. 1. 系列文章 Flutter 布局详解 Flutter 布局(一)- Container详解 Flutter 布局(二)- Padding.Align.Center详解 Flutter 布局(三)- FittedBox.AspectRatio.ConstrainedBox详解 Flutter 布局(四)- Baseline.FractionallySizedBox.Intrin…

本文主要介绍Flutter布局中的LimitedBox.Offstage.OverflowBox.SizedBox四种控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. LimitedBox A box that limits its size only when it's unconstrained. 1.1 简介 LimitedBox,通过字面意思,也可以猜测出这个控件的作用,是限制类型的控件.这种类型的控件前面也介绍了不少了,这个是对最大宽高进行限制的控件. 1.2 布局行…

本文主要介绍Flutter布局中的FittedBox.AspectRatio.ConstrainedBox,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. FittedBox Scales and positions its child within itself according to fit. 1.1 简介 按照其官方的介绍,它主要做了两件事情,缩放(Scale)以及位置调整(Position). FittedBox会在自己的尺寸范围内缩放并且调整child位置,使得chil…

本文主要介绍Flutter布局中的Baseline.FractionallySizedBox.IntrinsicHeight.IntrinsicWidth四种控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Baseline A widget that positions its child according to the child's baseline. 1.1 简介 Baseline这个控件,做过移动端开发的都会了解过,一般文字排版的时候,可能会用到它.它的作用很简单,…

本文主要介绍Flutter布局中的Padding.Align以及Center控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Padding A widget that insets its child by the given padding. 1.1 简介 Padding在Flutter中用的也挺多的,作为一个基础的控件,功能非常单一,给子节点设置padding属性.写过其他端的都了解这个属性,就是设置内边距属性,内边距的空白区域,也是widget的一部分. Flutter…

本文主要介绍了Flutter布局相关的内容,对相关知识点进行了梳理,并从实际例子触发,进一步讲解该如何去进行布局. 1. 简介 在介绍Flutter布局之前,我们得先了解Flutter中的一些布局相关的特性. 1.1 边界约束(box constraints) box constraints有人也翻译为盒约束.箱约束,我个人还是觉得边界约束可能更直观一些. Flutter中的边界约束,是指widget可以按照指定限定条件,来决定自身如何占用布局空间.Flutter借鉴了很多React相关的东西,…

本文主要介绍Flutter布局中的ListBody.ListView.CustomMultiChildLayout控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. ListBody A widget that arranges its children sequentially along a given axis. 1.1 简介 ListBody是一个不常直接使用的控件,一般都会配合ListView或者Column等控件使用.ListBody的作用是按给定的轴方向,按照顺序排…

本文主要介绍Flutter布局中的Row.Column控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Row A widget that displays its children in a horizontal array. 1.1 简介 在Flutter中非常常见的一个多子节点控件,将children排列成一行.估计是借鉴了Web中Flex布局,所以很多属性和表现,都跟其相似.但是注意一点,自身不带滚动属性,如果超出了一行,在debug下面则会显示溢出的提示. 1.2 布…

本文主要介绍Flutter布局中的Stack.IndexedStack.GridView控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Stack A widget that positions its children relative to the edges of its box. 1.1 简介 Stack可以类比web中的absolute,绝对布局.绝对布局一般在移动端开发中用的较少,但是在某些场景下,还是有其作用.当然,能用Stack绝对布局完成的,用其他控件组合也…

本文主要介绍Flutter布局中的Flow.Table.Wrap控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Flow A widget that implements the flow layout algorithm. 1.1 简介 Flow按照解释的那样,是一个实现流式布局算法的控件.流式布局在大前端是很常见的布局方式,但是一般使用Flow很少,因为其过于复杂,很多场景下都会去使用Wrap. 1.2 布局行为 Flow官方介绍是一个对child尺寸以及位置调整非常高效…

本文主要介绍Flutter布局中的SizedOverflowBox.Transform.CustomSingleChildLayout三种控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. SizedOverflowBox A widget that is a specific size but passes its original constraints through to its child, which will probably overflow. 1.1 简介 光看…

老孟导读:此篇文章非常详细的讲解了 Flutter 布局系统的工作原理. 翻译自:https://itnext.io/flutter-layout-system-overview-c70bbe9ba909?source=bookmarks---------17------------------ 最近,我决定专注于Flutter基础知识.这次,我试图更好地理解"布局系统的工作原理",并回答以下问题: 我的小部件的尺寸看起来不合适,怎么回事? 我只想将Widget放置在特定位置,但是没有…

本文主要介绍Flutter中非常常见的Container,列举了一些实际例子介绍如何使用. 1. 简介 A convenience widget that combines common painting, positioning, and sizing widgets. Container在Flutter中太常见了.官方给出的简介,是一个结合了绘制(painting).定位(positioning)以及尺寸(sizing)widget的widget. 可以得出几个信息,它是一个组合的widge…

弹性布局(Flex) 弹性布局允许子组件按照一定比例来分配父容器空间.弹性布局的概念在其它UI系统中也都存在,如H5中的弹性盒子布局,Android中的FlexboxLayout等.Flutter中的弹性布局主要通过Flex和Expanded来配合实现. Flex Flex组件可以沿着水平或垂直方向排列子组件,如果你知道主轴方向,使用Row或Column会方便一些,因为Row和Column都继承自Flex,参数基本相同,所以能使用Flex的地方基本上都可以使用Row或Column.Flex本身功…

import 'package:flutter/material.dart'; class LayoutDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ // aspectratio会自动填充父元素宽度,根据设定的宽高比自动扩充高度…

前言 层叠布局,即子组件可以根据距父容器四个角的位置来确定自身的位置.绝对定位运行子组件堆叠起来,即按照代码中声明的顺序. Flutter中使用Stack和Positioned这两个组件来配合实现绝对定位,Stack允许子组件堆叠,而Positioned用于根据Stack的四个角来确定子组件的位置. 接口描述 Stack({ Key key, // 此参数决定如何去对齐没有定位(没有使用Positioned)或部分定位的子组件. // 所谓部分定位,在这里特指没有在某一个轴上定位:left.ri…

前言 把超出屏幕显示范围会自动折行的布局称为流式布局.Flutter中通过Wrap和Flow来支持流式布局,将Row换成Wrap后溢出部分则会自动折行. Wrap 接口描述 Wrap({ Key key, this.direction = Axis.horizontal, this.alignment = WrapAlignment.start, // 主轴方向子widget的间距 this.spacing = 0.0, // 纵轴方向的对齐方式 this.runAlignment = Wrap…

前言 弹性布局允许子组件按照一定比例来分配父容器空间,Flutter中的弹性布局主要通过Flex和Expanded来配合实现. Flex Flex组件可以沿着水平或垂直方向排列子组件,如果你知道主轴方向,使用Row或Column会方便一些,因为Row和Column都继承自Flex,参数基本相同,所以能使用Flex的地方基本上都可以使用Row或Column.Flex本身功能是很强大的,它也可以和Expanded组件配合实现弹性布局.Flex继承自MultiChildRenderObjectWidg…

前言 所谓线性布局,即指沿水平或垂直方向排布子组件.Flutter中通过Row和Column来实现线性布局,并且它们都继承自弹性布局(Flex). 接口描述 Row({ Key key, // 表示子组件在Row所占用的水平空间内对齐方式. // 如果mainAxisSize值为MainAxisSize.min,则此属性无意义,因为子组件的宽度等于Row的宽度. // 只有当mainAxisSize的值为MainAxisSize.max时,此属性才有意义. // MainAxisAlignmen…

先贴出官方文档的关于此布局的描述:“ 一个专门的容器用于可视应用领域(浏览器窗口). Viewport渲染自身到网页的documet body区域, 并自动将自己调整到适合浏览器窗口的大小,在窗口大小发生改变时自动适应大小. 一个页面中只能创建一个Viewport. 任何的Container容器都可以作为一个Viewport 的子组件,开发者使用一个Viewport作为父容器配置布局layout, 并管理他们的大小和位置. Viewports一般使用border layout布局, 如果开发者需…

效果图: import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: A…

MaterialApp 先看下上图的具体用法:1. title:标题2. actions:表示右侧的按钮的动作3. leading:表示左侧的按钮的动作4. flexibleSpace:5. backgroundColor: Colors.red, //导航栏和状态栏的的颜色6. elevation: 10, //阴影的高度7.bottom :导航栏下面显示的widget8.brightness :状态栏的亮度9. iconTheme,左侧图表的样式12. toolbarOpacity: 0.5…

Container 容器 简介一个常用的widget,它结合了常见的绘画,定位和大小调整·该容器首先让child填充绘制,然后再将其他的约束应用于填充范围.·在绘画过程中,容器先应用给定的转换,再绘制装饰以填充的范围,然后绘制child,最后绘制前景,同时填充需要填充的范围·没有child的容器将尽可能的大,除非传入的约束是无限制的.child的大小会被width,height等约束覆盖.基本用法Container 可以结合多种其他widget,每个widget都有自己的布局行为,因此Conta…

Center 居中的布局 只能有一个chlid,但是可以用container包含好多子child,继承自Align. 用于将其子项与其自身对齐,并根据子级的大小自行调整大小. 如果它的尺寸受到约束且[widthFactor]和[heightFactor]为空,则此窗口小部件将尽可能大. 如果维度不受约束且相应的大小因子为null,则窗口小部件将匹配其在该维度中的子项大小(其实就是子view的宽高就是center容器的宽高). 如果尺寸因子为非null,则此center容器的相应尺寸将是子view…

1.mainAxisAlignment:主轴布局方式,column主轴方向是垂直的方向   mainaxis.png 默认值:MainAxisAlignment.start: start ,沿着主轴方向(垂直方向)顶部对齐: end,沿着主轴方向(垂直方向)底部对齐: center,沿着主轴方向(垂直方向)居中对齐: spaceBetween ,沿着主轴方向(垂直方向)平分剩余空间: spaceAround,把剩余空间平分成n份,n是子widget的数量,然后把其中一份空间分成2份,放在第一个c…

Container 类似于HTML中的div标签 import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('代码测试'), centerTitle: true, ), body: Container( alig…

前言 布局类组件都会包含一个或多个子组件,不同的布局类组件对子组件排版(layout)方式不同. 我们知道,Element树才是最终的绘制树,Element树是通过Widget树来创建的(通过Widget.createElement()),Widget其实就是Element的配置数据. 故而,根据Widget是否需要包含子节点可将Widget分为三类,并对应三种Element,如下表: Widget 对应的Element 用途 LeafRenderObjectWidget LeafRenderO…

一.Container 一个空白容器 二.Row 行 mainAxisAlignment  主轴对齐 , CrossAxisAlignment 垂直于主轴对齐 三.Column 列 四.ListView 五.GridView 六.Stack 七.Card 八.ListTile child: new ListTile( leading: new Icon(Icons.cake), title: new Text('轻小说'), subtitle: new Text('标题'), ) 9增加点击事件…

Row 简介 mainAxisAlignment:主轴布局方式,row主轴方向是水平方向 crossAxisAlignment: 交叉轴的布局方式,对于row来说就是垂直方向的布局方式 Row 是一个将其child显示在水平数组的widget ·将其child填充可用的横向水平空间,一行高度是childs的最大高度(即:总是满足传入的垂直约束) ·如果你只有一个child,只需要考虑使用对其或者中间位置,如果多个child,注意扩展水平空间(Expanded),可以将child封装在一个扩展部件…

1.一行内容,发布两边: 效果: Flex( direction: Axis.horizontal, children: <Widget>[ Expanded( flex: , child: Text("修改密码") ), Expanded( flex: , child:Align( alignment: Alignment.centerRight, child: Icon(Icons.home), ) ), ], )…