0

我希望我的颤动网页显示一张照片，并每 3 秒更改一次以显示另一张照片.. 这是我的代码

class _contactPageState extends State<contactPage> {

List<String> randomPics= ['profiles/github.png', 'profiles/linkedIn.png', 'profiles/stack.png'];
Timer timer;
var random= Random();
String photo;

@override
void initState() {
photo = randomPics[random.nextInt(randomPics.length)];
openLink = new linksToOpen();
super.initState();
timer = new Timer(new Duration(seconds: 1), ( ){
  setState(() {
    photo= randomPics[random.nextInt(randomPics.length)];
    print('${photo}');
  });
});
}
  @override
Widget build(BuildContext context) {
    Container(
           
      child: Image(image : AssetImage(photo),gaplessPlayback: true,),
        width: 400, height: 400,
                
                ),

我的代码有什么问题？拜托，谁能帮帮我！

4

3 回答 3

1

我做了一些测试，我认为这对你有用：

import 'dart:async';
import 'dart:math';

import 'package:flutter/widgets.dart';

class ContactPageState extends StatefulWidget {
  ContactPageState({Key key}) : super(key: key);

  @override
  _ContactPageState createState() => _ContactPageState();
}

class _ContactPageState extends State<ContactPageState> {
  List<String> randomPics = ['assets/a.jpg', 'assets/b.jpg', 'assets/c.jpg'];
  String photo;
  final random = new Random();

  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) => configureTimer());
    super.initState();
  }

  configureTimer() {
    Timer.periodic(Duration(milliseconds: 3000), (timer) {
      final int index = random.nextInt(randomPics.length);
      setState(() {
        photo = randomPics[index];
        debugPrint('Select picture $photo in index $index');
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image(
        image: AssetImage(photo != null ? photo : 'assets/a.jpg'),
        gaplessPlayback: true,
      ),
      width: 400,
      height: 400,
    );
  }
}
于 2020-10-04T22:34:01.120 回答
1

为了快速修复，您需要将函数添加setStatus ...为回调函数，以便它可以无限调用自身。

  void _nextPic(){
    setState(() {
      photo= randomPics[random.nextInt(randomPics.length)];
      print('${photo}');
    });
    timer = new Timer(new Duration(seconds: 1), _nextPic);
  }

此功能完成后创建另一个计时器。所以你可以只需要在initState...

  @override
  void initState() {
    photo = randomPics[random.nextInt(randomPics.length)];
    super.initState();
    timer = new Timer(new Duration(seconds: 1), _nextPic);
  }
于 2020-10-05T06:30:34.880 回答
0

一方面，您需要指定 3 秒而不是 1 秒。另外，您可能正在寻找 timer.periodic 以使其执行多次（直到您告诉它停止），而不是从状态开始发生的单个计时器倒计时初始化。

一个例子，在这里查看选择的答案： Flutter Countdown Timer

文档： https ://api.flutter.dev/flutter/dart-async/Timer/Timer.periodic.html

于 2020-10-04T21:12:12.543 回答