Flutter中如何实现正确文本两端对齐：长文本生效短文本左对齐

问题描述 #

在Flutter的Text组件中使用textAlign: TextAlign.justify属性时，仅当文本宽度超过容器宽度时该属性才正常生效（文本两端对齐），但短文本会出现居中/拉伸字间距的情况，不符合常规文字处理器的段落对齐需求——需要长行文本两端对齐，短行文本左对齐。

问题代码 #

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: TestClass(),
      ),
    );
  }
}

class TestClass extends StatefulWidget {
  @override
  _TestClassState createState() => _TestClassState();
}

class _TestClassState extends State<TestClass> {
  double loginWidth = 40.0;

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            border: Border.all(),
        ),
        padding: EdgeInsets.all(10),
        child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
                const Text(
                    'If you have a long line of text then the text text is wider than the screen and it justifies correctly, just as you would expect. So far so good.',
                    textAlign: TextAlign.justify,
                ),
                const SizedBox(height: 20),
                const Text(
                    'This is wrong',
                    textAlign: TextAlign.justify,
                ),
            ],
        )
    );
  }
}

问题效果 #

解决方案 #

通过判断文本是否为单行，动态切换对齐方式：单行文本左对齐，多行文本两端对齐。我们可以自定义一个可复用组件，利用TextPainter计算文本行数，结合LayoutBuilder获取容器宽度实现需求。

自定义组件代码 #

class JustifyOrLeftText extends StatelessWidget {
  final String text;
  final TextStyle? style;

  const JustifyOrLeftText({super.key, required this.text, this.style});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 创建TextPainter计算文本是否会换行
        final textPainter = TextPainter(
          text: TextSpan(text: text, style: style),
          textDirection: TextDirection.ltr,
          maxLines: 1,
        )..layout(maxWidth: constraints.maxWidth);

        // 判断是否为单行文本
        final isSingleLine = !textPainter.didExceedMaxLines;

        return Text(
          text,
          style: style,
          // 单行左对齐，多行两端对齐
          textAlign: isSingleLine ? TextAlign.left : TextAlign.justify,
          // 让Text占满父容器宽度，保证多行文本正常两端对齐
          textWidthBasis: TextWidthBasis.parent,
        );
      },
    );
  }
}

替换原有Text组件 #

修改TestClass中的Column子组件：

Column(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    JustifyOrLeftText(
      text: 'If you have a long line of text then the text text is wider than the screen and it justifies correctly, just as you would expect. So far so good.',
    ),
    const SizedBox(height: 20),
    JustifyOrLeftText(
      text: 'This is wrong',
    ),
  ],
)

说明 #

• TextPainter用于在布局前判断文本在当前容器宽度下是否会换行，以此区分单行/多行文本。
• textWidthBasis: TextWidthBasis.parent确保Text组件占满父容器可用宽度，为多行文本的两端对齐提供必要空间。

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