Flutter学习笔记九——水平布局Row的使用

学习参考：技术胖
在Flutter中水平组件是Row组件，它使子元素进行水平排列。官方解释为：
A widget that displays its children in a horizontal array.
Row控件可以分为灵活布局和非灵活布局两种。

非灵活布局

顾名思义，Row Widget根据子元素大小进行布局。如果子元素不足，则会留有空隙；如果子元素大小超出，则会警告。
示例代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Widget',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Row Widget'),
          backgroundColor: Colors.deepPurple,
        ),
        body: Row(
          children: <Widget>[
            RaisedButton(
                onPressed: () {},
                color: Colors.redAccent,
                child: Text('红色按钮', style: TextStyle(color: Colors.white))),
            RaisedButton(
                onPressed: () {},
                color: Colors.orangeAccent,
                child: Text('橙色按钮', style: TextStyle(color: Colors.white))),
            RaisedButton(
                onPressed: () {},
                color: Colors.blueAccent,
                child: Text('蓝色按钮', style: TextStyle(color: Colors.white))),
            RaisedButton(
                onPressed: () {},
                color: Colors.purpleAccent,
                child: Text('紫色按钮', style: TextStyle(color: Colors.white))),
          ],
        ),
      ),
    );
  }
}

效果如图：

row1.png

这种情况下右边会留下一部分空隙，因为非灵活布局是根据子元素的大小进行布局的。如果想要子元素充满一行，就需要属于灵活布局了。

灵活布局

灵活布局使用Expanded()实现，具体看代码：

 body: Row(
          children: <Widget>[
            Expanded(
                child: RaisedButton(
                    onPressed: () {},
                    color: Colors.redAccent,
                    child:
                        Text('红色按钮', style: TextStyle(color: Colors.white)))),
            Expanded(
                child: RaisedButton(
                    onPressed: () {},
                    color: Colors.orangeAccent,
                    child:
                        Text('橙色按钮', style: TextStyle(color: Colors.white)))),
            Expanded(
                child: RaisedButton(
                    onPressed: () {},
                    color: Colors.blueAccent,
                    child:
                        Text('蓝色按钮', style: TextStyle(color: Colors.white)))),
            Expanded(
                child: RaisedButton(
                    onPressed: () {},
                    color: Colors.purpleAccent,
                    child:
                        Text('紫色按钮', style: TextStyle(color: Colors.white))))
          ],
        ),

效果如图：

row2.png

非灵活布局和灵活布局混合使用

现在Row Widget里有3个按钮，实现两边的按钮保持原大小，中间的按钮填充剩余空间，使它们占满一行不留空隙。

 body: Row(
          children: <Widget>[
            RaisedButton(
                onPressed: () {},
                color: Colors.redAccent,
                child: Text('红色按钮', style: TextStyle(color: Colors.white))),
            Expanded(
                child: RaisedButton(
                    onPressed: () {},
                    color: Colors.orangeAccent,
                    child:
                        Text('橙色按钮', style: TextStyle(color: Colors.white)))),
            RaisedButton(
                onPressed: () {},
                color: Colors.blueAccent,
                child: Text('蓝色按钮', style: TextStyle(color: Colors.white))),
          ],
        ),

效果如图：

mingleRow.png