1 Expanded用于填充Row或者Column
new Expanded(child: title)
2 和上一個(gè)類似吧,也是在Row或者Column里面用,注意flex屬性
new Flexible(
flex: 1,
child: new RaisedButton(
onPressed: () {
print('點(diǎn)擊黃色按鈕事件');
},
color: const Color(0xfff1c232),
child: new Text('黃色按鈕'),
),
),
效果圖
image.png
image.png
3 Stack 堆疊,類似于安卓的幀布局,FrameLayout
new Stack(
children: <Widget>[
new Image.network('http://img2.cxtuku.com/00/13/12/s97783873391.jpg'),
new Positioned(
left: 35.0,
right: 35.0,
top: 45.0,
child: new Text(
'Whatever is worth doing is worth doing well. ???.???',
style: new TextStyle(
fontSize: 20.0,
fontFamily: 'serif',
),
),
),
]
),
image.png
4 Align控件即對(duì)齊控件,能將子控件所指定方式對(duì)齊肋杖,并根據(jù)子控件的大小調(diào)整自己的大小。
new Align(
alignment: new FractionalOffset(0.0, 0.0),
child: new Image.network('http://up.qqjia.com/z/25/tu32710_10.jpg'),
),
new Align(
alignment: FractionalOffset.bottomRight,
child: new Image.network('http://up.qqjia.com/z/25/tu32710_11.jpg'),
),
5 Padding控件即填充控件,能給子控件插入給定的填充松逊。
new Padding(
padding: const EdgeInsets.all(50.0),
child: new Image.network('http://up.qqjia.com/z/25/tu32710_4.jpg'),
),
6
SizedBox控件能強(qiáng)制子控件具有特定寬度白胀、高度或兩者都有
AspectRatio控件能強(qiáng)制子小部件的寬度和高度具有給定的寬高比晰赞,以寬度與高度的比例表示。
new SizedBox(
width: 250.0,
height: 250.0,
child: new Container(
height: 100.0,
width: 100.0,
decoration: new BoxDecoration(
color: Colors.lightBlueAccent[100],
),
),
),
new AspectRatio(
aspectRatio: 3.0 / 2.0,
child: new Container(
decoration: new BoxDecoration(
color: Colors.lightBlueAccent[100],
),
),
),
7 DecoratedBox控件會(huì)在子控件繪制之前或之后繪制一個(gè)裝飾绕沈。
new DecoratedBox(
decoration: new BoxDecoration(
gradient: new LinearGradient(
begin: const FractionalOffset(0.0, 0.0),
end: const FractionalOffset(1.0, 1.0),
colors: <Color>[const Color(0xffff2cc), const Color(0xffff6eb4)],
)
),
child: new Container(
width: 250.0,
height: 250.0,
),
),
8 Opacity控件能調(diào)整子控件的不透明度,使子控件部分透明帮寻,不透明度的量從0.0到1.1之間乍狐,0.0表示完全透明,1.1表示完全不透明固逗。
new Opacity(
opacity: 0.1,
child: new Container(
width: 250.0,
height: 100.0,
decoration: new BoxDecoration(
backgroundColor: const Color(0xff000000),
),
),
),
9 PopupMenuButton控件即彈出菜單控件浅蚪,點(diǎn)擊控件會(huì)出現(xiàn)菜單。
new PopupMenuButton<String>(
onSelected: (String value) {
setState(() {
_bodyStr = value;
});
},
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
new PopupMenuItem<String>(
value: '選項(xiàng)一的值',
child: new Text('選項(xiàng)一')
),
new PopupMenuItem<String>(
value: '選項(xiàng)二的值',
child: new Text('選項(xiàng)二')
)
]
)
10 進(jìn)度條LinearProgressIndicator控件是質(zhì)感設(shè)計(jì)中的線性進(jìn)度指示器
new LinearProgressIndicator(value: currentEmergy / maximumEmergy),