Flutter动画效果插件animated_overflow的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter动画效果插件animated_overflow的使用

Cosmos Software

Pub License

这是一个用于水平或垂直淡入淡出动画的简单小部件。

媒体

观看视频：

<iframe width="560" height="315" src="https://www.youtube.com/embed/8Mq5oD5cWiw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>





描述

这是一个用于水平或垂直淡入淡出动画的简单小部件。

如何使用

只需创建一个 AnimatedOverflow 小部件，如示例所示：

AnimatedOverflow({
    Key key,
    animatedOverflowDirection,
    child,
    maxHeight,
    maxWidth,
    padding : 0.0,
    speed   : 50})

进一步解释：

  • [animatedOverflowDirection] 和 [child] 不能为 null。
  • [maxHeight] 只在 [animatedOverflowDirection] 为 [AnimatedOverflowDirection.VERTICAL] 时才考虑，并且不应为 null。
  • [maxWidth] 只在 [animatedOverflowDirection] 为 [AnimatedOverflowDirection.HORIZONTAL] 时才考虑，并且不应为 null。

更多参数和方法的描述，请参阅文档。

注意事项

任何帮助、建议或批评都受到欢迎！

Cheers.





以下是完整的示例代码：

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

import 'package:animated_overflow/animated_overflow.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Overflow Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Animated Overflow Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    double _width = MediaQuery.of(context).size.width;
    return Scaffold(
      backgroundColor: const Color(0xFF29292A),
      appBar: AppBar(
        backgroundColor: const Color(0xFF1B1D1E),
        title: Text(widget.title!),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            constraints: const BoxConstraints.expand(height: 20.0),
          ),
          Center(
            child: AnimatedOverflow(
              animatedOverflowDirection: AnimatedOverflowDirection.HORIZONTAL,
              child: const Text(
                "The quick brown fox jumps over the lazy dog.",
                style: TextStyle(color: Colors.blue, fontSize: 15, fontWeight: FontWeight.bold),
                maxLines: 1,
                overflow: TextOverflow.visible,
              ),
              maxWidth: _width / 2.0,
              padding: 40.0,
              speed: 50.0,
            ),
          ),
          Container(
            constraints: const BoxConstraints.expand(height: 20.0),
          ),
          AnimatedOverflow(
            animatedOverflowDirection: AnimatedOverflowDirection.HORIZONTAL,
            child: const Text(
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
              style: TextStyle(color: Colors.green, fontSize: 20, fontWeight: FontWeight.bold),
              maxLines: 1,
              overflow: TextOverflow.visible,
            ),
            maxWidth: _width / 2.0 * 3.0,
            padding: 60.0,
            speed: 100.0,
          ),
          AnimatedOverflow(
            animatedOverflowDirection: AnimatedOverflowDirection.HORIZONTAL,
            child: const Text(
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
              style: TextStyle(color: Colors.green, fontSize: 20, fontWeight: FontWeight.bold),
              maxLines: 1,
              overflow: TextOverflow.visible,
            ),
            maxWidth: _width / 2.0 * 3.0,
            padding: 60.0,
            speed: 50.0,
          ),
          Container(
            constraints: const BoxConstraints.expand(height: 20.0),
          ),
          AnimatedOverflow(
            animatedOverflowDirection: AnimatedOverflowDirection.VERTICAL,
            child: FlutterLogo(
              size: _width,
            ),
            maxHeight: 200,
            padding: 20.0,
            speed: 150.0,
          ),
          Container(
            constraints: const BoxConstraints.expand(height: 20.0),
          ),
          AnimatedOverflow(
            animatedOverflowDirection: AnimatedOverflowDirection.HORIZONTAL,
            child: const Text(
              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
              style: TextStyle(color: Colors.red, fontSize: 25, fontWeight: FontWeight.bold),
              maxLines: 1,
              overflow: TextOverflow.visible,
            ),
            maxWidth: _width,
            padding: 80.0,
            speed: 200.0,
          ),
          AnimatedOverflow(
            animatedOverflowDirection: AnimatedOverflowDirection.HORIZONTAL,
            child: const Text(
              "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
              style: TextStyle(color: Colors.red, fontSize: 25, fontWeight: FontWeight.bold),
              maxLines: 1,
              overflow: TextOverflow.visible,
            ),
            maxWidth: _width,
            padding: 80.0,
            speed: 150.0,
          ),
          Row(
            children: [
              AnimatedOverflow(
                animatedOverflowDirection: AnimatedOverflowDirection.VERTICAL,
                child: FlutterLogo(
                  size: _width / 2.0,
                ),
                maxHeight: 100,
                padding: 20.0,
                speed: 50.0,
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  AnimatedOverflow(
                    animatedOverflowDirection: AnimatedOverflowDirection.VERTICAL,
                    child: FlutterLogo(
                      size: _width / 2.0,
                    ),
                    maxHeight: 50,
                    padding: 20.0,
                    speed: 200.0,
                  ),
                  AnimatedOverflow(
                    animatedOverflowDirection: AnimatedOverflowDirection.HORIZONTAL,
                    child: const FlutterLogo(
                      size: 50,
                    ),
                    maxWidth: _width / 2.0,
                    padding: 20.0,
                    speed: 200.0,
                  ),
                ],
              ),
            ],
          ),
          AnimatedOverflow(
            animatedOverflowDirection: AnimatedOverflowDirection.HORIZONTAL,
            child: const Text(
              "Cosmos Software",
              style: TextStyle(color: Colors.white, fontSize: 75, fontWeight: FontWeight.bold),
              maxLines: 1,
              overflow: TextOverflow.visible,
            ),
            maxWidth: _width,
            padding: 10.0,
            speed: 50.0,
          ),
          AnimatedOverflow(
            animatedOverflowDirection: AnimatedOverflowDirection.HORIZONTAL,
            child: Container(
              width: _width * 2.0,
              height: 200.0,
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(
                    "assets/panoramic.jpg",
                  ),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            maxWidth: _width,
            padding: 0.0,
            speed: 50.0,
          ),
        ],
      ),
    );
  }
}

