Flutter页面布局：Wrap组件

Wrap 可以实现流布局，单行的 Wrap 跟 Row 表现几乎一致，单列的 Wrap 则跟 Column 表现几乎一致。但 Row 与 Column 都是单行单列的，Wrap 则突破了这个限制，mainAxis 上空间不足时，则向crossAxis上去扩展显示，简单说就是如果你在x轴上进行布局，当x轴的元素溢出后他会自动扩展到另一行。

import 'package:flutter/material.dart';

class MyApp_Wrap extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Container(
      width: 400,
      height: 600,
      color: Colors.pink,
      child: Wrap(
        spacing: 10,
        runSpacing: 10,
        //alignment: WrapAlignment.center,  //不常用
        //runAlignment: WrapAlignment.spaceAround,
        direction: Axis.vertical,//排列方向
        children: [
          MyButton('hello'),
          MyButton('hello'),
          MyButton('hello'),
          MyButton('hello'),
          MyButton('hello'),
          MyButton('hello'),
          MyButton('hello'),
          MyButton('hello'),
          MyButton('hello'),
          MyButton('hello'),
          MyButton('hello'),
        ],
      ),
    );
  }
}

class MyButton extends StatelessWidget {
    
    
  final String text;

  const MyButton(this.text, {
    
    super.key});

  @override
  Widget build(BuildContext context) {
    
    
    // TODO: implement build
    return ElevatedButton(
      child: Text(this.text),
      style:
          ButtonStyle(foregroundColor: MaterialStateProperty.all(Colors.blue)),
      onPressed: null,
    );
  }
}