Wrap流式布局使用

一、Wrap流式布局

Wrap 为子组件进行水平或者垂直方向布局，且当空间用完时，Wrap 会自动换行。

二、使用

/**
 * description：Wrap流式布局
 * demo1:  List.generate()
 * demo2:   myList.map().toList()----->List<Widget>
 */
class WrapDemo extends StatefulWidget {
    
    
  const WrapDemo({
    
    Key? key}) : super(key: key);

  @override
  _WrapDemoState createState() => _WrapDemoState();
}

class _WrapDemoState extends State<WrapDemo> {
    
    
  List names = [
    "aaa",
    "sss",
    "ddd",
    "fff",
    "ggg",
    "hhh",
    "jjj",
    "aaa",
    "sss",
    "ddd",
    "fff",
    "ggg",
    "hhh",
    "jjj"
  ];

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            wrapDemo1(),
            SizedBox(height: 50,),
            wrapDemo2()
          ],
        ),
      ),
    );
  }

  Widget wrapDemo1() {
    
    
    return Wrap(
      direction: Axis.horizontal,
      alignment: WrapAlignment.spaceEvenly, //主轴方向上对齐方式，作用于每一行
      // runAlignment: WrapAlignment.spaceEvenly,//交叉轴方向上,将每一行看作一个整体的对齐方式
      // crossAxisAlignment: WrapCrossAlignment.center,
      children: List.generate(names.length, (index) => getItem(index)),
    );
  }

  Widget wrapDemo2() {
    
    
    List<Widget> widgetList = names
        .map((element) => Card(
              //设置圆角
              shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(16))),
              elevation: 5, //阴影高度
              child: Text(
                element,
                style: const TextStyle(fontSize: 20),
              ),
            ))
        .toList();

    return Wrap(
      children: widgetList,
    );
  }

  Widget getItem(index) {
    
    
    return Card(
      child: Container(
        color: Colors.black12,
        width: 80,
        height: 50,
        child: Text(names[index]),
      ),
    );
  }
}