时间戳

首页 > 解决方案 > Flutter 中的 StackedBar 小部件

flutter - Flutter 中的 StackedBar 小部件

问题描述

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

标签： flutterflutter-layout

解决方案

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

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

推荐阅读