使用min width与FractionallySizedBox时的Flutter列宽适配问题

核心问题是错误地将FractionallySizedBox放在了带最小约束的容器内部，导致内部列的宽度被绑定到屏幕宽度的40%，而非容器自身的宽度。正确的做法是让容器本身的宽度取屏幕宽度40%和最小宽度450中的较大值，内部直接用Row+Expanded实现两等分即可。

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

  @override
  Widget build(BuildContext context) {
    // 获取屏幕宽度
    final screenWidth = MediaQuery.of(context).size.width;
    // 容器宽度取屏幕40%和最小宽度450的较大值
    final containerWidth = screenWidth * 0.4 >= 450 ? screenWidth * 0.4 : 450;

    return Scaffold(
      body: Center(
        child: Container(
          width: containerWidth,
          constraints: const BoxConstraints(minHeight: 300),
          color: Colors.green,
          child: Row(
            children: [
              Expanded(
                child: Container(
                  color: Colors.red,
                  child: const Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [Text('1'), Text('2'), Text('3')],
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.blue,
                  child: const Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [Text('1'), Text('2'), Text('3')],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

• 直接计算容器宽度：通过MediaQuery获取屏幕宽度，算出容器最终宽度（屏幕40%与450取大），替代原有的FractionallySizedBox，确保容器宽度符合需求且内部元素依赖该宽度。
• 移除冗余层级：去掉了多余的AspectRatio（原需求未提及比例要求，若需要可根据实际情况添加），简化组件结构。
• 实现自适应等分：内部Row配合两个Expanded，会自动将容器宽度平分为两部分，无论容器是取屏幕40%还是最小宽度，列宽都会跟随容器宽度变化，不会出现异常。

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