如何为Widget列表中的每个元素包裹Flexible组件

你只需要在构建Row的children时，对传入的widgets列表做遍历映射，给每个子组件都包裹一层Flexible即可，修改后的代码如下：

class FlexElement extends StatelessWidget {
  final List<Widget> widgets;
  final bool isVisible;

  const FlexElement({
    Key? key,
    required this.widgets,
    required this.isVisible,
  }) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Visibility(
      visible: isVisible,
      child: Container(
        child: Row(
          // 遍历列表，给每个widget包裹Flexible
          children: widgets.map((widget) => Flexible(child: widget)).toList(),
        ),
      ),
    );
  }
}

补充说明 #

如果后续需要给不同子组件设置不同的flex权重，可以给FlexElement新增一个可选的权重列表参数，示例如下：

class FlexElement extends StatelessWidget {
  final List<Widget> widgets;
  final bool isVisible;
  final List<int>? flexValues; // 新增可选权重列表参数

  const FlexElement({
    Key? key,
    required this.widgets,
    required this.isVisible,
    this.flexValues,
  }) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Visibility(
      visible: isVisible,
      child: Container(
        child: Row(
          children: List.generate(widgets.length, (index) {
            // 优先使用传入的权重值，默认权重为1
            final flex = flexValues?[index] ?? 1;
            return Flexible(
              flex: flex,
              child: widgets[index],
            );
          }),
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者danzo