Flutter常用基本布局Layout(1)
在前面的文章中,我们有说国Container,Text,仔细的朋友们可能会发现,这些Widge只能传入一个child对象,而不能传入多个child,这样一来可就大大限制了我们的工作的适应度。所以,今天我们就来讲讲可以传入多个child(children)的Widget,例如:Row和Column。(当然前面说的ListView也是可以传入多个Widget对象的)
Row和Column的中文意思分别是行和列的意思,所以对应到我们的实际开发中也是行布局和列布局。
Row 行布局
行布局顾名思义,内部多个Widget可以显示在同一行中,下面来试下最基本的Row。
代码如下:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:MyHomePage(title: 'layout'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({this.title});
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Row(
children: <Widget>[
new Text("Hello Flutter||"),
new Text("Hello flyou||"),
new Text("Hello Flutter")
],
),
);
}
}
可以发现一行里面有三个Widget的Text文本,但是如果Text过于长会发生什么呢?
就会显示超出!!!
所以要实现换行就要在外面包夹一层Expanded,在这我就不演示了!里面还有好多参数,有兴趣的可以自己挨个试试就知道有什么用处了!
Column 列布局
其实Column的用法和Row的用法是一样的,只不过显示的方向不一样而已。下面就简单的演示下效果。
同样的,我们把上面的Row换成Column来看下效果:(和上面一样的代码就是把Row改为Column)
同样的也可以在Text的外层包夹一层Expanded,至于效果还是你们自己去实践吧,比较有用!!!
是在看不出效果的也无所谓了,其实就是按照宽和高等分的,以前的虚拟机还能打开debugpaint的,现在好想不行了,只能打开debuggird网格了!
小结:
- Row和Column都是Flutter中的Layout,可以传入多个child
- Row是行布局,children都显示在同一行上
- Column是列布局,children都显示在同一列上
- 使用Expanded可以让Row和Column按照比例布局并自动换行。