Flutter：TextField提示文本居中失效解决及弧形文本实现

一、让TextField的提示文本居中对齐 #

你当前代码里的textAlign: TextAlign.center只能控制输入后的文本居中，而提示文本（hintText）的对齐需要在InputDecoration里单独设置。因为你用了InputDecoration.collapsed，这个构造函数没有暴露hintTextAlign参数，所以我们可以换成普通的InputDecoration，设置border: InputBorder.none来达到和collapsed一样的无边框效果，再添加hintTextAlign参数来控制提示文本居中。

修改后的代码如下：

Container(
  child: TextFormField(
    controller: _pass,
    textAlign: TextAlign.center, // 控制输入后的文本居中
    decoration: InputDecoration(
      border: InputBorder.none, // 实现和collapsed一致的无边框样式
      hintText: "PASSWORD",
      hintTextAlign: TextAlign.center, // 关键：设置提示文本居中
    ),
  ),
)

二、实现弧形文本的书写 #

Flutter没有自带的弧形文本组件，我们可以通过两种方式实现：

方式1：自定义CustomPainter绘制 #

通过CustomPainter计算每个字符的位置，沿着圆弧路径逐个绘制字符，这种方式灵活性最高。下面是一个完整的自定义组件示例：

import 'dart:math' as math;
import 'package:flutter/material.dart';

class ArcText extends StatelessWidget {
  final String text;
  final double radius;
  final TextStyle style;

  const ArcText({
    Key? key,
    required this.text,
    required this.radius,
    required this.style,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: _ArcTextPainter(
        text: text,
        radius: radius,
        style: style,
      ),
      size: Size(radius * 2, radius),
    );
  }
}

class _ArcTextPainter extends CustomPainter {
  final String text;
  final double radius;
  final TextStyle style;

  _ArcTextPainter({
    required this.text,
    required this.radius,
    required this.style,
  });

  @override
  void paint(Canvas canvas, Size size) {
    // 计算每个字符对应的圆弧角度
    final double anglePerChar = 2 * math.pi / text.length;
    // 从圆弧顶部开始绘制
    final double startAngle = -math.pi / 2;

    for (int i = 0; i < text.length; i++) {
      final char = text[i];
      final charSpan = TextSpan(text: char, style: style);
      final charPainter = TextPainter(
        text: charSpan,
        textDirection: TextDirection.ltr,
      );
      charPainter.layout();

      // 计算当前字符的位置坐标
      final angle = startAngle + i * anglePerChar;
      final x = radius + radius * math.cos(angle) - charPainter.width / 2;
      final y = radius + radius * math.sin(angle) - charPainter.height / 2;

      // 保存画布状态，绘制字符后恢复
      canvas.save();
      canvas.translate(x, y);
      // 旋转字符使其贴合圆弧方向
      canvas.rotate(angle + math.pi / 2);
      charPainter.paint(canvas, Offset.zero);
      canvas.restore();
    }
  }

  @override
  bool shouldRepaint(covariant _ArcTextPainter oldDelegate) {
    return text != oldDelegate.text ||
        radius != oldDelegate.radius ||
        style != oldDelegate.style;
  }
}

使用这个组件时，只需要传入文本、圆弧半径和样式即可：

ArcText(
  text: "HELLO ARC TEXT",
  radius: 100,
  style: TextStyle(fontSize: 18, color: Colors.black),
)

方式2：使用第三方包 #

如果不想自己写自定义组件，也可以使用Flutter社区提供的第三方包来快速实现弧形文本，这类包已经封装好了绘制逻辑，你可以直接调用API使用。

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