Flutter入门并开发天气预报APP(4)——基础Widget
到这章我们就差不多可以开始写天气预报了。首先我们来看一下一些基础简单的Widget。
基础组件
文本
Text
用于显示简单的文本,包含一些控制文本显示的属性。1
2
3
4
5
6
7
8
9
10
11Text(
"1234",
),
Text(
"1234",
style: TextStyle(
color: Colors.purple,
fontSize: 32.0,
fontWeight: FontWeight.bold,
),
),
- 需要显示的文本信息直接放到一个双引号里面就可以了;
textAlign
:文本对齐方式;maxLines
:文本显示的最大行数;overflow
:指定多余文本的截断方式;textScaleFactor
:指定文本相对于当前字体大小的缩放因子;TextStyle
:设置显示文本的字体、颜色、粗细等样式:height
:指定行高,但是不是绝对值,而是一个因子,相当于fontsize * height
;fontFamily
:设置字体;fontSize
:设置字体大小
按钮
不同的组件库有不同的按钮,我们现在只拿Material组件库中的按钮举例。
RaisedButton
漂浮按钮,带有阴影和灰色背景。按下后阴影会变大。1
2
3
4RaisedButton(
child: Text("1234"),
onPressed: () {},
);
FlatButton
扁平化按钮,背景透明且不带阴影,按下后会有背景色。1
2
3
4FlatButton(
child: Text("1234"),
onPressed: () {},
)
IconButton
可点击的Icon,默认没有背景,按下后出现阴影1
2
3
4IconButton(
icon: Icon(Icons.thumb_up),
onPressed: () {},
)
图片
我们通过Image
来显示图片,来源可以是asset
、网络等位置。
从asset加载图片
- 现在项目根目录(也就是和android、ios、lib等目录同级)新建一个
images
目录,并把图片main.png
拷进去; - 在
pubspec.yaml
中的flutter部分添加一下内容:
- 加载该图片
1 | Image( |
Image
也提供了一个快速构造函数:1
2
3Image.asset(
"images/amoled.png",
)
从网络加载图片
1 | Image( |
或者1
2
3Image.network(
"https://s2.ax1x.com/2019/05/27/VZrQ3V.png",
)
参数
Image
有一些基本参数1
2
3
4
5
6
7
8
9const Image({
...
this.width, //图片的宽
this.height, //图片高度
this.fit,//缩放模式
this.alignment = Alignment.center, //对齐方式
this.repeat = ImageRepeat.noRepeat, //重复方式
...
})
width
和height
:宽和高;fit
:缩放模式:fill
:拉伸图片知道填满;cover
:按原图长宽比放大图片来填满,多余的部分舍去;contain
:在保证图片长宽比不变的情况下尽可能去填满;fitWidth
:宽度会缩放到显示空间的宽度,高度会按比例缩放,如果有多余的部分会被舍去;fitHeight
:与fitWidth
同理;none
:没有适应策略,图片多大就显示多大,如果图片原尺寸小于显示空间就只显示原尺寸;如果大于则舍弃多余部分只显示中间部分;
repeat
:当图片小于显示空间时,会将图片重复显示。
布局组件
线性布局(Row、Column)
线性布局就相当于Android里面的LinearLayout
,但是不同的是Flutter将竖直和水平布局单独拿了出来。
线性布局分为竖直布局Column
和水平布局Row
。他两属性都是一样的。
再说属性之前我们先熟悉两个概念:主轴和交叉轴。如果是Column
,主轴是竖直轴,交叉轴是水平轴;如果是Row
,主轴是水平轴,交叉轴是竖直轴。1
2
3
4
5
6
7Row({
...
MainAxisSize mainAxisSize = MainAxisSize.max,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
List<Widget> children = const <Widget>[],
})
mainAxisSize
:主轴占用空间。默认是MainAxisSize.max
,是指占用全部主轴空间。如果设置为MainAxisSize.min
,那就只占用所有子组件所需要的空间;mainAxisAlignment
:子Widget在主轴的对其方向;crossAxisAlignment
:子Widget在交叉轴的对其方向;children
:所有的子Widget。
弹性布局(Flex)
其实这个布局和线性布局很有渊源,为什么这么说呢,因为Row
和Column
都继承自它。
因此关于他和线性布局重复的地方我们现在就不再讲了,我们直说他“弹性”的部分。
Expanded
可以按比例“拉伸”Row
、Column
和Flex
子组件所占的空间。
1 | const Expanded({ |
flex
为弹性系数,如果为0
或者null
,则child
不会阔伸占用的控件。如果大于0
,则会按照flex
的比例来分隔主轴全部空闲空间。其实说白了,就和Android里面LinearLayout
的weight
一样的。但是我们还是来举个例子吧。
1 | return Scaffold( |
流式布局(Wrap、Flow)
如果使用线性布局的话,当需要显示的内容超出屏幕边界的时候就会报错。
为了避免这种情况,我们就可以使用流式布局。当需要显示的内容超出屏幕边界的时候,就自动折行来继续显示。
Flutter中通过Wrap
和Flow
来实现流式布局。
Wrap
我们来看下Wrap
主要的一些参数:1
2
3
4
5
6
7
8
9
10
11
12Wrap({
...
this.direction = Axis.horizontal,
this.alignment = WrapAlignment.start,
this.spacing = 0.0,
this.runAlignment = WrapAlignment.start,
this.runSpacing = 0.0,
this.crossAxisAlignment = WrapCrossAlignment.start,
this.textDirection,
this.verticalDirection = VerticalDirection.down,
List<Widget> children = const <Widget>[],
})
其中很多参数Row
和Column
中都有,就不再介绍了,主要介绍点不同的:
spacing
:主轴方向子widget的间距runSpacing
:纵轴方向的间距runAlignment
:纵轴方向的对齐方式
下面有一个示例:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23Wrap(
spacing: 8.0, // 主轴(水平)方向间距
runSpacing: 4.0, // 纵轴(垂直)方向间距
alignment: WrapAlignment.center, //沿主轴方向居中
children: <Widget>[
new Chip(
avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('A')),
label: new Text('Hamilton'),
),
new Chip(
avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('M')),
label: new Text('Lafayette'),
),
new Chip(
avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('H')),
label: new Text('Mulligan'),
),
new Chip(
avatar: new CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
label: new Text('Laurens'),
),
],
)
Flow
Flow
较复杂,需要自己实现子Widget的位置转换,一般不推荐使用Flow
。但是如果需要自定义布局策略,或者对性能要求较高,这个时候就得用Flow
了。
但是由于太过于复杂,我也没咋用过,我就不在这讲了😝,大家有需要的可以百度,或者看我推荐的这篇:4.4 流式布局-《Flutter实战》
层叠布局(Stack)
这个布局类似于Android中的Frame
,允许在父布局的任意地方放置布局。1
2
3
4
5
6
7Stack({
this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
this.overflow = Overflow.clip,
List<Widget> children = const <Widget>[],
})
alignment
:决定如何去对齐;textDirection
:确定alignment
的参考系;fit
:没有定位的子Widget如何去适应Stack
的大小;overflow
:决定超出Stack
显示空间的子Widget如何去显示,如果Overflow.clip
,则超出部分会隐藏,Overflow.visible
则不会。
对齐与相对定位(Align)
Align可以调整子Widget的位置,并且可以根据子Widget的宽高来确定自身的宽高。1
2
3
4
5
6
7Align({
Key key,
this.alignment = Alignment.center,
this.widthFactor,
this.heightFactor,
Widget child,
})
- alignment:代表子Widget在父Widget的起始位置;
- widthFactor和heightFactor确定Align本身的宽高。
来看一个简单的例子:1
2
3
4
5
6
7
8
9
10
11Container(
height: 120.0,
width: 120.0,
color: Colors.blue[50],
child: Align(
alignment: Alignment.topRight,
child: FlutterLogo(
size: 60,
),
),
)
运行结果:
3. 容器类组件
填充(Padding)
用过Android的同学一定熟悉,Padding就是负责留白的嘛。
但是跟Android里面不同的是,在Android里面我们一般是在一个View里面添加Padding,但是在Flutter里面,Padding直接变成了一个Widget、一个布局。
使用方法:1
2
3
4Padding ({
EdgeInsetsGeometry padding,
Widget child,
})
对于EdgeInsetsGeometry我们一般使用EdgeInsets类。
EdgeInsets
EdgeInsets类提供了几个便捷的方法:
- fromLTRB(double left, double top, double right, double bottom):分别指定四个方向的填充;
- all(double value) : 所有方向均使用相同数值的填充;
- only({left, top, right ,bottom }):可以设置具体某个方向的填充(可以同时指定多个方向);
- symmetric({ vertical, horizontal }):用于设置对称方向的填充,vertical指top和bottom,horizontal指left和right;
示例:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16body: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 12.0, bottom: 10.0),
child: Text("1234"),
),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 10.0),
child: Text("1234"),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 10.0),
child: Text("1234"),
),
],
),
运行结果: