Flutter之Row组件

/**
 * 行布局
 *
 * Row({
    Key key,
    //mainAxisAlignment主轴上的对齐方式:
    //start:将children放置在主轴的起点;
    //center:将children放置在主轴的中心;
    //end:将children放置在主轴的末尾;
    //spaceAround:将主轴方向上的空白区域均分,使得children之间的空白区域相等,首尾空白区域为children之间的1/2;
    //spaceBetween:将主轴方向上的空白区域均分,使得children之间的空白区域相等,首尾没有空白区域;
    //spaceEvenly:将主轴方向上的空白区域均分,使得children之间和收尾的空白区域相等;

    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,//控住一行的高度,max:最大化主轴方向的可用空间;min:与max相反,是最小化主轴方向的可用空间;
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,//交叉轴上的对齐方式,baseline:children在交叉轴方向,根据baseline对齐,stretch:让children填满交叉轴方向,start,center,end.
    TextDirection textDirection,//阿拉伯语系的兼容设置,一般无需处理
    VerticalDirection verticalDirection = VerticalDirection.down,//定义了children摆放顺序,down:从left到right进行布局,up:从right到left进行布局
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
    })
 */
body: Container(
          color: Colors.red,
          height: 100.0,
          width: 300.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                color: Colors.red,
                child: Text("Row组件",),
              ),
              Container(
                color: Colors.red,
                child: Text("Row组件",),
              ),
              Container(
                color: Colors.red,
                child: Text("Row组件",),
              ),
            ],
          ),
        ),

码云地址:https://gitee.com/xgljh/Flutter.git

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容