Flutter组件-Layout-Row-水平布局

防采集标记:亢少军老师的课程和资料

水平布局效果图

在这里插入图片描述

示例代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Row水平布局组件',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Row水平布局组件'),
        ),
        body:Center(
          //外围容器
          child: Container(
            width: 400.0,
            height: 300.0,
            //添加背景颜色
            decoration: BoxDecoration(
              color: Colors.green,
            ),
            child: Row(

              //mainAxisAlignment属性
              //MainAxisAlignment.spaceEvenly/spaceAround/spaceBetween,
              //spaceEvenly:将主轴方向空白区域均分,使得children之间空间相等,包括首尾children
              //spaceAround:将主轴方向空白区域均分,使得children之间空间相等,但是首尾children的空白部分为一半
              //spaceBetween:将主轴方向空白区域均分,使得children之间空间相等,但是首尾children靠近收尾,没有空细逢
              //MainAxisAlignment.start/end/center,
              //start:将children放置在主轴起点方向
              //end:将children放置在主轴末尾方向
              //center:将children放置在主轴中间方向
              mainAxisAlignment: MainAxisAlignment.spaceBetween,

              //CrossAxisAlignment 属性
              //crossAxisAlignment: CrossAxisAlignment.center/end/start,即,根据设定的位置交叉对齐
              //center/end/start: children在交叉轴上居中/末端/起点 对齐展示
              //stretch:让children填满交叉轴方向
              //baseline:在交叉轴方向,使得于这个baseline对齐,如果主轴是垂直的,那么这个值是当作开始

              crossAxisAlignment: CrossAxisAlignment.center,

              children: <Widget>[
                //色块
                Container(
                  color: Colors.orange,
                  width: 100.0,
                  height: 50.0,
                ),
                //色块
                Container(
                  color: Colors.orange,
                  width: 100.0,
                  height: 50.0,
                ),
                //色块
                Container(
                  color: Colors.orange,
                  width: 100.0,
                  height: 50.0,
                ),

              ],
            ),
          ),
        ),
      ),
    );

  }
}


《Flutter技术入门与实战》 技术图书查看地址: http://product.dangdang.com/26485813.html
Flutter交流学习群:894109159
Flutter开源项目请关注: https://github.com/kangshaojun
Flutter视频教程:https://edu.csdn.net/lecturer/2436
在这里插入图片描述
在这里插入图片描述

没有更多推荐了,返回首页