Flutter中FractionallySizedBox未按预期占可用空间问题排查

问题原因 #

你遇到的核心问题是对FractionallySizedBox的alignment参数理解有误：

• 这个参数的偏移比例不是基于父容器的整体尺寸，而是基于「父容器尺寸与子组件尺寸的差值」来计算的。
• 假设父容器宽度为W，子组件宽度为w = W * widthFactor（这里是0.1W），那么实际偏移量为(W - w) * alignment.x，而非你预期的W * alignment.x。
• 代入数值后，实际偏移量是0.9W * 0.1i = 0.09Wi，远小于预期的0.1Wi，这就导致方块起始位置偏左，无法填满对应空间。

解决方案 #

方案1：直接使用Positioned控制位置与宽度（推荐） #

放弃FractionallySizedBox，通过LayoutBuilder获取父容器宽度，直接计算每个方块的起始位置和宽度，逻辑更直观：

import 'package:flutter/material.dart';

void main() async {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const Scaffold(
        extendBodyBehindAppBar: true,
        body: Experiment(),
      )
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: SafeArea(
        child: LayoutBuilder(
          builder: (context, constraints) {
            final parentWidth = constraints.maxWidth;
            final itemWidth = parentWidth * 0.1;
            return Stack(
              alignment: Alignment.topLeft,
              children: [
                for (var i = 0; i < 10; ++i)
                  Positioned(
                    top: i * 20,
                    left: itemWidth * i,
                    width: itemWidth,
                    height: 20,
                    child: Container(
                      color: Colors.red,
                    ),
                  )
              ],
            );
          },
        ),
      ),
    );
  }
}

方案2：调整FractionallySizedBox的alignment参数 #

如果坚持使用FractionallySizedBox，需要重新计算alignment.x的取值，抵消子组件尺寸的影响：
根据公式(W - w) * alignment.x = 0.1 * i * W，代入w = 0.1W，可推导出alignment.x = i / 9。

修改后的核心代码片段：

FractionallySizedBox(
  alignment: FractionalOffset(i / 9, 0),
  widthFactor: 0.1,
  child: Container(
    color: Colors.red,
  ),
)

这样就能让每个红色方块的起始位置刚好是预期的0.1*i*W，形成完整的阶梯排列。

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