首页 > 解决方案 > 颤振图表,将文本置于中心

问题描述

我正在使用Flutter Charts创建一个圆环图。我想在甜甜圈中放置一个文本以及一个图例。

我尝试使用 a Center Widgetinside a但如果我将 a作为行为添加到图表中,Stack Widget它不会将文本放在中心。DatumLegend如果我删除图例,它会在正确的位置显示文本。

我的图表代码是:

Stack(
  children: <Widget>[
    charts.PieChart(
      getseriesList(_values),
      animate: true,
      defaultRenderer: charts.ArcRendererConfig(
          arcWidth: 40,
          arcRendererDecorators: [
            charts.ArcLabelDecorator(
                labelPosition: charts.ArcLabelPosition.outside)
          ]),
      defaultInteractions: true,
      behaviors: [
        charts.DatumLegend(
          position: charts.BehaviorPosition.bottom,
          desiredMaxColumns: 4,
          legendDefaultMeasure: charts.LegendDefaultMeasure.none,
        ),
      ],
    ),
    Center(
      child: Container(
        margin: EdgeInsets.only(top: 4),
        child: Text(
          'CenterText',
          style: TextStyle(
            color: Colors.black38,
            fontWeight: FontWeight.w700,
          ),
        ),
      ),
    ),
  ],
)

在这里,我希望将99其放置在中心。 .

标签: flutterchartsflutter-layout

解决方案


使用对齐方式:来自 Stack 的 Alignment.center。

Stack(
    alignment: Alignment.center,
    children: [
      SizedBox(
        width: 200,
        height: 200,
        child: pieCard(widget.items),
      ),
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(label),
          Text('R\$ 2.500,0'),
        ],
      ),
    ],
  );

推荐阅读