如何在flutter应用中实现类似“HTML的选框”效果

Question

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

Answer 1

我想出了一个解决方案：您可以使用水平列表视图，并使用 animateto 函数可以滚动列表视图内的文本。当您在应用程序启动时触发 animateto 功能时，您会获得选取框效果。这可能不是制作选取框的最佳方法，但它确实有效：

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(),
    );
  }
}