flutter 基础布局Row

》理论不多哔哔，直接上代码：

代码里面有详情说明：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: LayoutDemo(),
    ));
  }
} //以上为标题固定代码

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      //Container是一个组合类容器
      height: 700, //容器的高度
      width: 500, //容器的宽度
      color: Colors.black26, //容器的背景颜色
      child: Row(
        //嵌套一个线性布局
        crossAxisAlignment: CrossAxisAlignment.center, //表示子组件在纵轴方向的对齐方式
        mainAxisAlignment:
            MainAxisAlignment.spaceEvenly, //表示子组件在Row所占用的水平空间内对齐方式
        // crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          //列表数据
          IconContainer(Icons.home, color: Colors.red), //自定义组件传参
          IconContainer(Icons.search, color: Colors.blue), //自定义组件传参
          IconContainer(Icons.send, color: Colors.orange), //自定义组件传参
        ],
      ),
    );
  }
}

/**
 * 无状态的组件类
 */
class IconContainer extends StatelessWidget {
  double size; //全局变量
  IconData icon; //全局变量  icon：图标
  Color color; //全局变量
  IconContainer(this.icon, {this.size = 32.0, this.color = Colors.blue}) {
    this.size = 32.0; //文本大写写死
  }

  @override
  Widget build(BuildContext context) {
    //里面的参数通过传参的形式传递到组件里面实现动态传参
    // TODO: implement build
    return Container(
        //Container 是一个组合型容器组件
        width: this.size + 60, //容器的宽度
        height: this.size + 60, //容器的高度
        color: this.color, //容器的背景颜色
        child: Center(
            //嵌套容器
            //Icon：图标的设置
            child: Icon(this.icon, color: Colors.white, size: this.size)));
  }
}