App中Label文本过长被截断，如何实现从右向左滚动显示？

针对空间有限的Label组件，当文本过长时实现从右向左的滚动（跑马灯）效果，以下是主流平台的具体实现方案：

Android（原生） #

方案1：使用原生TextView属性 #

通过配置TextView核心属性实现自动滚动，默认TextView需焦点触发滚动，可通过焦点设置强制生效：

<TextView
    android:id="@+id/scrollingLabel"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="Martinus Velikus Test"
    android:singleLine="true"
    android:ellipsize="marquee"
    android:marqueeRepeatLimit="marquee_forever"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:scrollHorizontally="true"/>

方案2：自定义TextView（无需焦点也能滚动） #

若需Label无需获取焦点也持续滚动，可自定义TextView强制返回焦点状态：

public class MarqueeTextView extends TextView {
    public MarqueeTextView(Context context) {
        super(context);
        init();
    }

    public MarqueeTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        setSingleLine(true);
        setEllipsize(TextUtils.TruncateAt.MARQUEE);
        setMarqueeRepeatLimit(-1); // 无限重复滚动
    }

    @Override
    public boolean isFocused() {
        return true; // 强制标记为焦点状态，触发滚动
    }
}

iOS（Swift） #

通过UIKit动画实现文本从右向左滚动，仅当文本宽度超过Label宽度时启动动画：

class ScrollingLabel: UILabel {
    override func layoutSubviews() {
        super.layoutSubviews()
        startScrollAnimation()
    }

    private func startScrollAnimation() {
        guard let text = text, let font = font else { return }
        let textSize = text.size(withAttributes: [.font: font])
        
        // 仅当文本宽度超过Label宽度时启动滚动
        guard textSize.width > bounds.width else {
            layer.removeAnimation(forKey: "textScroll")
            return
        }
        
        let animation = CABasicAnimation(keyPath: "position.x")
        animation.fromValue = bounds.midX + textSize.width / 2
        animation.toValue = bounds.midX - textSize.width / 2
        animation.duration = Double(textSize.width) * 0.03 // 按文本长度调整速度
        animation.repeatCount = .infinity
        animation.timingFunction = CAMediaTimingFunction(name: .linear)
        layer.add(animation, forKey: "textScroll")
    }
}

Flutter #

通过AnimationController实现文本平移，自动判断是否需要滚动：

class ScrollingText extends StatefulWidget {
  final String text;
  final double containerWidth;
  final TextStyle? textStyle;

  const ScrollingText({
    super.key,
    required this.text,
    required this.containerWidth,
    this.textStyle,
  });

  @override
  State<ScrollingText> createState() => _ScrollingTextState();
}

class _ScrollingTextState extends State<ScrollingText> with SingleTickerProviderStateMixin {
  late AnimationController _scrollController;
  double _textWidth = 0;

  @override
  void initState() {
    super.initState();
    _scrollController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 4),
    )..repeat();
    
    // 布局完成后计算文本宽度
    WidgetsBinding.instance.addPostFrameCallback((_) => _calculateTextWidth());
  }

  void _calculateTextWidth() {
    final painter = TextPainter(
      text: TextSpan(text: widget.text, style: widget.textStyle),
      maxLines: 1,
      textDirection: TextDirection.ltr,
    )..layout(maxWidth: double.infinity);
    
    setState(() => _textWidth = painter.width);
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: widget.containerWidth,
      child: _textWidth > widget.containerWidth
          ? AnimatedBuilder(
              animation: _scrollController,
              builder: (context, child) {
                return Transform.translate(
                  offset: Offset(-_textWidth * _scrollController.value, 0),
                  child: child,
                );
              },
              child: Text(widget.text, style: widget.textStyle),
            )
          : Text(widget.text, style: widget.textStyle),
    );
  }
}

Web（HTML/CSS） #

使用CSS动画实现纯前端滚动效果，支持自动触发：

<div class="scrolling-label auto-scroll">
  Martinus Velikus Test
</div>

<style>
.scrolling-label {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}

.auto-scroll {
  animation: scrollLeft 8s linear infinite;
}

/* 从右向左滚动的动画关键帧 */
@keyframes scrollLeft {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>

通用注意事项 #

• 优先判断文本宽度是否超过Label宽度，仅在过长时启动滚动，避免短文本无效动画
• 滚动速度可根据文本长度调整，保证用户阅读体验
• 部分平台原生组件需处理焦点或自定义逻辑，确保滚动持续生效

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