Flutter开发者

Layout

2018-03-13

上期回顾

在前面的文章中我们学习了Flutter中Container容器的用法,那么我们还是先来看看在前面的文章中留下的问题

实现下面图片的效果

实现思路:
首先外层是一个蓝色的Contaner,蓝色Contaner的右下角是一个绿色的Contaner,绿色Contaner的左上角是个红色背景的Icon,icon距离上面、左边的间距为10像素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
home: new MyApp(),
));
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Container"),
),
body: new Center(
child: new Container(
alignment: Alignment.bottomRight,
color: Colors.blue,
width: 300.0,
height: 300.0,
child: new Container(
padding:const EdgeInsets.only(top: 10.0,left: 10.0),
alignment: Alignment.topLeft,
color: Colors.lightBlueAccent,
width: 100.0,
height: 100.0,
child: new Icon(Icons.android,color: Colors.red,),
),
)),
);
}
}'

Layout

在前面的文章中,我们先后学习了很多Flutter中最基本的Widget,仔细的童鞋可能会发现,这些Widget可以传入一个child对象有的不能传入child对象,但是都不能传入多个child,这样一来可就大大限制了我们的想象力。所以,今天我们就来讲讲可以传入多个child(children)的Widget,Row和Column。

Row和Column的中文意思分别是行和列的意思,这也类似于Css中表格的行业列(tr、td)

Row(行布局)

行布局顾名思义,内部多个Widget可以显示在同一行中,下面来试下最基本的Row

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
home: new MyApp(),
));
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("layout"),
),
body: new Row(
children: <Widget>[
new Text("Hello Flutter||"),
new Text("Hello flyou||"),
new Text("Hello Flutter")
],
),
);
}
}

可以看到,在一行内我们显示了三个Text Widget,效果还行对吧,但是如果我们的Text文本过长它会怎么显示呢?

我们还是来试一下把,增加一个Text文本的长度,再来看下效果

可以看到在这一行的最右边出现了黄色警告和红色的字体超出提示。

当然,官方也为大家考虑到了这一点,借助于Expanded Widget可以实现Text自动换行,并且可以实现子Widget宽(高)按比例布局。

好吧,既然说到了Expanded,这里还是简单了解下Expanded吧

在Expanded的构造方法中只有一个必填的child参数和一选填flex参数。刚才说到使用Expanded可以实现内部Widget的自动布局,那么我们按照上面的例子来试一下吧。

1
2
3
4
5
6
7
8

body: new Row(
children: <Widget>[
new Expanded(child: new Text("Flutter is Google’s mobile UI framework ||"),),
new Expanded(child: new Text("Hello flyou||"),),
new Expanded(child: new Text("Hello Flutter"),),

],

从代码上来看我们仅仅在Text的外层增加了一层Expanded,我们再来看下运行的效果

可以看到现在的Text实现了自动换行处理,并且这一行被分成了三个部分,没错他们是被等分的。为了大家观察更加的直接,我们还是给应用程序打开debug paint。

在前面我们说过,可以实现child按照比例分配所占空间,那么是怎么实现的呢?对的,就是flex这个参数,在构造方法中这个参数的默认值是“1”,也就是这个Expanded内部child所占row(Column、Flex)的比例是1/N,这个N是布局中每个孩子flex属性的总和。

那么,究竟是不是像我们上面说的那样呢?我们改变第一个Expanded的flex属性,使他的flex增加为2
再运行看下效果。

可以看到第一个Text的占比了变成了屏幕的一半,另外两个Text的占比变成了屏幕的1/4。

当然,你也可以把每个Expanded的flex属性的值都改为2那么他们就又是三分了。

下面我们来看下Column

Column

其实Column的用法和Row的用法是一样的,只不过显示的方向不一样而已。下面就简单的演示下效果。

同样的,我们把上面的Row换成Column来看下效果:

同样的,我们也可以在Text外层加上Expanded

1
2
3
4
5
6
7
8
body: new Column(
children: <Widget>[
new Expanded(child: new Text("Flutter is Google’s mobile UI framework ||"),flex: 1,),
new Expanded(child: new Text("Hello flyou||"),),
new Expanded(child: new Text("Hello Flutter"),),

],
),

其实,并不是一个Row或者Column只能放一种类型的Widget,因为从传入参数的类型来看,只要你是继承于Widget的组件都可以作为其child的,算了我们还是来试下吧

1
2
3
4
5
6
7

children: <Widget>[
new Expanded(child: new Icon(Icons.code)),
new Expanded(child: new Icon(Icons.games)),
new Expanded(child: new Text("Hello Flutter"),),

],

当然大家在下面也可以尝试下Column的效果。

小结

  • Row和Column都是Flutter中的Layout,可以传入多个child
  • Row是行布局,children都显示在同一行上
  • Column是列布局,children都显示在同一列上
  • 使用Expanded可以让Row和Column按照比例布局并自动换行。

试一试

今天的例子效果是不是都比较Low,那么今天的练习就要大家好好做了,根据以前讲过的东西试下如下图片效果。

提示:

1.从上到下依次对应ICONS为:

Icons.chat

Icons.stars

Icons.lock

Icons.send

Icons.setting

2.借助于Container来实现padding和下划线装饰效果

3.使用Row和Column完成布局

使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

打赏请备注姓名或者昵称,方便我后期统计哦

关注公众号,及时查阅最新文章