首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在flutter应用程序中实现类似HTML字幕效果

如何在flutter应用程序中实现类似HTML字幕效果
EN

Stack Overflow用户
提问于 2018-06-04 18:20:02
回答 1查看 1K关注 0票数 0

我正在尝试在Flutter应用程序中实现html的字幕效果。我想要的是在我的应用程序顶部显示从右向左自动滚动的通知。

EN

Stack Overflow用户

发布于 2018-10-07 17:13:42

我想出了一个解决方案:你可以使用一个水平的列表视图,并且使用animateto函数,你可以在列表视图中滚动文本。当你在应用程序启动时触发animateto函数时,你会有一个字幕效果。这可能不是创建选框的最好方法,但它很有效:

代码语言:javascript
运行
复制
import 'package:flutter/material.dart';
import 'dart:async';

class MyHomePage extends StatefulWidget {
  MyHomePageState createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {

  AnimationController _controller;
  ScrollController scrollController;

  Timer _timer;

  @override
  void initState() {
    super.initState();
    scrollController = new ScrollController();
    animate();
  }



  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      body: new Stack(children: <Widget>[new Container(child: new ListView(
        controller: scrollController,
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          new Text("I figured out a solution: You can use a horizontal listview and with the animateto function you can scroll the text inside the listview")
        ],
      ),
      margin: new EdgeInsets.only(top: 100.0),)
    ])
    );
  }

  void animate() async{
        if(scrollController.positions.isNotEmpty){
          while(true) {
            await scrollController.animateTo(
                0.0, duration: new Duration(milliseconds: 400),
                curve: Curves.ease);
            await scrollController.animateTo(
                scrollController.position.maxScrollExtent,
                duration: new Duration(seconds: 8), curve: Curves.linear);
          }
        }else{
          _timer = new Timer(const Duration(milliseconds: 400), () {
            animate();
          });
        }

  }

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: new MyHomePage(),
    );
  }
}
票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50678327

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档