Question

假设我有一个0-1000之间的整数列表假设下面的图片：

但我想显示数字而不是水果。现在我有3个问题：

1：如您所知，最后该项目必须位于其框的中央，我该如何在ListView中做到这一点

2：我只应使用控制器控制ListView，而用户不应移动它。

3：如何逐渐旋转？

这是我的代码：

class SpinnerChance extends StatefulWidget {
  @override
  _SpinnerChanceState createState() => _SpinnerChanceState();
}

class _SpinnerChanceState extends State<SpinnerChance>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation1;
  Animation<double> _animation2;
  Animation<double> _animation3;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 5),
    );

    _animation1 = Tween(begin: 0.0, end: 100.0).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.fastOutSlowIn,
      ),
    )..addListener(() {
        setState(() {});
      });

    _animation2 = Tween(begin: 0.0, end: 30.0).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.fastOutSlowIn,
      ),
    )..addListener(() {
        setState(() {});
      });

    _animation3 = Tween(begin: 0.0, end: 10.0).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.fastOutSlowIn,
      ),
    )..addListener(() {
        setState(() {});
      });
  }

  List<Widget> items = [];

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Container(
                child: Text(_animation1?.value?.toStringAsFixed(1) ??
                    "You Dont Spin It Yet"),
              ),
              Container(
                child: Text(_animation2?.value?.toStringAsFixed(1) ??
                    "You Dont Spin It Yet"),
              ),
              Container(
                child: Text(_animation3?.value?.toStringAsFixed(1) ??
                    "You Dont Spin It Yet"),
              ),
            ],
          ),
          RaisedButton(
            child: Text("Spin!"),
            onPressed: () {
              _animationController.forward();
            },
          )
        ],
      ),
    );
  }
}

Answer 1

我可以想象有很多方法可以创建想要的效果。它基本上是一台老虎机，但是您使用数字代替水果。

我发现this tutorial回答了您有关如何实现动画以及如何将其转换为数字的大多数问题，您可以使用ListView小部件代替图片，因为您只需要数字0-9。

一般来说，这并没有完全连接到Align，但是如果您想将其中心居中，则将要居中的特定窗口小部件包装在Align( alignment: Alignment.center child: yourWidgetHere ),小窗口中，如下所示：

(in-ns 'some-namespace-other-than-name.core)

如何在ListView中将项目居中放置

1 个答案: