Flutter中如何通过EvaluatedButton实现点击随机展示图片？

实现思路 #

核心是通过状态管理更新当前显示的图片路径，点击按钮时从图片列表中随机选取一个元素并刷新UI。

完整代码示例 #

import 'dart:math';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('随机图片展示')),
        body: const RandomImageScreen(),
      ),
    );
  }
}

class RandomImageScreen extends StatefulWidget {
  const RandomImageScreen({super.key});

  @override
  State<RandomImageScreen> createState() => _RandomImageScreenState();
}

class _RandomImageScreenState extends State<RandomImageScreen> {
  // 你的图片列表
  final List<String> images = [
    'images/1.jpg',
    'images/2.jpg',
    'images/3.jpg',
    'images/4.jpg',
    'images/5.jpg',
  ];

  // 当前显示的图片路径
  String? currentImage;

  @override
  void initState() {
    super.initState();
    // 初始化时随机选一张图片
    _pickRandomImage();
  }

  // 随机选择图片的方法
  void _pickRandomImage() {
    final random = Random();
    setState(() {
      currentImage = images[random.nextInt(images.length)];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 展示图片
          if (currentImage != null)
            Image.asset(
              currentImage!,
              width: 200,
              height: 200,
              fit: BoxFit.cover,
            ),
          const SizedBox(height: 30),
          // 触发随机切换的按钮
          ElevatedButton(
            onPressed: _pickRandomImage,
            child: const Text('切换随机图片'),
          ),
        ],
      ),
    );
  }
}

关键说明 #

• 使用StatefulWidget管理图片状态，确保点击按钮后UI实时刷新
• 通过dart:math的Random类生成随机索引，从列表中选取图片
• initState方法初始化默认显示的图片，避免首次加载无内容
• 按钮的onPressed回调直接调用_pickRandomImage方法触发状态更新

内容的提问来源于stack exchange，提问作者أفنان خالد