Flutter 中的 StackedBar 小部件答案

【问题标题】：StackedBar widget in FlutterFlutter 中的 StackedBar 小部件
【发布时间】：2019-08-28 02:42:57
【问题描述】：

我正在尝试在 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）计算它的分数。我对么？如果是这样，正确的解决方案是什么？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

使用扩展而不是灵活。像这样更改您的代码：

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);
    }

【讨论】：