Flutter中的Stacked Bar小部件

Question

我正在尝试在Flutter中创建自己的水平堆积条形小部件，但我遇到了一些困难。这是我所拥有的代码的重复：

class StackedBar extends StatefulWidget {
  HashMap<int, double> factors = HashMap();

  StackedBar(){
    factors[0] = 0.1;
    factors[1] = 0.3;
    factors[2] = 0.5;
    factors[3] = 0.1;
  }

  @override
  _StackedBarState createState() => new _StackedBarState();
}

class _StackedBarState extends State<StackedBar> {

  @override
  Widget build(BuildContext context) {

    List<Widget> widgets = [];
    for (int i =0; i < widget.factors.length; i++) {
      var w = Flexible(
          child: FractionallySizedBox(
              widthFactor: widget.factors[i],
              child: Container(
                  height: 50,
                  color: ColorHelper.getColor(i))));

      widgets.add(w);
    }

    return Container(
            color: Colors.white,
            height: 50,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
                children: widgets));
  }
}

结果如下所示：所以你可以看到酒吧没有覆盖整行。我认为问题是FractionallySizedBox不是从行宽度计算它的分数，而是从小行在行内可用的空间计算（在我的情况下可能是行宽度的1/4）。我对么？如果是这样，什么是正确的解决方案？

Answer 1

使用Expanded而不是Flexible。像这样更改你的代码：

final HashMap<int, double> factors = HashMap();

  StackedBar(){
    factors[0] = 1;
    factors[1] = 3;
    factors[2] = 5;
    factors[3] = 1;
  }

在你的构建方法中：

for (int i =0; i < widget.factors.length; i++) {
      var w = Expanded(
        flex: widget.factors[i],
          child: Container(
              height: 50,
              color: Colors.accents[i]));

      widgets.add(w);
    }