Question

我不相信我在问这么简单的问题。

我尝试更改 initState() 中的不透明度，但没有效果。

如果我不使用按钮，如何触发 setState？

import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: LogoFade(),
    );
  }
}

class LogoFade extends StatefulWidget {
  @override
  createState() => LogoFadeState();
}

class LogoFadeState extends State<LogoFade> {
  double opacityLevel = 0.0;

  void changeOpacity() {
    setState(() => opacityLevel = 1.0);
  }

  @override
  void initState() {
    changeOpacity();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
// changeOpacity();
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        AnimatedOpacity(
          opacity: opacityLevel,
          duration: Duration(seconds: 6),
          child: FlutterLogo(
            size: 200,
          ),
        ),
      ],
    );
  }
}

我只想要一个简单的淡入效果，比如 Animate.css 库。就像我们用下面的例子在网络中制作的一样。

.fade-in-image {
  animation: fadeIn 6s;

}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

<div class="fade-in-image">
   <img src="https://www.innodeed.com/wp-content/uploads/2017/11/flutter-logo.png">
</div>

如何使用颤振在页面加载时淡入图像过渡？

0 个答案: