文本组件：
Text(‘老孟’)

设置颜色
Text(‘老孟’,style: TextStyle(color: Colors.red,fontSize: 20),),

粗体：字体粗细共有9个级别，为w100至w900，FontWeight.bold是w700。
Text(‘老孟’,style: TextStyle(fontWeight: FontWeight.bold))

斜体：
Text(‘老孟’,style: TextStyle(fontStyle: FontStyle.italic,))

自定义:
Text(‘老孟’, style: TextStyle(fontFamily: ‘maobi’,)),

对齐方式：left， right, center,justify,
end
start
Text(‘老孟’, textAlign: TextAlign.center)

设置文本自动换行：
Text(‘老孟，专注分享Flutter技术和应用实战’,softWrap: true,),

文本超出范围时的处理：
clip：直接裁剪。
fade：越来越透明。
ellipsis：省略号结尾。
visible：依然显示，此时将会溢出父组件。
Text(‘老孟，专注分享Flutter技术和应用实战’,overflow: TextOverflow.ellipsis,),
富文本：
RichText(
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: <InlineSpan>[
TextSpan(text: ‘老孟’,style: TextStyle(color: Colors.red)),
TextSpan(text: ‘，’),
TextSpan(text: ‘一个有态度的程序员’),
]),
)

文本输入：
TextField()
装饰：
TextField(
decoration: InputDecoration(
labelText: ‘姓名：’,
labelStyle: TextStyle(color:Colors.red),

//帮助提示
helperText: ‘用户名长度为6-10个字母’,
helperStyle: TextStyle(color: Colors.blue),
helperMaxLines: 1

//输入为空提示
hintText: ‘请输入用户名’,
hintStyle: TextStyle(color: Colors.grey),
hintMaxLines: 1

//异常提示
errorText: ‘用户名输入错误’,
errorStyle: TextStyle(fontSize: 12),
errorMaxLines: 1,
errorBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.red)),

),
)
按钮组件
RaisedButton、FlatButton、OutlineButton、DropdownButton、RawMaterialButton、PopupMenuButton、IconButton、BackButton、CloseButton、ButtonBar、ToggleButtons

FlatButton(
child: Text(‘FlatButton’),
color: Colors.blue,onPressed: (){},
),

单选 Radio()

复选 Checkbox()

滑块 Slider()

开关 switch()

进度条 LinearProgressIndicator()

图片
Image.asset(‘assets/images/aa.jpg’,width: 150,height: 150)
使图片等比拉伸
Image.asset(‘assets/images/aa.jpg’,width: 150,height: 150,fit: BoxFit.cover,),

布局
水平布局 Row
垂直布局 Column
重要概念：主轴（ MainAxis ） 和 交叉轴（ CrossAxis ）

主轴方向的对齐方式 （mainAxisAlignment） ：
start
end
center
spaceBetween
spaceEvenly ：所有间距一样。
spaceAround ：第一个子控件距开始位置和最后一个子控件距结尾位置是其他子控件间距的一半。

交叉轴对齐方式 （crossAxisAlignment）：
start
end
center
stretch

表示主轴尺寸（mainAxisSize）：
max
min

子组件交叉轴布局方向(verticalDirection)：
up ：从底部开始，并垂直堆叠到顶部，对齐方式的 start 在底部，end 在顶部。
down： 与 up 相反。

Container(
decoration: BoxDecoration(border: Border.all(color: Colors.black)),
child: Row(
//子组件主轴布局方向
textDirection: TextDirection.rtl,
//交叉轴
crossAxisAlignment: CrossAxisAlignment.start,
//主轴尺寸
mainAxisSize: MainAxisSize.min,
…

//子组件交叉轴布局方向
crossAxisAlignment: CrossAxisAlignment.center,
verticalDirection: VerticalDirection.up,
)
)
叠加布局
Stack 叠加组件
IndexedStack    通过index只显示在指定索引的组件

fit：StackFit.loose （默认，表示子组件自己决定）
fit: StackFit.expand  （尽可能的大）

//对其方式
alignment: AlignmentDirectional.center,

定位子组件：
Positioned()

