Flutter开发（七）—— 五种布局之Row Widget 水平布局

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/RedKeyer/article/details/89551963

继承关系:

Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > MultiChildRenderObjectWidget > Flex > Row

Flutter中Row的构造方法：

Row({
  Key key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  TextDirection textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline textBaseline,
  List<Widget> children = const <Widget>[],
})

代码示例：
代码展示的是Row 水平布局的使用方法，其子View是Expanded包裹的 RaisedButton 和 没有 Expanded 包裹的RaisedButton 。对于RaisedButton 的属性及使用将再写一篇作为介绍。

import 'package:flutter/material.dart';

main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Row 布局',
      home: Scaffold(
        appBar: new AppBar(title: new Text('Row Widget 水平')),
        body: new Row(  //Row 水平布局
          children: <Widget>[ //其子Widget 用children: <Widget>[ ] 包裹
            Expanded( //  Expanded表示这个 子Widget是自动填充满的
              child: new RaisedButton(
                onPressed: () {},
                color: Colors.blueGrey,
                child: Text('blueGrey'),
                textColor: Color(0xffff0000),
              ),
              flex: 1,  //Expanded 修饰时，fiex 表示权重
            ),
            new RaisedButton( //  没有Expanded  则子Widget展示自身大小
              onPressed: () {},
              color: Colors.orangeAccent, //RaisedButton默认颜色
              highlightColor: Color(0xff00ff00),  //RaisedButton点击颜色
              child: Text('orangeAccent'),   //Text内容
              textColor: Color(0xffff0000),  //Text 内容字体颜色

            ),
            Expanded(
              child: new RaisedButton(
                onPressed: () {
                  print("dianji");
                },
                color: Colors.lightBlueAccent,
                child: Text('lightBlueAccent'),
              ),
              flex: 2,  //Expanded 修饰时，fiex 表示权重
            ),
          ],
        ),
      ),
    );
  }
}

展示布局效果：
blueGrey 设置flex: 1，lightBlueAccent 设置flex: 2。所以，blueGrey 只有lightBlueAccent 宽度的一半。