------------恢复内容开始------------
flutter配置的全局命令。创建项目 flutter create demoApp 启动项目 flutter run
1，row组件，它可以让Row里边的子元素进行水平排列，可以分为灵活排列和非灵活排列两种，可搭配一起使用，让谁灵活的就设置expands ，不灵活的就不写，
不灵活就是根据Row子元素的大小，进行布局。如果子元素不足，它会留有空隙，如果子元素超出，它会警告。
灵活解决上面有空隙的问题，可以使用 Expanded来进行解决，也就是我们说的灵活布局
Expanded有了深刻的理解，它就是灵活布局。比如我们想让中间区域变大就用expanded组件包裹，而头部区域和底部根据文字所占空间进行显示。
import ‘package:flutter/material.dart‘; void main () => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context ){ return MaterialApp( title:‘ListView widget‘, home:Scaffold( appBar:new AppBar( title:new Text(‘水平方向布局‘), ), body:new Row( children: <Widget>[
/new RaisedButton(//不平均占满整个盒子，从左到右依次紧贴如果不足后面留空隙
onPressed: (){
},
color:Colors.redAccent,
child:new Text(‘红色按钮‘)
),/
Expanded(child:new RaisedButton(平均占满整个盒子 onPressed: (){ }, color:Colors.redAccent, child:new Text(‘红色按钮‘) )), Expanded(child:new RaisedButton( onPressed: (){ }, color:Colors.orangeAccent, child: new Text(‘黄色按钮‘), ) ), Expanded(child:new RaisedButton( onPressed: (){ }, color:Colors.pinkAccent, child:new Text(‘粉色按钮‘) ) ) ], ) ), ); } }
2，Column组件即垂直布局控件，能够将子组件垂直排列。
左对齐只要在column组件下加入下面的代码，就可以让文字左对齐。
crossAxisAlignment: CrossAxisAlignment.start,在设置对齐方式的时候你会发现右mainAxisAlignment属性，意思就是主轴对齐方式，那什么是主轴，什么又是幅轴那。正常情况子元素不设置从左到右，或者从上到下依次排列。
main轴：如果你用column组件，那垂直就是主轴
在column组件使用MainAxisAlignment属性定义居中属性，如果副轴居中可以把colunm组件放在center组件的child属性上，在外面套个center组件的壳，如果你用Row组件，那水平就是主轴。
cross轴：cross轴我们称为幅轴，是和主轴垂直的方向。比如Row组件，那垂直就是幅轴，Column组件的幅轴就是水平方向的。
3，层叠布局stack: column和row组件有时候不适用，比如图片上面在放文字就要用到层叠布局Stack。
import ‘package:flutter/material.dart‘;
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
var stack = new Stack(
alignment: const FractionalOffset(0.5, 0.8),//建议在两个内容进行层叠时使用。它有两个值X轴距离和Y轴距离，值是从0到1的，都是从上层容器的左上角开始算起的
children: <Widget>[
new CircleAvatar(//环形组件，以及相关属性
backgroundImage: new NetworkImage(‘http://jspang.com/static//myimg/blogtouxiang.jpg‘),
radius: 100.0,
),
new Container(//盒子组件层叠在环形组件上面
decoration: new BoxDecoration(//背景颜色等样式
color: Colors.lightBlue,
),
padding: EdgeInsets.all(5.0),
child: new Text(‘JSPang 技术胖‘),//很多组件如果还有子组件都有child属性，在child属性new一个新的子组件
)
new Positioned(//类似定位属性，距离上下左右的偏移距离，适用好几个子组件层叠可以用
top:10.0,
left:10.0,
child: new Text(‘JSPang.com‘),
),
],
);
return MaterialApp(
title:‘ListView widget‘,
home:Scaffold(
appBar:new AppBar(
title:new Text(‘垂直方向布局‘),
),
body:Center(child:stack),
),
);
}
}
4,卡片组件 new Card(），类似收获地址的列表
利用了ListTile实现内部列表，这里需要说明的是ListTile不光可以使用在ListView组件中，然后容器组件Column,row,contaner等
其实都可以使用
var card = new Card(
child: Column(
children: <Widget>[ ListTile()] )
)
------------恢复内容结束------------
原文：https://www.cnblogs.com/lanlanwb/p/14120929.html