Flutter🌞Flutter常用布局控件使用
RowWidget
- Flutter中的
row
控件就是水平控件,它可以让Row
里边的子元素进行水平排列 Row
控件可以分为灵活排列和非灵活排列两种,这两种模式都需要熟练掌握,等经验丰富后可根据需求进行使用
非灵活排列
- 从字面上就可以理解到,不灵活就是根据
Row
子元素的大小,进行布局。如果子元素不足,它会留有空隙,如果子元素超出,它会警告 - 比如现在我们要制作三个按钮,并让三个按钮同时在一排
1 | import 'package:flutter/material.dart'; |
- 这时候你会发现的页面已经有了三个按钮,但这三个按钮并没有充满一行,而是出现了空隙。这就是不灵活横向排列造成的。它根据子元素的大小来进行排列。如果我们想实现充满一行的效果,就要使用灵活水平布局了
灵活排列
- 解决上面有空隙的问题,可以使用
Expanded
来进行解决,也就是我们说的灵活布局。我们在按钮的外边加入Expanded
就可以了
1 | import 'package:flutter/material.dart'; |
- 如果这时候想让中间的按钮大,而两边的按钮保持真实大小,就可以不灵活和灵活模式进行混用,只让中间按钮实现灵活排列,自然会挤占空白区域
1 | import 'package:flutter/material.dart'; |
ColumnWidget
Column
组件即垂直布局控件,能够将子组件垂直排列
对齐方式
- 在
column
里加入三行文字,然后看一下效果
1 | import 'package:flutter/material.dart'; |
- 这时候你会发现文字是以最长的一段文字居中对齐的,看起来很别扭。那如果想让文字以左边开始对齐,只需要加入一个对齐属性
CrossAxisAlignment.star
:居左对齐CrossAxisAlignment.end
:居右对齐CrossAxisAlignment.center
:居中对齐
1 | crossAxisAlignment: CrossAxisAlignment.start, |
主轴/副轴
在设置对齐方式
mainAxisAlignment
属性,意思就是主轴对齐方main
轴:如果你用column
组件,那垂直就是主轴,如果你用Row
组件,那水平就是主轴cross
轴:cross
轴我们称为幅轴,是和主轴垂直的方向。比如Row
组件,那垂直就是幅轴,Column
组件的幅轴就是水平方向的
比如现在我们要把上面的代码,改成垂直方向居中。因为用的是Column组件,所以就是主轴方向,这时候你要用的就是主轴对齐了
1 | import 'package:flutter/material.dart'; |
- 让文字相对于水平方向居中,只要加入
Center
组件就可以轻松解决
1 | import 'package:flutter/material.dart'; |
Expanded
- 比如我们想让中间区域变大,而头部区域和底部根据文字所占空间进行显示。使用灵活和非灵活的混合用法
1 | import 'package:flutter/material.dart'; |
StackWidget
- 水平布局和垂直布局确实很好用,但是有一种情况是无法完成的,比如放入一个图片,图片上再写一些字或者放入容器,这时候Row和Column就力不从心了。Flutter为这种情况准备了
Stack
层叠布局
Alignment
alignment
属性是控制层叠的位置的,建议在两个内容进行层叠时使用。它有两个值X
轴距离和Y
轴距离,值是从0到1的,都是从上层容器的左上角开始算起的CircleAvatar
这个经常用来作头像的,组件里边有个radius
的值可以设置图片的弧度
1 | import 'package:flutter/material.dart'; |
Positioned
Positioned
组件用于超过两个组件的层叠进行定位,Positioned
组件的属性
1 | bottom ---距离层叠组件下边的距离 |
- 修改上述例子,文字不在放入到
container
组件里,而是直接放入到Positioned
里,并且不再是两个组件,而是三个子组件
1 | import 'package:flutter/material.dart'; |
Align
Align
是一个 具有Alignment
属性的Widget
,基础的属性就是alignment
,并且默认值是Aligment.center
;用于实现相对定位
1 |
|
CardWidget
- Flutter还有一种比较比较酷炫的布局方式,我称 它为卡片式布局。这种布局类似ViewList,但是列表会以物理卡片的形态进行展示
- 比如我们现在要开发一个类似收获地址的列表,并且列表外部使用一个卡片式布局
- 卡片式布局默认是撑满整个外部容器的,如果你想设置卡片的宽高,需要在外部容器就进行制定
- 代码中使用了一个垂直布局组件
Column
组件,然后利用了ListTile
实现内部列表,这里需要说明的是ListTile
不光可以使用在ListView
组件中,然后容器组件其实都可以使用
1 | import 'package:flutter/material.dart'; |
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小李博客!
评论