You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中从JSON读取指定项:随机展示10条数据并刷新切换

随机展示10条JSON数据到ListView的实现方案

完全可以实现,核心思路是从你的30条JSON数据中随机抽取10条不重复的条目,绑定到ListView即可;每次刷新页面时重新执行抽取逻辑,就能得到不同的结果。

以下是Flutter平台的完整示例代码:

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(
      title: 'Random List Demo',
      home: RandomListScreen(),
    );
  }
}

class RandomListScreen extends StatefulWidget {
  @override
  State<RandomListScreen> createState() => _RandomListScreenState();
}

class _RandomListScreenState extends State<RandomListScreen> {
  // 模拟30条JSON数据,实际开发中可通过网络请求或本地文件加载解析
  final List<Map<String, dynamic>> _allData = List.generate(30, (index) => {
    'id': index + 1,
    'title': '条目 ${index + 1}',
    'content': '这是第${index + 1}条数据的内容'
  });

  late List<Map<String, dynamic>> _displayData;

  @override
  void initState() {
    super.initState();
    // 初始化时加载随机数据
    _refreshRandomData();
  }

  // 核心方法:抽取10条不重复的随机数据
  void _refreshRandomData() {
    final random = Random();
    List<Map<String, dynamic>> tempData = List.from(_allData);
    _displayData = [];

    for (int i = 0; i < 10; i++) {
      if (tempData.isEmpty) break;
      int randomIdx = random.nextInt(tempData.length);
      // 从临时列表移除并加入展示列表,避免重复
      _displayData.add(tempData.removeAt(randomIdx));
    }
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('随机列表展示'),
        actions: [
          // 刷新按钮触发重新抽取
          IconButton(
            icon: const Icon(Icons.refresh),
            onPressed: _refreshRandomData,
          )
        ],
      ),
      body: ListView.builder(
        itemCount: _displayData.length,
        itemBuilder: (context, index) {
          final item = _displayData[index];
          return ListTile(
            leading: CircleAvatar(child: Text(item['id'].toString())),
            title: Text(item['title']),
            subtitle: Text(item['content']),
          );
        },
      ),
    );
  }
}

关键说明:

  • 随机抽取逻辑:通过创建原数据的副本,每次随机选取一个元素并从副本中移除,确保10条数据不会重复
  • 页面刷新:使用StatefulWidget的setState方法更新状态,无论是初始化还是点击刷新按钮,都会重新生成随机列表
  • 数据加载:示例中用List.generate模拟了JSON数据,实际开发中你可以替换为网络请求(比如http.get)或本地JSON文件解析的逻辑

如果是Android原生平台,思路类似:

  1. 解析JSON为List<Model>
  2. 用Random类从列表中随机抽取10条不重复数据
  3. 将数据设置给RecyclerView的适配器,调用notifyDataSetChanged()刷新即可

内容的提问来源于stack exchange,提问作者talal habib

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.10 23:25:19