基础 widget
01、Text单一格式的文本
RichText:一个富文本Text,可以显示多种样式的text。
富文本显示。结合TextSpan组件一起使用
02、 Row, Column
可以让你在水平 ( Row ) 和垂直( Column ) 方向创建灵活的布局
row是横向分布的,那所有的元素就是沿着一条横着的主轴排列的,默认情况下,它们将整个轴布满,而轴一般来说是跟屏幕同宽或者同长,跟上一个案例一样。但是可以通过mainAxisSize设置轴的长度、mainAxisAlignment设置对齐关系、使用CrossAxisAlignment设置children在横轴中的定位 。column同理。
Column 不支持滚动,想支持滚动,需要考虑使用ListView
在Row 和 Column 里CrossAxis 和 Main Axis 是不一样的
Row 布局 设置 crossAxisAlignment 无效
Column 布局 设置 mainAxisAlignment 无效
03、Expanded
Expanded widget 能够包裹一个 widget 并强制其填满剩余空间,与 Flexible 非常相似。
Expanded必须要要结合Column或者Row一起使用,否则会报错。作用是动态调整 child 组件沿主轴的尺寸,比如填充剩余空间,比如设置尺寸比例。
04、SizedBox
这个可以用来调整大小,也可以用来创造空间。
与Container类似,但仅用于设置容器的宽高,如果需要设置背景色等,请使用Container
05、Spacer
如果要造空位,Spacer比楼上更合适一点,它可以用flex,且放在children中效果优先级高于mainAxisAlignment。
06、
icon
优势:
尺寸不管怎么变,图标本身都是清晰的,且没有锯齿,
可以修改颜色:
还支持传入图片 (icon: 'images/icon.png')
缺点:只能设置纯色,不能设置渐变色
Image
在放图片前先配置下。先创建assets文件夹,并补上俩子文件夹用于存放图标和图片;再将这俩文件夹写入
pubspec.yaml里。
Image.network
Image.asset
继承了ImageProvider的image加载组件
本地AssetImage
AssetImage('images/image_icon.png')
网络图:NetworkImage
NetworkImage('imageUrl')
文件中加载:Image.file
内存中加载:Image.memory
07、 Container
在没有限制的情况下,Container 大小会尽可能大,如果没有 height 的限制,这个 Container 将布满屏幕。
Container 需要遵守对齐方式,根据子项调整大小,尊重宽度、高度和约束,扩展以适合父项,尽可能小。
如果 widget 没有子项且没有对齐方式,但提供了高度、宽度或约束,Container 会尝试尽可能小,给定这些约束和父约束的组合。
08、 GridView
ListView
09、Stack
Stack 是定死的,不能像之前 ListView, Container 那样可以在内容数据溢出时可滚动。
可以剪切掉超出渲染框的子项,所以才有上面圆形头像的操作。
Stack:取代线性布局 (和Android中的LinearLayout相似),Stack允许子 widget 堆叠, 你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。
010、
RaisedButton 点击带波纹效果,且有阴影
FloatButton: 没有背景
OutlineButton: 带边框按钮,点击时边框和背景颜色呈现高亮状态
FloatingActionButton:一般一个界面只有一个,用于分享,导航
TextButton是Flutter中的一个按钮组件,它用于创建一个简单的文本按钮,通常用于触发次要操作。TextButton是MaterialButton的一个子类,因此它遵循材质设计规范,并提供一些常见的按钮属性。
011、
Divider:一个逻辑1像素厚的水平分割线,两边都有填充
012、
Padding:一个widget, 会给其子widget添加指定的填充,设置内边距
Center:将其子widget居中显示在自身内部的widget
ConstrainedBox:对其子项施加附加约束的widget
Offstage:一个布局widget,可以控制其子widget的显示和隐藏。
013、
Scaffold
快速搭建页面框架的组件
014、Positioned绝对定位,一般跟Stack组件配合一起使用
Positioned.fill方法将填充 Stack 的整个空间