Flutter中如何将Dialog内的RichText左对齐？

你的问题出在Column默认是居中对齐，而且RichText默认宽度是包裹自身内容，所以即使设置了textAlign: TextAlign.left也不会有明显效果——文本本身已经占满了自身宽度，对齐属性无法生效。

给你几个可行的解决办法：

方法1：用Align组件包裹RichText #

直接给RichText套一个Align，强制左对齐，最简单直接：

Future getAuthorsDialog(BuildContext context) {
  return showDialog<String>(
    context: context,
    builder: (BuildContext context) => Dialog(
      insetPadding: const EdgeInsets.symmetric(vertical: 90.0),
      child: Column(
          children: <Widget>[
            const SizedBox(height: 8.0),
            // 新增Align组件强制左对齐
            Align(
              alignment: Alignment.centerLeft,
              child: RichText(
                textAlign: TextAlign.left,
                text: const TextSpan(
                  text: 'Mod: ',
                  style: TextStyle(
                      fontSize: 12.0,
                      fontWeight: FontWeight.bold
                  ),
                  children: [
                    TextSpan(
                        text: 'Tester',
                        style: TextStyle(
                            fontSize: 12.0,
                            fontWeight: FontWeight.w600
                        )
                    ),
                  ]
                )
              ),
            ),
       ]),
    ),
  );
}

方法2：修改Column的交叉轴对齐 #

给Column设置crossAxisAlignment: CrossAxisAlignment.start，让所有子元素左对齐，同时可以给Dialog的child加padding避免内容贴边：

Future getAuthorsDialog(BuildContext context) {
  return showDialog<String>(
    context: context,
    builder: (BuildContext context) => Dialog(
      insetPadding: const EdgeInsets.symmetric(vertical: 90.0),
      // 加内边距避免内容贴边缘
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: Column(
            // 设置交叉轴左对齐
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              const SizedBox(height: 8.0),
              RichText(
                textAlign: TextAlign.left,
                text: const TextSpan(
                  text: 'Mod: ',
                  style: TextStyle(
                      fontSize: 12.0,
                      fontWeight: FontWeight.bold
                  ),
                  children: [
                    TextSpan(
                        text: 'Tester',
                        style: TextStyle(
                            fontSize: 12.0,
                            fontWeight: FontWeight.w600
                        )
                    ),
                  ]
                )
              ),
         ]),
      ),
    ),
  );
}

方法3：让RichText占满宽度 #

给RichText套一个宽度设为double.infinity的Container，这样RichText会占满可用宽度，textAlign: TextAlign.left就会生效：

Future getAuthorsDialog(BuildContext context) {
  return showDialog<String>(
    context: context,
    builder: (BuildContext context) => Dialog(
      insetPadding: const EdgeInsets.symmetric(vertical: 90.0),
      child: Column(
          children: <Widget>[
            const SizedBox(height: 8.0),
            Container(
              width: double.infinity,
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: RichText(
                textAlign: TextAlign.left,
                text: const TextSpan(
                  text: 'Mod: ',
                  style: TextStyle(
                      fontSize: 12.0,
                      fontWeight: FontWeight.bold
                  ),
                  children: [
                    TextSpan(
                        text: 'Tester',
                        style: TextStyle(
                            fontSize: 12.0,
                            fontWeight: FontWeight.w600
                        )
                    ),
                  ]
                )
              ),
            ),
       ]),
    ),
  );
}

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