第7章页面布局-Wrap按宽高自动换行布局
防采集标记:亢少军老师的课程和资料
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: 'Wrap按宽高自动换行布局示例',
home: new MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Wrap按宽高自动换行布局示例'),
),
body: Wrap(
spacing: 8.0, // Chip之间的间隙大小
runSpacing: 4.0, // 行之间的间隙大小
children: [
Chip(
//添加圆形头像
avatar: CircleAvatar(
backgroundColor: Colors.lightGreen.shade800, child: new Text('西门', style: TextStyle(fontSize: 10.0),)),
label: Text('西门吹雪'),
),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.lightBlue.shade700, child: new Text('司空', style: TextStyle(fontSize: 10.0),)),
label: Text('司空摘星'),
),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.orange.shade800, child: new Text('婉清', style: TextStyle(fontSize: 10.0),)),
label: Text('木婉清'),
),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900, child: new Text('一郎', style: TextStyle(fontSize: 10.0),)),
label: Text('萧十一郎'),
),
],
),
);
}
}
- Flutter技术入门与实战: http://product.dangdang.com/26485813.html
- Flutter交流学习群:894109159
- Flutter开源项目请关注: https://github.com/kangshaojun
- Flutter****:https://edu.csdn.net/lecturer/2436
@作者: 亢少军