5cbb1a305e034c241a872dc83fb5682f
Flutter布局:掌握UI布局优先了解这几点

优先学习基础布局组件库

在 《 Flutter 布局:布局的整体流程 》这篇文章中介绍了布局的原理。但是对于开始开发Flutter应用,最重要的还是需要熟悉Flutter组件,但是Flutter组件非常多,会让人觉得不知道从何学起。其实对于初学者最应该熟悉的是 package:flutter/widgets.dart 库中的组件,里面定义了Flutter最基础的布局组件。而其他类库或者第三方类库可能都是基于它的。


import 'package:flutter/widgets.dart';

通过分类快速熟悉布局组件

为了快速记忆和理解这些基础布局,我们可以进行一个分类:

  1. 线性布局
    Row 在水平方向上排列子widget。
    Column 在垂直方向上排列子widget。

  2. 弹性布局
    Flex 沿着水平或垂直方向排列子组件,与Expanded配合使用,根据Expanded 的 flex 属性的值按比例排列子组件。Row和Column都继承自Flex,所以Expanded同样能作为他们的子组件。
    Expanded 作为 Row、Column和Flex的子组件按比例占用的空间。

  3. 绝对布局
    Stack 可以允许其子widget简单的堆叠在一起。
    Positioned 与Stack配合使用作为Stack子组件可以设置坐标位置。

  4. 流式布局
    Wrap 不像Row和Column在过长时会溢出报错,而wrap可以自动换行,在水平或垂直方向多行显示其子widget。
    Flow 可以自定义实现流式布局算法的widget。

  5. 控制组件位置的控件
    Center 将其子组件居中显示在自身内部的widget。
    Align 将其子组件在各方向上对齐,并可以根据子组件的大小自动调整大小。
    Padding 会给其子组件添加指定的padding填充。

  6. 控制样式的控件
    DecoratedBox 可以在其子组件绘制前(或后)绘制一些装饰(Decoration),如背景、边框、渐变等。

  7. 滚动布局
    SingleChildScrollView 可在垂直或水平方向滚动的,只包含一个子组件的滚动控件。
    ListView 可垂直或水平方向滚动的列表控件。
    GridView 构建一个可滚动的二维网格列表。

  8. 功能性控件
    GestureDetector 是手势识别的组件,可以识别点击、双击、长按事件、拖动、缩放等手势。

由于篇幅受限,不能详解以上各Widget的用法以及库中的所有组件。分类主要是对基础布局组件建立一定的印象和了解。

了解主轴和纵轴的概念

在Flutter布局Widget中引入了一个主轴(MainAxis)纵轴(CrossAxis)的概念。这是由于很多组件既可以水平排列也可以垂直排列,如果是沿水平方向,那么主轴就是指水平方向,纵轴就是垂直方向。如果沿垂直方向,则相反。这样做的好处是当方向改变的时候,其他属性都不需要改变,原来的主轴纵轴属性自动应用到新的方向上。

top Created with Sketch.