面试题：Flutter Column布局下处理子Widget动态增减的垂直排列问题

Question

假设在Column布局中有一组子Widget，需求是在运行时动态添加或删除子Widget，并且确保新的布局能够保持良好的垂直排列，例如子Widget垂直居中且间距均匀。请描述你的实现思路，并写出关键代码片段。

Answer 1

实现思路

1. 使用StatefulWidget：因为需要动态添加或删除子Widget，所以使用StatefulWidget来管理状态变化。
2. 维护子Widget列表：在State类中创建一个列表来存储子Widget。
3. 添加和删除操作：提供方法来向列表中添加新的子Widget或从列表中删除指定的子Widget。
4. 布局设置：使用Column布局，并通过mainAxisAlignment设置为MainAxisAlignment.center来实现垂直居中，通过mainAxisSize设置为MainAxisSize.min以适应子Widget大小，同时使用crossAxisAlignment控制交叉轴对齐方式。对于间距均匀，可以使用Space或SizedBox来控制间距。

关键代码片段

import 'package:flutter/material.dart';

class DynamicColumn extends StatefulWidget {
  @override
  _DynamicColumnState createState() => _DynamicColumnState();
}

class _DynamicColumnState extends State<DynamicColumn> {
  List<Widget> _children = [];

  void _addChild() {
    setState(() {
      _children.add(Container(
        height: 50,
        width: 100,
        color: Colors.blue,
      ));
    });
  }

  void _removeChild(int index) {
    setState(() {
      if (index < _children.length) {
        _children.removeAt(index);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        for (int i = 0; i < _children.length; i++)
          Column(
            children: [
              _children[i],
              if (i < _children.length - 1) SizedBox(height: 10),
            ],
          ),
        ElevatedButton(
          onPressed: _addChild,
          child: Text('添加子Widget'),
        ),
        for (int i = 0; i < _children.length; i++)
          ElevatedButton(
            onPressed: () => _removeChild(i),
            child: Text('删除子Widget $i'),
          ),
      ],
    );
  }
}

在main函数中调用：

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: DynamicColumn(),
    ),
  ));
}