Flutter-Wrap流式布局

构造器

Wrap({
    Key key,
    this.direction = Axis.horizontal,//縱向，橫向
    this.alignment = WrapAlignment.start,//對齊方式
    this.spacing = 0.0,//間距
    this.runAlignment = WrapAlignment.start,
    this.runSpacing = 0.0,
    this.crossAxisAlignment = WrapCrossAlignment.start,//橫軸
    this.textDirection,//文字方向
    this.verticalDirection = VerticalDirection.down,//垂直方向
    List<Widget> children = const <Widget>[],
  }) : super(key: key, children: children);

一行中，会自动计算保证能够撑满，如果无法撑满，则会进行换行

import 'package:flutter/material.dart';
import 'package:flutter_rulin_teachingstaff/style/main_style.dart';

class ClassSeatsPage extends StatefulWidget {
  @override
  _ClassSeatsPageState createState() => _ClassSeatsPageState();
}

class _ClassSeatsPageState extends State<ClassSeatsPage> {
  List<String> _list = ['座位1','座位2','座位3','座位4','座位5','座位6','座位7','座位8','座位9','座位10'];

  List<Widget> _getWidget(){
    return _list.map((str) => Card(
      elevation: 3,
      child: Container(
        padding: EdgeInsets.only(top: 10),
        width: 60,
        height: 40,
        child: Text(
          str,
          textAlign: TextAlign.center,
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
        ),
      ),
    )).toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('上課位置'),
      ),
      body: Container(
        padding: EdgeInsets.all(10),
        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Card(
                  elevation: 3,
                  child: Container(
                    padding: EdgeInsets.only(top: 10),
                    width: 80,
                    height: 50,
                    child: Text(
                      '講台',
                      textAlign: TextAlign.center,
                      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
                    ),
                  ),
                )
              ],
            ),
            Wrap(
              spacing: 10,
              runAlignment: WrapAlignment.center,
              runSpacing: 10.0,
              children: _getWidget(),
            ),
          ],
        ),
      ),
    );
  }
}

/*`children: _list.map<Widget>((s)  {`
    
`return  Chip(`
    
`label:  Text('$s'),`
    
`avatar:  Icon(Icons.person),`
    
`deleteIcon:  Icon(`
    
`Icons.close,`
    
`color:  Colors.red,`
    
`),`*/

參考：http://www.ptbird.cn/flutter-wrapper.html#menu_index_1