如何让ChildWidget动态适配ParentWidget宽度，设为父组件的20%

在Flutter中实现子组件宽度动态适配父组件的20%，有两种简洁高效的方案，都能自动响应父组件宽度变化：

方案一：使用FractionallySizedBox（推荐，代码最简洁） #

FractionallySizedBox是Flutter官方提供的组件，专门用于按父组件尺寸的比例设置子组件大小，直接通过widthFactor参数指定比例即可：

class ParentWidget extends StatelessWidget {
  final double? width;

  const ParentWidget({super.key, this.width});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: 100,
      color: Colors.grey[200],
      child: const ChildWidget(),
    );
  }
}

class ChildWidget extends StatelessWidget {
  const ChildWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return FractionallySizedBox(
      widthFactor: 0.2, // 直接设置为父组件宽度的20%
      child: Container(
        height: 80,
        color: Colors.blue,
        alignment: Alignment.center,
        child: const Text('宽度为父组件的20%'),
      ),
    );
  }
}

说明 #

• widthFactor: 0.2表示子组件宽度占父组件可用宽度的20%
• 当父组件宽度变化（比如屏幕旋转、父容器尺寸动态调整），FractionallySizedBox会自动重新计算子组件宽度，无需额外处理

方案二：使用LayoutBuilder（更灵活，适合需要额外逻辑的场景） #

如果需要基于父组件宽度做更多自定义逻辑（比如根据宽度范围调整比例），可以用LayoutBuilder获取父组件的约束信息，手动计算子组件宽度：

class ParentWidget extends StatelessWidget {
  final double? width;

  const ParentWidget({super.key, this.width});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: 100,
      color: Colors.grey[200],
      child: const ChildWidget(),
    );
  }
}

class ChildWidget extends StatelessWidget {
  const ChildWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 获取父组件的最大可用宽度
        final parentMaxWidth = constraints.maxWidth;
        // 计算20%的宽度
        final childWidth = parentMaxWidth * 0.2;

        return Container(
          width: childWidth,
          height: 80,
          color: Colors.blue,
          alignment: Alignment.center,
          child: Text('当前宽度：${childWidth.toStringAsFixed(1)}'),
        );
      },
    );
  }
}

说明 #

• LayoutBuilder的builder函数会接收父组件的constraints参数，其中maxWidth就是父组件能提供的最大宽度
• 每次父组件宽度变化时，builder会重新执行，自动更新子组件宽度

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