Flutter中使用Obx时如何实现标题居中显示

方案1：使用AppBar内置属性（推荐） #

AppBar 默认提供 centerTitle 配置项，开启后会自动将title区域内容居中，无需修改原有Obx渲染逻辑，代码示例如下：

AppBar(
  // 新增该行配置即可
  centerTitle: true,
  title: Obx(
    () => Text.rich(
      TextSpan(
        text: "${_questionController.questionNumber.value}. ",
        style: TextStyle(fontSize: 15, color: Colors.blue),
        children: [
          TextSpan(
            text: '${Questiontitle[widget.index]}',
            style: TextStyle(fontSize: 15, color: Colors.blue),
          ),
        ],
      ),
    ),
  ),
  // 其他AppBar配置...
)

方案2：手动调整容器约束适配 #

你之前使用Align不生效的原因是：AppBar的title区域默认宽度为内容自适应，Align没有足够的横向空间做居中对齐。你可以先通过SizedBox撑满title区域的可用宽度，再嵌套居中组件，代码示例如下：

AppBar(
  title: SizedBox(
    // 撑满title区域的全部横向可用空间
    width: double.infinity,
    child: Align(
      alignment: Alignment.center,
      child: Obx(
        () => Text.rich(
          TextSpan(
            text: "${_questionController.questionNumber.value}. ",
            style: TextStyle(fontSize: 15, color: Colors.blue),
            children: [
              TextSpan(
                text: '${Questiontitle[widget.index]}',
                style: TextStyle(fontSize: 15, color: Colors.blue),
              ),
            ],
          ),
        ),
      ),
    ),
  ),
  // 其他AppBar配置...
)

如果你的居中需求不是在AppBar的title场景中，也可以复用该思路：先保证居中组件的父容器有足够的宽高约束，再嵌套Center/Align即可实现对齐效果。

内容的提问来源于stack exchange，提问作者eno2