Flutter常用基本布局Layout（1）

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按照比例布局并自动换行。