flutter画横向柱形图显示比列

最新推荐文章于 2023-07-25 17:46:59 发布

这是我的自己

最新推荐文章于 2023-07-25 17:46:59 发布

阅读量493

点赞数 1

分类专栏： flutter

本文链接：https://blog.csdn.net/weixin_41355989/article/details/110386805

版权

flutter 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果：
在这里插入图片描述
参考：http://laomengit.com/guide/widgets/Cylinder.html的柱形图，很笨的改了下实现自己要的效果。
固定底部的灰色的横条，利用Stack组件实现占比的“错觉”，好像也没什么了。。
代码：

Container(
  margin: EdgeInsets.only(right: 12),
  child: Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: List.generate(_width.length, (index) {
        return Row(
          children: <Widget>[
            Stack(
              children: <Widget>[
                Container(
                  color: footColors.background_gray,
                  width: 100.0,
                  height: 10.0,
                ),
                Container(
                    padding: EdgeInsets.only(bottom: 22),
                    child: _Cylinder(
                      height: _heightList,
                      width: _width[index],
                      color:footColors.green,
                    )
                )
              ],
            ),
            Container(
              margin:EdgeInsets.only(left: 12,bottom: 22),
              child: Text('${_width[index].toInt()}'+'%'),
            ),
          ],
        );
      })),
),

原始数据：

final double _heightList = 10.0;
List<double> _width = [25.0,30.0,10.0,70.0,30.0,60.0,50.0,10.0,];
List _dataName = ['1','2','3','4','5','6','7','8'];

柱形传值

class _Cylinder extends StatelessWidget {
  final double height;
  final double width;
  final Color color;

  const _Cylinder({Key key, this.height, this.width, this.color})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(seconds: 1),
      height: height,
      width: width,
      color: color,
    );
  }
}