Flutter:Row组件的使用

• Row组件的使用和重要参数
  • children 子组件列表
  • mainAxisAlignment 主轴的对齐方式 和 css的flex对齐类似
  • mainAxisSize:Row组件在主轴方向上默认是占满整个屏幕的。可以通过mainAxisSize来决定在水平方向上是否占满
  • MainAxisSize.min 在主轴方向自适应
  • MainAxisSize.max 默认值 占满整个屏幕

	import 'package:flutter/material.dart';

    class Profile extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("我的"),
            centerTitle: true,
          ),
          body: ProfileContent()
        );
      }
    }

    class ProfileContent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Row(
          children: <Widget>[
            IconContainer(Icons.home,size:40,color:Colors.red),
            IconContainer(Icons.category,size:30,color:Colors.white),
            IconContainer(Icons.book_online_outlined,size:20,color:Colors.pinkAccent),

          ],
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          // Row组件在主轴方向上是沾满整个屏幕的 
          // 可以通过mainAxisSize来决定在水平方向上是否占满
          // MainAxisSize.min 在主轴方向自适应
          // MainAxisSize.max 默认值 沾满整个屏幕
          // mainAxisSize: MainAxisSize.min,
        );
      }
    }

    // ignore: must_be_immutable
    class IconContainer extends StatelessWidget {
      double size = 36;
      IconData icon;
      Color color = Color(0xffff793f);
      IconContainer(this.icon,{this.size,this.color});
      @override
      Widget build(BuildContext context) {

        return Container(
          width: 100,
          height:100,
          color: Color(0xff706fd3),
          child: Icon(
            this.icon,
            color: this.color,
            size: this.size,
          ),
        );
      }
    }