dart Flutter -创建TextAlign动画

mnemlml8  于 2023-11-14  发布在  Flutter
关注(0)|答案(1)|浏览(119)

我想知道是否有一种方法来动画文本对齐就像你会做的AnimatedAlign部件。
事实上,如果AnimatedDefaultTextStyle接受textAlign就好了,就像一个带有BoxDecoration的容器覆盖了容器中的一些字段(但遗憾的是它不会),请伙计们,我真的很好奇这是否可以实现。

AnimatedDefaultTextStyle(
    style: TextStyle(
        fontSize: appState.textSize.value,
        color: Colors.white,
        ),
        curve: Curves.elasticOut,
        duration: const Duration(milliseconds: 700),
        child: TextAnimator(
            hey,
            characterDelay: const Duration(milliseconds: 8),
            incomingEffect: WidgetTransitionEffects.outgoingScaleUp(
              duration: const Duration(milliseconds: 100)),
            outgoingEffect: WidgetTransitionEffects.outgoingScaleUp(),
            textAlign: appState.textAlign.value //receives TextAlign.center/left/right,
         ),

字符串
在上面的例子中,AnimatedDefaultTextStyle将对style:TextStyle()上的任何更改进行动画处理;而TextAnimator(它是一个包)将转换任何字符串变量的更改。
我期待一些深入的方法,因为我找不到一个答案,在所有的互联网,甚至pub.dev
也许扩展TextAlign并插入动画?
谢谢你,谢谢!
做研究和之后寻找第三个软件包,但我甚至不能抓到解决这个问题的技巧,因为我缺乏一些更深层次的微调Flutter的经验。
编辑1:我已经研究过了,我创造了一个有点可能的解决方案:

  • 制作一个自定义小部件,这个小部件将检测文本何时覆盖并断开新行。
  • 我们将选择新行中的文本部分,并将其放入模拟新行的新容器中,并重复第一个过程,直到我们将所有行容器化。
  • 然后我们可以像其他小部件一样对容器列表进行动画处理,模拟TextDirection的变化。

如果有人在这方面有经验,我会很高兴地感谢你,如果你能帮助我的一部分线打破和集装箱循环。
编辑二:现在我可以开始这个想法的技巧:image每一行都在一个容器中,自定义Widget只接收一个大的String和一个maxWidth字段。

8dtrkrch

8dtrkrch1#

您可以通过创建自己的ImplicitlyAnimatedWidget来实现这一点。
由于参数AlignmentGeometry包含lerp的静态方法,AnimatedContainer可以使用指定的visitor函数来评估此状态控制的每个tween的值。因此,简而言之,您还需要为TextAlign的静态方法添加一个扩展。
这可能需要做很多工作,但对我来说,你可以使用AnimatedContainer中现有的AlignmentGeometry属性,然后创建一个自定义扩展,将TextAlign的值转换为AlignGeometry的值。
范例:

extension TextAlignX on TextAlign {
  /// Converts this [TextAlign] to [AlignmentGeometry].
  AlignmentGeometry get toAlignGeometry {
    switch (this) {
      case TextAlign.left:
        return Alignment.centerLeft;
      case TextAlign.right:
        return Alignment.centerRight;
      case TextAlign.center:
        return Alignment.center;
      default:
        return Alignment.centerLeft;
    }
  }
}

字符串


的数据
验证码:

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

extension TextAlignX on TextAlign {
  /// Converts this [TextAlign] to [AlignmentGeometry].
  AlignmentGeometry get toAlignGeometry {
    switch (this) {
      case TextAlign.left:
        return Alignment.centerLeft;
      case TextAlign.right:
        return Alignment.centerRight;
      case TextAlign.center:
        return Alignment.center;
      default:
        return Alignment.centerLeft;
    }
  }
}

class _MyHomePageState extends State<MyHomePage> {
  Color color = Colors.black;
  TextAlign align = TextAlign.end;

  void _incrementCounter() {
    setState(() {
      color = Colors.red;
      // Just to change the alignment randomly.
      align = TextAlign.values[Random().nextInt(4)];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedContainer(
              width: 200,
              height: 200,
              color: Colors.yellow.withOpacity(0.5),
              alignment: align.toAlignGeometry,
              duration: const Duration(milliseconds: 500),
              child: AnimatedDefaultTextStyle(
                style: TextStyle(
                  color: color,
                  fontSize: 15,
                ),
                textAlign: TextAlign.center,
                duration: const Duration(milliseconds: 500),
                child: const Text('Animated Text Align'),
              ),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

相关问题