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

【问题标题】：How to align a widget in the center in Flutter?如何在 Flutter 的中心对齐小部件？
【发布时间】：2020-08-04 19:41:21
【问题描述】：

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

这是我的代码：

  @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 是我想要实现的目标。

【问题讨论】：

holeLabel: '0' 将此添加到AnimatedCircularChart。
工作得很好，谢谢！！ @Mobina

标签： flutter user-interface dart

【解决方案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,
  ),
);
}

【讨论】：