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原生平台,思路类似:
- 解析JSON为
List<Model> - 用
Random类从列表中随机抽取10条不重复数据 - 将数据设置给
RecyclerView的适配器,调用notifyDataSetChanged()刷新即可
内容的提问来源于stack exchange,提问作者talal habib
相关产品推荐
相关产品推荐

