Flutter--Row组件

2020-11-28 本文已影响0人小迷糊_dcee

一、介绍

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<Widget> children = const <Widget>[],//子组件
  }) : 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效果图