看效果就知道这个wrap的作用了,文字忽略,背景忽略。。。,这个的作用就是其实我们本来的数据是一行的,
然后一行放不下,就放下面去了,就相当于自动换行那种感觉。
’
然后还有各种方向的,但是感觉看起来感觉还行的就这种,毕竟很多软件都用到了这样的
class Layout extends StatelessWidget {
@override
Widget build(BuildContext context) {
// RaisedButton
return Container(
height: 200,
400,
color: Colors.deepOrangeAccent,
child: Wrap(
//填充满后会自动换行,扩展(所谓的牛布局)
spacing: 10,
runSpacing: 10,
// direction: Axis.vertical, //方向变成垂直排列
// runAlignment: WrapAlignment.end,
// alignment: WrapAlignment.end,//右对齐
children: [
MyButton("斗罗大陆"),
MyButton("斗破苍穹"),
MyButton("霸道总裁爱上我"),
MyButton("大主宰"),
MyButton("武动乾坤"),
MyButton("老婆粉了解一下"),
MyButton("满级绿茶穿成小可怜"),
MyButton("你微笑时很美"),
],
),
);
}
}
class MyButton extends StatelessWidget {
final String text;
const MyButton(this.text, {Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return ElevatedButton(
//raisedButton被弃用了,用这个好像还行,帮助文档说的
child: Text(
//研究半天,自己搞会了这个按钮。。。
this.text,
style: TextStyle(),
),
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(Colors.black),
backgroundColor: MaterialStateProperty.all(Colors.white),
side: MaterialStateProperty.all(
BorderSide(
1.0,
color: Colors.lightBlueAccent,
style: BorderStyle.solid,
),
),
),
onPressed: () {},
);
}
}
因为很多组件被弃用了,所以得自己会看这些更新后的组件(我也不会,得摸索下,多看看源码,源码里面的注释非常的详细)