flutter widget:Row

row : 在水平方向上排列子widget的列表.

image.png

Row 是继承Flex=>MultiChildRenderObjectWidget=>RenderObjectWidget=>Widget.
所以Row 具有动态布局的特点，可以让子控件展开以填充可水平的可用空间，用一个Expanded的控件包裹子控件。
Row不支持滚动（通常认为一行的子控件超过可以容纳空间是错误的）。如果有一行控件控件比较多，希望可以滑动的时候，可以采用ListView。
同样，如果是垂直方向方面和 Row 对应的是 Column。
小demo

import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/flutter/RouterPlugin.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'Flutter demo',
      home: new MyHomePage(title: "Flutter Demo home page"),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  String backMessage = "";

  _incrementCounter() async {
    var value = await RouterPlugin.startActivityForResult(
        "com.example.flutterapp.TestActivity", 200);
    setState(() {
      backMessage = value.toString();
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Row(
        children: <Widget>[
          const FlutterLogo(),
          const Expanded(
            child: const Text(
                'Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'),
          ),
          const Icon(Icons.sentiment_very_satisfied),
        ],
      ),

      floatingActionButton: new FloatingActionButton(
          onPressed: _incrementCounter, child: new Icon(Icons.chat_bubble)),
    );
  }
}

这里需要注意的地方：
因为在 Row 里面有text，但是因为text的长度过长，一行肯定是放不下的，所以这里考虑用Expanded包裹一个Text，这样文字会自动换行，填充剩余部分。

效果图如下

image.png

修改下Row的 内容：

 body: new Row(
        children: <Widget>[
          const Expanded(
            child: const FlutterLogo(),
          ),
          const Expanded(
            child: const Text(
                'Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'),
          ),
           const Icon(Icons.sentiment_very_satisfied),
        ],
      ),

效果如下：可见多个Expanded 具有平分剩余空间的功能。和android 的weight 属性很相像。

image.png