防采集标记:亢少军老师的课程和资料
水平布局效果图
示例代码
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