Column、Row、Stack以及Center之前博客有过就不赘述了
get到了一些与布局相关的组件例如
1、FractionallySizedBox
class ListPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
FractionallySizedBox(
widthFactor: 1,//宽度要100%,即撑满
child: Container(
decoration: BoxDecoration(
color: Colors.greenAccent
),
child: Center(
child: Text('宽度撑满'),
),
),
),
],
);
}
}
2、ClipRRect
我一直少了中间的R,找了半个小时的bug,TMD!
Padding(
padding: EdgeInsets.all(20),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(40)),
child: Opacity(
opacity: 0.6,
child: Image.network('http://www.devio.org/img/avatar.png'),
),
),
)
3、Wrap
Wrap(//Wrap布局会从左到右进行排列,并且自动换行
spacing: 15,//水平间距
runSpacing: 10,//竖直间距
children: <Widget>[
_chip('C语言'),
_chip('C++'),
_chip('Java'),
_chip('Python'),
_chip('HTML'),
_chip('CSS'),
_chip('JavaScript'),
_chip('Dart'),
_chip('Flutter'),
],
)
_chip(String s) {
return Chip(
label: Text(s),
avatar: CircleAvatar(
backgroundColor: Colors.lightBlueAccent[200],
child: Text(
s.substring(0,1),
style:TextStyle(fontSize: 10),
),
),
);
}