//
overflow: Overflow.visible,
Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
height: 200,
width: 200,
color: Colors.red,
),
Container(
height: 170,
width: 170,
color: Colors.blue,
),
Container(
height: 140,
width: 140,
color: Colors.yellow,
)
],
)
流式布局
Warp

自定义布局
Flow

定位装饰组件 Container

背景颜色
color

内、外边距
padding
margin

设置子组件的背景颜色、形状等
decoration

对其方式：
alignment: Alignment(-.5,-.5),

设置最大/小宽、高来确定大小
constraints

旋转、平移、缩放
transform

eg code:
Container(
color: Colors.blue,
decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
child: Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(20),
color: Colors.red,
child: Text(‘老孟’),
),
)

固定宽高组件：

SizedBox ：可以没有子组件，但仍然会占用空间，所以 SizedBox 非常适合控制2个组件之间的空隙

无限大，会受到父组件的约束
height: double.infinity,
width: double.infinity,

Column(
children: <Widget>[
Container(height: 30,color: Colors.blue,),
SizedBox(height: 30,),
Container(height: 30,color: Colors.red,),
],
)

固定宽高比的组件 AspectRatio

Container(
height: 300,
width: 300,
color: Colors.blue,
alignment: Alignment.center,
child: AspectRatio(
aspectRatio: 2 / 1,
child: Container(color: Colors.red,),
),
)

相对父组件尺寸的组件 FractionallySizedBox

对齐
alignment

Container(
height: 200,
width: 200,
color: Colors.blue,
child: FractionallySizedBox(
alignment: Alignment.center,
widthFactor: .8,
heightFactor: .3,
child: Container(
color: Colors.red,
),
),
)
权重组件
Expanded、Flexible 和 Spacer
Spacer 是通过 Expanded 实现的，Expanded继承自Flexible。
填满剩余空间直接使用Expanded更方便。
Spacer 用于撑开 Row、Column、Flex 的子组件的空隙。

Flexible：
fit 参数表示填满剩余空间的方式，说明如下：
tight：必须（强制）填满剩余空间。
loose：尽可能大的填满剩余空间，但是可以不填满。

//中间一个组件占满全部，两边宽100
Row(
children: <Widget>[
Container(
color: Colors.blue,
height: 50,
width: 100,
),
Flexible(
child: Container(
color: Colors.red,
height: 50,
)
),
Container(
color: Colors.blue,
height: 50,
width: 100,
),
],
)

//还是有3个子组件，第一个占1/6，第二个占2/6，第三个占3/6，代码如下：
Column(
children: <Widget>[
Flexible(
flex: 1,
child: Container(
color: Colors.blue,
alignment: Alignment.center,
child: Text(‘1 Flex/ 6 Total’,style: TextStyle(color: Colors.white),),
),
),
Flexible(
flex: 2,
child: Container(
color: Colors.red,
alignment: Alignment.center,
child: Text(‘2 Flex/ 6 Total’,style: TextStyle(color: Colors.white),),
),
),
Flexible(
flex: 3,
child: Container(
color: Colors.green,
alignment: Alignment.center,
child: Text(‘3 Flex/ 6 Total’,style: TextStyle(color: Colors.white),),
),
),
],
)

Expanded 继承字 Flexible，fit 参数固定为 FlexFit.tight，也就是说 Expanded 必须（强制）填满剩余空间。
Row(
children: <Widget>[
Container(
color: Colors.blue,
height: 50,
width: 100,
),
Expanded(
child: OutlineButton(
child: Text(‘OutlineButton’),
),
),
Container(
color: Colors.blue,
height: 50,
width: 100,
),
],
)

Spacer 的本质也是 Expanded 的实现的，和Expanded的区别是：Expanded 可以设置子控件，而 Spacer 的子控件尺寸是0，因此Spacer适用于撑开 Row、Column、Flex 的子控件的空隙，
Row(
children: <Widget>[
Container(width: 100,height: 50,color: Colors.green,),
Spacer(flex: 2,),
Container(width: 100,height: 50,color: Colors.blue,),
Spacer(),
Container(width: 100,height: 50,color: Colors.red,),
],
)

 

 

Mark:

MainAxisAlignment和CrossAxisAlignment简介 :

https://blog.csdn.net/yuzhiqiang_1993/article/details/86496145