更多关于Flutter动画效果插件animated_overflow的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter动画效果插件animated_overflow的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于Flutter动画效果插件animated_overflow的使用，下面是一个具体的代码示例，展示了如何应用该插件来实现动画效果。

首先，确保你已经在pubspec.yaml文件中添加了animated_overflow依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_overflow: ^x.y.z  # 请替换为最新的版本号

然后，运行flutter pub get来安装依赖。

接下来是一个完整的Flutter应用示例，展示了如何使用animated_overflow来实现文本内容的动画溢出效果：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Overflow Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Overflow Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: AnimatedOverflowTextExample(),
        ),
      ),
    );
  }
}

class AnimatedOverflowTextExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String longText =
        'This is a very long text that will overflow the container and demonstrate the animated overflow effect.';

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text('Without Animated Overflow:'),
        SizedBox(
          width: 200,
          child: Text(
            longText,
            style: TextStyle(fontSize: 18),
            overflow: TextOverflow.ellipsis,
          ),
        ),
        SizedBox(height: 20),
        Text('With Animated Overflow:'),
        AnimatedOverflow(
          maxLines: 1,
          child: Text(
            longText,
            style: TextStyle(fontSize: 18),
          ),
        ),
      ],
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，它包含两个文本展示：

  1. Without Animated Overflow: 使用标准的Text组件，设置overflow属性为TextOverflow.ellipsis，当文本内容超出容器宽度时，会显示省略号。
  2. With Animated Overflow: 使用AnimatedOverflow组件，当文本内容超出指定行数（这里设置为1行）时，会显示动画溢出效果。

AnimatedOverflow组件允许你指定maxLines属性来控制文本的最大显示行数，当文本内容超出这个行数时，动画效果会被触发。

你可以根据需要调整AnimatedOverflow和Text组件的参数，以适应你的具体应用场景。希望这个示例能帮助你理解如何在Flutter中使用animated_overflow插件。

回到顶部