Question

我在堆栈中调用了两个小部件。我正在尝试将“ 0”文本放置在表盘中央。我正在尝试在“列”中调用这两个小部件，但似乎不起作用。

这是我的代码：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: kAppBar(),
      body: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.topCenter,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                AnimatedCircularChart(
                  key: _chartKey,
                  size: _chartSize,
                  initialChartData: <CircularStackEntry>[
                    new CircularStackEntry(
                      <CircularSegmentEntry>[
                        new CircularSegmentEntry(
                          33.33,
                          kDarkOrange,
                          rankKey: 'completed',
                        ),
                        new CircularSegmentEntry(
                          66.67,
                          kOrange.withOpacity(0.3),
                          rankKey: 'remaining',
                        ),
                      ],
                      rankKey: 'progress',
                    ),
                  ],
                  chartType: CircularChartType.Radial,
                  edgeStyle: SegmentEdgeStyle.round,
                  percentageValues: true,
                ),
                Text(
                  '0',
                  style: TextStyle(
                    color: Color(0xFFFF8C3B),
                    fontSize: 80,
                    fontFamily: 'Netflix',
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

这是输出的样子：

this是我要达到的目标。

Answer 1

不需要使用堆栈。只需将要显示的文本放在AnimatedCircularChart的HoleLabel构造函数中。它应该是这样的：

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: kAppBar(),
  body: AnimatedCircularChart(
    key: _chartKey,
    size: _chartSize,
    holeLabel: '0',
    labelStyle: TextStyle(
      color: Color(0xFFFF8C3B),
      fontSize: 80,
      fontFamily: 'Netflix',
      fontWeight: FontWeight.bold,
    ),
    initialChartData: <CircularStackEntry>[
      new CircularStackEntry(
        <CircularSegmentEntry>[
          new CircularSegmentEntry(
            33.33,
            kDarkOrange,
            rankKey: 'completed',
          ),
          new CircularSegmentEntry(
            66.67,
            kOrange.withOpacity(0.3),
            rankKey: 'remaining',
          ),
        ],
        rankKey: 'progress',
      ),
    ],
    chartType: CircularChartType.Radial,
    edgeStyle: SegmentEdgeStyle.round,
    percentageValues: true,
  ),
);
}

如何在Flutter的中心对齐小部件？

1 个答案: