Flutter--Row组件

一、介绍

Row 水平布局组件

二、源码

Row({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,//主轴的排序方式
    MainAxisSize mainAxisSize = MainAxisSize.max,//默认就是最大可占用的空间
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,//次轴的排序方式
    TextDirection textDirection,//正文方向
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline = TextBaseline.alphabetic,//根据基线对齐
    List children = const [],//子组件
  }) : super(
    children: children,
    key: key,
    direction: Axis.horizontal,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );

三、属性介绍

属性	说明
mainAxisAlignment	主轴的排序方式 MainAxisAlignment.start主轴顶部(默认X轴左边) MainAxisAlignment.end主轴底部(默认X轴右边) MainAxisAlignment.center主轴中间(默认X轴轴中间) MainAxisAlignment.spaceBetween 间距相同 首尾没有间距 MainAxisAlignment.spaceAround子元素平均充满 MainAxisAlignment.spaceEvenly间距相同 首尾有间距
crossAxisAlignment	次轴的排序方式 CrossAxisAlignment.start次轴的顶部(默认Y轴上部) CrossAxisAlignment.end次轴的底部(默认Y轴下部) CrossAxisAlignment.center次轴的中部(默认Y轴中间) CrossAxisAlignment.stretch子元素宽充满 CrossAxisAlignment.baseline子控件基线匹配
mainAxisSize	MainAxisSize.min容器空间需要根据内容的大小而撑开的时候用 MainAxisSize.max则相反默认就是最大可占用的空间
textBaseline	基线对齐方式
textDirection	TextDirection.ltr排列方式从左到右 TextDirection.ltr排列方式从右到左

四、Demo

/**
 * 自定义一个图标按钮组件
 */
class IconContainer extends StatelessWidget {
  Color color;
  IconData icon;
  double size = 32.0;

  IconContainer(this.color, this.icon, {this.size});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 60.0,
      height: 60.0,
      decoration: BoxDecoration(
          color: color, borderRadius: BorderRadius.all(Radius.circular(10))),
      child: Icon(
        icon,
        color: Colors.white,
        size: size,
      ),
    );
  }
}


class RowStu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black26,
      width: 500,
      height: 500,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconContainer(Colors.blue, Icons.account_circle),
          IconContainer(Colors.red, Icons.ad_units),
          IconContainer(Colors.yellow, Icons.adb_outlined)
        ],
      ),
    );
  }
}

MainAxisAlignment.start效果图

2105725357733cf147bffaa3b466dd4.png

MainAxisAlignment.end效果图

1e85094d72e0a8ab4136b2299b62118.png

MainAxisAlignment.center效果图

54ee28d9c640a1d4587bb4547d2795c.png

MainAxisAlignment.spaceEvenly效果图

2af4c7797509e5f09e82a38881d1263.png

MainAxisAlignment.spaceAround

c7c8570692b8327f4b0034353bdca18.png

MainAxisAlignment.spaceBetween

f7308cb44db61df86a9afd0369c986c.png

CrossAxisAlignment.start效果图

1b3307a3d5b26aa663c97f80d25b64f.png

CrossAxisAlignment.end效果图

c1699ee3b0f9aafad68e4886ac217e3.png

CrossAxisAlignment.center效果图

e1a35806df5d094538ed22274abb4f7.png

CrossAxisAlignment.stretch效果图

a8e27cc4ff764916f8607b998417a06.png

CrossAxisAlignment.stretch效果图(修改IconContainer的size大小为50)

1e5e76bf28eaf6da92527a9a87a1d02.png