Question

如何在Flex中弯曲文本小部件？我的文本周围有一个圆圈，需要为文本创建这种样式。另外，这个圆圈占据了屏幕宽度的50％，因此该曲线效果也应该是动态的

Answer 1

import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class CurvedText extends StatelessWidget {
  const CurvedText({
    Key key,
    @required this.radius,
    @required this.text,
    @required this.textStyle,
    this.startAngle = 0,
  }) : super(key: key);

  final double radius;
  final String text;
  final double startAngle;
  final TextStyle textStyle;

  @override
  Widget build(BuildContext context) => CustomPaint(
    painter: _Painter(
      radius,
      text,
      textStyle,
      initialAngle: startAngle,
    ),
  );
}

class _Painter extends CustomPainter {
  _Painter(this.radius, this.text, this.textStyle, {this.initialAngle = 0});

  final num radius;
  final String text;
  final double initialAngle;
  final TextStyle textStyle;

  final _textPainter = TextPainter(textDirection: TextDirection.ltr);

  @override
  void paint(Canvas canvas, Size size) {
    canvas.translate(size.width / 2, size.height / 2 - radius);

    if (initialAngle != 0) {
      final d = 2 * radius * math.sin(initialAngle / 2);
      final rotationAngle = _calculateRotationAngle(0, initialAngle);
      canvas.rotate(rotationAngle);
      canvas.translate(d, 0);
    }

    double angle = initialAngle;
    for (int i = 0; i < text.length; i++) {
      angle = _drawLetter(canvas, text[i], angle);
    }
  }

  double _drawLetter(Canvas canvas, String letter, double prevAngle) {
    _textPainter.text = TextSpan(text: letter, style: textStyle);
    _textPainter.layout(
      minWidth: 0,
      maxWidth: double.maxFinite,
    );

    final double d = _textPainter.width;
    final double alpha = 2 * math.asin(d / (2 * radius));

    final newAngle = _calculateRotationAngle(prevAngle, alpha);
    canvas.rotate(newAngle);

    _textPainter.paint(canvas, Offset(0, -_textPainter.height));
    canvas.translate(d, 0);

    return alpha;
  }

  double _calculateRotationAngle(double prevAngle, double alpha) =>
      (alpha + prevAngle) / 2;

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

Answer 2

也许您可以看看这个Flutter软件包。它可能对您没有什么帮助：link

Answer 3

使用 elliptic_text 包中包含的 EllipticText 小部件。该小部件可让您随意设置文本样式，并附带您想要的所有对齐选项。请参阅：https://pub.dev/packages/elliptic_text。举个例子：

SizedBox(
  height: 450.0,
  width: 300.0,
  child: EllipticText(
    text: "Smile! :) Why should text always be straight?",
    perimiterAlignment: EllipticText_PerimiterAlignment.bottom,
  ),
);

Flutter中的弯曲文字

3 个答案: